update saladeaul.adigitaltw

apps/saladeaula.digital/app/routes/certs.tsx

@@ -0,0 +1,44 @@
+import type { Route } from './+types'
+
+import { Link } from 'react-router'
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from '@repo/ui/components/ui/breadcrumb'
+
+export function meta({}: Route.MetaArgs) {
+  return [{ title: 'Certificados' }]
+}
+
+export default function Component() {
+  return (
+    <div className="space-y-2.5">
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link to="..">Meus cursos</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Certificados</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+
+      <div className="space-y-0.5">
+        <h1 className="text-2xl font-bold tracking-tight">Certificados</h1>
+        <p className="text-muted-foreground">
+          Gerencie seus certificados com facilidade! Visualize suas conquistas e
+          acompanhe seus cursos concluídos.
+        </p>
+      </div>
+    </div>
+  )
+}

apps/saladeaula.digital/app/routes/layout.tsx

@@ -1,18 +1,27 @@
 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,
-  NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList
 } from '@repo/ui/components/ui/navigation-menu'
-import { useIsMobile } from '@repo/ui/hooks/use-mobile'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger
+} from '@repo/ui/components/ui/sheet'
 
 export const middleware: Route.MiddlewareFunction[] = [authMiddleware]
 
@@ -21,9 +30,24 @@ export async function loader({ context }: Route.ActionArgs) {
   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 isMobile = useIsMobile()
   const { user } = loaderData
+  const [isOpen, { toggle }] = useToggle()
 
   return (
     <div className="relative flex flex-col flex-1 min-w-0">
@@ -32,26 +56,61 @@ export default function Component({ loaderData }: Route.ComponentProps) {
                    px-4 py-2 lg:py-4 sticky top-0 z-5"
       >
         <div className="container mx-auto flex items-center">
-          <div className="flex gap-5">
+          {/* Desktop Menu */}
+          <div className="hidden lg:flex gap-8">
             <Link to="/">
               <ThemedImage />
             </Link>
 
-            <NavigationMenu viewport={isMobile}>
+            <NavigationMenu>
               <NavigationMenuList>
-                <NavigationMenuItem>
-                  <NavMenuLink to="/">Meus cursos</NavMenuLink>
-                </NavigationMenuItem>
-                <NavigationMenuItem>
-                  <NavMenuLink to="/certs">Certificados</NavMenuLink>
-                </NavigationMenuItem>
-                <NavigationMenuItem>
-                  <NavMenuLink to="/payments">Histórico de compras</NavMenuLink>
-                </NavigationMenuItem>
+                {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} />
@@ -67,14 +126,3 @@ export default function Component({ loaderData }: Route.ComponentProps) {
     </div>
   )
 }
-
-function NavMenuLink({ children, ...props }) {
-  return (
-    <NavigationMenuLink
-      className="font-medium aria-[current=page]:bg-muted"
-      asChild
-    >
-      <NavLink {...props}>{children}</NavLink>
-    </NavigationMenuLink>
-  )
-}