beatufitull front end for ozone modration ,, wit catpucoin and ebergarden !
ozone
moderation
FIX header
+8
-20
+4
-18
src/components/Header.svelte
+4
-18
src/components/Header.svelte
···
1
1
<script lang="ts">
2
2
import { session } from '$lib/stores/auth';
3
-
import {
4
-
accentColours,
5
-
appTheme,
6
-
inputAccentColor,
7
-
type AppTheme,
8
-
type InputAccentColor
9
-
} from '$lib/stores/ui';
3
+
import { appTheme, type AppTheme } from '$lib/stores/ui';
10
4
import { createQuery } from '@tanstack/svelte-query';
11
5
import { Cat, LogOut, MenuIcon, Paintbrush, SearchIcon, TriangleAlert } from 'lucide-svelte';
12
6
import Button from './ui/Button.svelte';
13
7
import PopupMenu from './ui/PopupMenu.svelte';
14
8
import { navItems } from '$lib/nav';
15
-
import { page } from '$app/state';
16
-
import { onMount } from 'svelte';
17
9
import { ads } from '$lib/ads';
18
10
19
11
let { onSearch } = $props<{
···
29
21
window.location.href = '/login';
30
22
}
31
23
32
-
function setInputAccentColor(color: InputAccentColor) {
33
-
inputAccentColor.set(color);
34
-
}
35
-
36
24
function setAppTheme(theme: AppTheme) {
37
25
appTheme.set(theme);
38
-
}
39
-
40
-
function isActive(href: string) {
41
-
return page.url.pathname === href;
42
26
}
43
27
44
28
const profileQuery = createQuery(() => ({
···
76
60
<SearchIcon class="size-5" />
77
61
</Button>
78
62
<PopupMenu
63
+
originClass="origin-top-right"
79
64
wrapperClass="relative"
80
65
menuClass="absolute top-full right-0 z-50 w-48 rounded-md border border-ctp-surface1 bg-ctp-base p-1.5 shadow-lg"
81
66
>
···
173
158
>
174
159
</PopupMenu>
175
160
<PopupMenu
161
+
originClass="origin-top-right"
176
162
wrapperClass="relative"
177
163
menuClass="absolute top-full right-0 z-50 w-40 rounded-md border border-ctp-surface1 bg-ctp-base p-1.5 shadow-lg"
178
164
>
···
189
175
</svelte:fragment>
190
176
191
177
<svelte:fragment slot="content">
192
-
{#each navItems as item}
178
+
{#each navItems as item (item.label)}
193
179
{@const Icon = item.icon}
194
180
195
181
<a href={item.href}>
+4
-2
src/components/ui/PopupMenu.svelte
+4
-2
src/components/ui/PopupMenu.svelte
···
7
7
enableOverlay = true,
8
8
wrapperClass = 'relative',
9
9
menuClass = '',
10
+
originClass = 'origin-top',
10
11
overlayClass = 'fixed inset-0 z-40'
11
12
} = $props<{
12
13
open?: boolean;
···
14
15
enableOverlay?: boolean;
15
16
wrapperClass?: string;
16
17
menuClass?: string;
18
+
originClass?: string;
17
19
overlayClass?: string;
18
20
}>();
19
21
···
36
38
37
39
{#if open}
38
40
<div
39
-
class={`origin-top ${menuClass}`}
41
+
class={`${originClass} ${menuClass}`}
40
42
in:scale={{ duration: 200 }}
41
-
out:scale={{ duration: 150 }}
43
+
out:scale={{ duration: 200 }}
42
44
>
43
45
<slot name="content" {close}></slot>
44
46
</div>