48 lines
1,006 B
TypeScript
48 lines
1,006 B
TypeScript
import { JSX } from 'preact/jsx-runtime'
|
|
import { IconLink } from '../components/IconLink.tsx'
|
|
import { Icons } from '../components/icons.tsx'
|
|
import { IS_BROWSER } from '$fresh/runtime.ts'
|
|
|
|
interface NavItem {
|
|
text: string
|
|
href: string
|
|
icon?: keyof typeof Icons
|
|
}
|
|
|
|
const navItems: NavItem[] = [
|
|
{
|
|
text: 'Budgets',
|
|
href: '/bank/budgets',
|
|
icon: 'SomeIcon',
|
|
},
|
|
{
|
|
text: 'Transactions',
|
|
href: '/bank/transactions',
|
|
},
|
|
{
|
|
text: 'Something',
|
|
href: '/bank/something',
|
|
},
|
|
]
|
|
|
|
export function Nav(_props: JSX.HTMLAttributes<HTMLElement>) {
|
|
// TODO: on nav, the `active` field is not updated
|
|
globalThis.addEventListener('popstate', (ev) => {
|
|
console.log('popstate', ev)
|
|
})
|
|
return (
|
|
<nav class='w-full flex flex-1 sm:flex-col sm:bg-bg gap-2 p-2'>
|
|
{navItems.map(({ text, ...props }, _i) => (
|
|
<IconLink
|
|
{...props}
|
|
icon={props.icon}
|
|
active={IS_BROWSER &&
|
|
globalThis.location.toString().endsWith(props.href)}
|
|
>
|
|
{text}
|
|
</IconLink>
|
|
))}
|
|
</nav>
|
|
)
|
|
}
|