125 lines
3.4 KiB
TypeScript
125 lines
3.4 KiB
TypeScript
import type { Route } from './+types'
|
|
|
|
import { useToggle } from 'ahooks'
|
|
import { MenuIcon } from 'lucide-react'
|
|
import { Link, NavLink, Outlet } from 'react-router'
|
|
|
|
import { userContext } from '@repo/auth/context'
|
|
import { authMiddleware } from '@repo/auth/middleware/auth'
|
|
|
|
import { ModeToggle, ThemedImage } from '@repo/ui/components/dark-mode'
|
|
import { NavUser } from '@repo/ui/components/nav-user'
|
|
import { Button } from '@repo/ui/components/ui/button'
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuLink,
|
|
NavigationMenuList
|
|
} from '@repo/ui/components/ui/navigation-menu'
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
SheetTrigger
|
|
} from '@repo/ui/components/ui/sheet'
|
|
|
|
export const middleware: Route.MiddlewareFunction[] = [authMiddleware]
|
|
|
|
export async function loader({ context }: Route.ActionArgs) {
|
|
const user = context.get(userContext)
|
|
return Response.json({ user })
|
|
}
|
|
|
|
const navMain = [
|
|
{
|
|
title: 'Meus cursos',
|
|
url: '/'
|
|
},
|
|
{
|
|
title: 'Certificados',
|
|
url: '/certs'
|
|
},
|
|
{
|
|
title: 'Histórico de compras',
|
|
url: '/payments'
|
|
}
|
|
]
|
|
|
|
export default function Component({ loaderData }: Route.ComponentProps) {
|
|
const { user } = loaderData
|
|
const [isOpen, { toggle }] = useToggle()
|
|
|
|
return (
|
|
<div className="relative flex flex-col flex-1 min-w-0 h-full">
|
|
<header
|
|
className="bg-background/15 backdrop-blur-sm
|
|
px-4 py-2 lg:py-4 sticky top-0 z-5"
|
|
>
|
|
<div className="container mx-auto flex items-center">
|
|
{/* Desktop Menu */}
|
|
<div className="hidden lg:flex items-center gap-8">
|
|
<Link to="/">
|
|
<ThemedImage />
|
|
</Link>
|
|
|
|
<NavigationMenu>
|
|
<NavigationMenuList>
|
|
{navMain.map(({ url, title }, key) => (
|
|
<NavigationMenuLink
|
|
key={key}
|
|
className="font-medium aria-[current=page]:bg-muted"
|
|
asChild
|
|
>
|
|
<NavLink to={url}>{title}</NavLink>
|
|
</NavigationMenuLink>
|
|
))}
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
<div className="lg:hidden">
|
|
<Sheet open={isOpen} onOpenChange={toggle}>
|
|
<SheetTrigger asChild>
|
|
<Button variant="outline" size="icon" className="">
|
|
<MenuIcon />
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="left" className="w-64 overflow-y-auto">
|
|
<SheetHeader>
|
|
<SheetTitle>
|
|
<Link to="/">
|
|
<ThemedImage />
|
|
</Link>
|
|
</SheetTitle>
|
|
</SheetHeader>
|
|
|
|
<ul className="px-2">
|
|
{navMain.map(({ url, title }, key) => (
|
|
<li key={key}>
|
|
<NavLink
|
|
to={url}
|
|
className="px-2 py-0.5 block"
|
|
onClick={toggle}
|
|
>
|
|
{title}
|
|
</NavLink>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
|
|
<div className="ml-auto flex gap-2.5 items-center">
|
|
<ModeToggle />
|
|
<NavUser user={user} />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<Outlet />
|
|
</div>
|
|
)
|
|
}
|