homeman-deno/islands/Nav.tsx

// import { JSX } from 'preact'
// import { IS_BROWSER } from '$fresh/runtime.ts'

import { Bars3Outline } from 'preact-heroicons'
import { Clock } from '@homeman/islands/Clock.tsx'
import { Dialog } from '@homeman/components/Dialog.tsx'
import { useSignal } from '@preact/signals'
import { IS_BROWSER } from '$fresh/runtime.ts'

let fireworks: HTMLAudioElement | undefined
if (IS_BROWSER) fireworks = new Audio('/fireworks.mp3')

export function Nav(/* props: {} */) {
	const showMenu = useSignal(false)
	return (
		<>
			<Dialog
				headerTitle='Main Menu'
				show={showMenu.value}
				onClose={() => {
					showMenu.value = false
				}}
			>
				<section class='flex flex-col text-center p-2 gap-2'>
					<a class='p-4 rounded bg-gray-500/20' href='/'>Dashboard</a>
					<a class='p-4 rounded bg-gray-500/20' href='/routine'>
						Daily Routine
					</a>
					<a class='p-4 rounded bg-gray-500/20' href='/admin'>Edit Users</a>
					<button
						class='p-4 bg-gray-500/20 hover:bg-stone-500/20'
						onClick={() => IS_BROWSER && fireworks?.play()}
					>
						Play Sound
					</button>
				</section>
			</Dialog>
			<nav class='bg-stone-200 dark:bg-stone-800 flex justify-items-start items-center'>
				<button
					class='p-4 hover:bg-stone-500/20'
					onClick={() => {
						showMenu.value = true
					}}
				>
					<Bars3Outline class='h-6 w-6' />
				</button>
				<a class='p-4 hover:bg-stone-500/20' href='/'>
					Flanagan Family
				</a>
				<Clock class='ml-auto pr-4 text-2xl' />
			</nav>
		</>
	)
}