update

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

@@ -1,12 +1,18 @@
 import type { Route } from './+types'
 
-import { Outlet } from 'react-router'
+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 {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList
+} from '@repo/ui/components/ui/navigation-menu'
+import { useIsMobile } from '@repo/ui/hooks/use-mobile'
 
 export const middleware: Route.MiddlewareFunction[] = [authMiddleware]
 
@@ -16,6 +22,7 @@ export async function loader({ context }: Route.ActionArgs) {
 }
 
 export default function Component({ loaderData }: Route.ComponentProps) {
+  const isMobile = useIsMobile()
   const { user } = loaderData
 
   return (
@@ -25,7 +32,25 @@ 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">
-          <ThemedImage />
+          <div className="flex gap-5">
+            <Link to="/">
+              <ThemedImage />
+            </Link>
+
+            <NavigationMenu viewport={isMobile}>
+              <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>
+              </NavigationMenuList>
+            </NavigationMenu>
+          </div>
 
           <div className="ml-auto flex gap-2.5 items-center">
             <ModeToggle />
@@ -42,3 +67,14 @@ 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>
+  )
+}