feat(app): extend navigation with changelog links and accordion

apps/app/src/components/Navigation.tsx

@@ -1,4 +1,8 @@
 import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
   Button,
   Card,
   CardContent,
@@ -24,18 +28,50 @@ export const Navigation = () => {
           </Button>
         </div>
         <div className="flex-1">
-          <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
+          <nav className="grid items-start px-2 text-sm font-medium lg:px-4 gap-2">
-            {NavigationRoutes.map((route) => (
+            {NavigationRoutes.map((route) => {
+              if (!route.childrens) {
+                return (
                   <Link
-                key={route.to}
+                    key={route.name}
                     to={route.to}
                     className="flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary"
                     activeProps={{ className: 'bg-muted text-primary' }}
+                    activeOptions={{ exact: true }}
                   >
                     <route.icon className="h-4 w-4" />
                     {route.name}
                   </Link>
+                )
+              }
+
+              return (
+                <Accordion
+                  type="single"
+                  collapsible
+                  key={route.name}
+                  defaultValue="changelog"
+                >
+                  <AccordionItem value="changelog">
+                    <AccordionTrigger>Changelog</AccordionTrigger>
+                    <AccordionContent className="gap-2 flex flex-col">
+                      {route.childrens.map((childRoute) => (
+                        <Link
+                          key={childRoute.name}
+                          to={childRoute.to}
+                          className="flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary"
+                          activeProps={{ className: 'bg-muted text-primary' }}
+                          activeOptions={{ exact: true }}
+                        >
+                          <childRoute.icon className="h-4 w-4" />
+                          {childRoute.name}
+                        </Link>
                       ))}
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
+              )
+            })}
           </nav>
         </div>
         <div className="mt-auto p-4">

apps/app/src/components/NavigationMobile.tsx

@@ -1,4 +1,8 @@
 import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
   Button,
   Card,
   CardContent,
@@ -30,19 +34,49 @@ export const NavigationMobile = () => {
           >
             <span className="sr-only">boring.tools</span>
           </Link>
-          {NavigationRoutes.map((route) => (
+          {NavigationRoutes.map((route) => {
+            if (!route.childrens) {
+              return (
                 <Link
-              key={route.to}
+                  key={route.name}
                   to={route.to}
-              className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 hover:text-foreground"
+                  className="flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary"
-              activeProps={{
+                  activeProps={{ className: 'bg-muted text-primary' }}
-                className: 'bg-muted text-foreground',
+                  activeOptions={{ exact: true }}
-              }}
                 >
-              <route.icon className="h-5 w-5" />
+                  <route.icon className="h-4 w-4" />
                   {route.name}
                 </Link>
+              )
+            }
+
+            return (
+              <Accordion
+                type="single"
+                collapsible
+                key={route.name}
+                defaultValue="changelog"
+              >
+                <AccordionItem value="changelog">
+                  <AccordionTrigger>Changelog</AccordionTrigger>
+                  <AccordionContent className="gap-2 flex flex-col">
+                    {route.childrens.map((childRoute) => (
+                      <Link
+                        key={childRoute.name}
+                        to={childRoute.to}
+                        className="flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary"
+                        activeProps={{ className: 'bg-muted text-primary' }}
+                        activeOptions={{ exact: true }}
+                      >
+                        <childRoute.icon className="h-4 w-4" />
+                        {childRoute.name}
+                      </Link>
                     ))}
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            )
+          })}
         </nav>
         <div className="mt-auto">
           <Card>

apps/app/src/utils/navigation-routes.ts

@@ -1,9 +1,32 @@
-import { HouseIcon } from 'lucide-react'
+import type { ReactNode } from '@tanstack/react-router'
+import { FileStackIcon, HouseIcon, LayoutDashboardIcon } from 'lucide-react'
 
-export const NavigationRoutes = [
+type Route = {
+  name: string
+  to?: string
+  icon?: ReactNode
+  childrens?: Route[]
+}
+
+export const NavigationRoutes: Route[] = [
   {
     name: 'Dashboard',
     to: '/',
+    icon: LayoutDashboardIcon,
+  },
+  {
+    name: 'Changelog',
+    childrens: [
+      {
+        name: 'Overview',
+        to: '/changelog',
         icon: HouseIcon,
       },
+      {
+        name: 'Versions',
+        to: '/changelog/version',
+        icon: FileStackIcon,
+      },
+    ],
+  },
 ]