feat(app): simplify navigation links

apps/app/src/components/Navigation.tsx

@@ -7,7 +7,8 @@ import {
   CardTitle,
 } from '@boring.tools/ui'
 import { Link } from '@tanstack/react-router'
-import { BellIcon, HomeIcon } from 'lucide-react'
+import { BellIcon } from 'lucide-react'
+import { NavigationRoutes } from '../utils/navigation-routes'
 
 export const Navigation = () => {
   return (
@@ -24,14 +25,17 @@ export const Navigation = () => {
         </div>
         <div className="flex-1">
           <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
-            <Link
+            {NavigationRoutes.map((route) => (
-              to="/"
+              <Link
-              className="flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary"
+                key={route.to}
-              activeProps={{ className: 'bg-muted text-primary' }}
+                to={route.to}
-            >
+                className="flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary"
-              <HomeIcon className="h-4 w-4" />
+                activeProps={{ className: 'bg-muted text-primary' }}
-              Dashboard
+              >
-            </Link>
+                <route.icon className="h-4 w-4" />
+                {route.name}
+              </Link>
+            ))}
           </nav>
         </div>
         <div className="mt-auto p-4">
@@ -39,8 +43,8 @@ export const Navigation = () => {
             <CardHeader className="p-2 pt-0 md:p-4">
               <CardTitle>More Infos</CardTitle>
               <CardDescription>
-                If you want more informations about boring.tools, visit our
+                If you want more information about boring.tools, visit our
-                documenation!
+                documentation!
               </CardDescription>
             </CardHeader>
             <CardContent className="p-2 pt-0 md:p-4 md:pt-0">

apps/app/src/components/NavigationMobile.tsx

@@ -10,7 +10,8 @@ import {
   SheetTrigger,
 } from '@boring.tools/ui'
 import { Link } from '@tanstack/react-router'
-import { HomeIcon, MenuIcon } from 'lucide-react'
+import { MenuIcon } from 'lucide-react'
+import { NavigationRoutes } from '../utils/navigation-routes'
 
 export const NavigationMobile = () => {
   return (
@@ -29,24 +30,27 @@ export const NavigationMobile = () => {
           >
             <span className="sr-only">boring.tools</span>
           </Link>
-          <Link
+          {NavigationRoutes.map((route) => (
-            to="/"
+            <Link
-            className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 hover:text-foreground"
+              key={route.to}
-            activeProps={{
+              to={route.to}
-              className: 'bg-muted text-foreground',
+              className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 hover:text-foreground"
-            }}
+              activeProps={{
-          >
+                className: 'bg-muted text-foreground',
-            <HomeIcon className="h-5 w-5" />
+              }}
-            Dashboard
+            >
-          </Link>
+              <route.icon className="h-5 w-5" />
+              {route.name}
+            </Link>
+          ))}
         </nav>
         <div className="mt-auto">
           <Card>
             <CardHeader className="p-2 pt-0 md:p-4">
               <CardTitle>More Infos</CardTitle>
               <CardDescription>
-                If you want more informations about boring.tools, visit our
+                If you want more information about boring.tools, visit our
-                documenation!
+                documentation!
               </CardDescription>
             </CardHeader>
             <CardContent className="p-2 pt-0 md:p-4 md:pt-0">

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

@@ -0,0 +1,9 @@
+import { HouseIcon } from 'lucide-react'
+
+export const NavigationRoutes = [
+  {
+    name: 'Dashboard',
+    to: '/',
+    icon: HouseIcon,
+  },
+]