vielle.dev
forked from
pds.ls/pdsls
atproto explorer
add navbar copy menu
handle.invalid
+19
-27
src/layout.tsx
+19
-27
src/layout.tsx
···
38
38
}
39
39
});
40
40
41
-
const clickEvent = (event: MouseEvent) => {
42
-
if (!menuButton()?.contains(event.target as Node) && !menu()?.contains(event.target as Node))
43
-
setShowMenu(false);
44
-
};
45
-
46
41
onMount(() => {
47
42
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", themeEvent);
48
-
window.addEventListener("click", clickEvent);
43
+
window.addEventListener("click", (ev) => {
44
+
if (!menuButton()?.contains(ev.target as Node) && !menu()?.contains(ev.target as Node))
45
+
setShowMenu(false);
46
+
});
49
47
});
48
+
49
+
const NavButton = (props: { href: string; label: string }) => {
50
+
return (
51
+
<A
52
+
href={props.href}
53
+
onClick={() => setShowMenu(false)}
54
+
class="rounded-lg p-1 hover:bg-neutral-200/50 active:bg-neutral-200/50 dark:hover:bg-neutral-700 dark:active:bg-neutral-700"
55
+
>
56
+
{props.label}
57
+
</A>
58
+
);
59
+
};
50
60
51
61
return (
52
62
<div id="main" class="m-4 flex flex-col items-center text-neutral-900 dark:text-neutral-200">
···
82
92
ref={setMenu}
83
93
class="dark:bg-dark-300 absolute top-8 right-0 z-20 flex flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-3 text-sm shadow-md dark:border-neutral-700"
84
94
>
85
-
<A
86
-
href="/jetstream"
87
-
onClick={() => setShowMenu(false)}
88
-
class="rounded-lg p-1 hover:bg-neutral-200/50 active:bg-neutral-200/50 dark:hover:bg-neutral-700 dark:active:bg-neutral-700"
89
-
>
90
-
<span>Jetstream</span>
91
-
</A>
92
-
<A
93
-
href="/firehose"
94
-
onClick={() => setShowMenu(false)}
95
-
class="rounded-lg p-1 hover:bg-neutral-200/50 active:bg-neutral-200/50 dark:hover:bg-neutral-700 dark:active:bg-neutral-700"
96
-
>
97
-
<span>Firehose</span>
98
-
</A>
99
-
<A
100
-
href="/settings"
101
-
onClick={() => setShowMenu(false)}
102
-
class="rounded-lg p-1 hover:bg-neutral-200/50 active:bg-neutral-200/50 dark:hover:bg-neutral-700 dark:active:bg-neutral-700"
103
-
>
104
-
<span>Settings</span>
105
-
</A>
95
+
<NavButton href="/jetstream" label="Jetstream" />
96
+
<NavButton href="/firehose" label="Firehose" />
97
+
<NavButton href="/settings" label="Settings" />
106
98
<ThemeSelection />
107
99
</div>
108
100
</Show>