104 lines
2.8 KiB
TypeScript
104 lines
2.8 KiB
TypeScript
import { mdiMenu } from '@mdi/js'
|
|
import Icon from '@mdi/react'
|
|
|
|
import { Link, routes } from '@redwoodjs/router'
|
|
import { Toaster } from '@redwoodjs/web/toast'
|
|
|
|
import ThemeToggle from 'src/components/ThemeToggle/ThemeToggle'
|
|
import ToastNotification from 'src/components/ToastNotification/ToastNotification'
|
|
|
|
interface NavbarRoute {
|
|
name: string
|
|
path: string
|
|
}
|
|
|
|
type NavbarLayoutProps = {
|
|
children?: React.ReactNode
|
|
}
|
|
|
|
const NavbarLayout = ({ children }: NavbarLayoutProps) => {
|
|
// TODO: populate with buttons to other page
|
|
const navbarRoutes: NavbarRoute[] = [
|
|
{
|
|
name: 'Test',
|
|
path: routes.home(),
|
|
},
|
|
]
|
|
|
|
const navbarButtons = () =>
|
|
navbarRoutes.map((route, i) => (
|
|
<Link key={i} to={route.path} className="btn btn-ghost btn-sm">
|
|
{route.name}
|
|
</Link>
|
|
))
|
|
|
|
return (
|
|
<>
|
|
<Toaster
|
|
position="top-right"
|
|
containerClassName="-mr-2 mt-16"
|
|
containerStyle={{
|
|
zIndex: 50, // "z-50" does not work
|
|
}}
|
|
gutter={8}
|
|
>
|
|
{(t) => (
|
|
<ToastNotification
|
|
t={t}
|
|
type={t.type}
|
|
message={t.message.toString()}
|
|
/>
|
|
)}
|
|
</Toaster>
|
|
<div className="sticky top-0 z-50 p-2">
|
|
<div className="navbar rounded-xl bg-base-300 shadow-xl">
|
|
<div className="navbar-start space-x-2 lg:first:space-x-0">
|
|
<div className="dropdown">
|
|
<div
|
|
tabIndex={0}
|
|
role="button"
|
|
className="btn btn-ghost lg:hidden"
|
|
>
|
|
<Icon
|
|
path={mdiMenu}
|
|
className="text-base-content-100 h-8 w-8"
|
|
/>
|
|
</div>
|
|
<div
|
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
tabIndex={0}
|
|
className="menu dropdown-content -ml-2 mt-4 w-36 space-y-2 rounded-box bg-base-200 shadow-xl"
|
|
>
|
|
{navbarButtons()}
|
|
</div>
|
|
</div>
|
|
<Link
|
|
to={routes.home()}
|
|
className="btn btn-ghost hidden font-syne text-xl sm:flex"
|
|
>
|
|
Ahmed Al-Taiar
|
|
</Link>
|
|
</div>
|
|
<div className="navbar-center">
|
|
<Link
|
|
to={routes.home()}
|
|
className="btn btn-ghost font-syne text-xl sm:hidden"
|
|
>
|
|
Ahmed Al-Taiar
|
|
</Link>
|
|
</div>
|
|
<div className="navbar-center hidden lg:flex">
|
|
<div className="space-x-2 font-syne">{navbarButtons()}</div>
|
|
</div>
|
|
<div className="navbar-end">
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="font-inter">{children}</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default NavbarLayout
|