Introduce pack sidebar

web/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.8.0",
-    "@tanstack/react-router": "^1.45.14",
+    "@tanstack/react-router": "^1.49.2",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
     "clsx": "^2.1.1",
@@ -30,8 +30,8 @@
     "ua-parser-js": "^1.0.38",
     "vite": "^5.2.10",
     "zustand": "^4.5.4"
-},
-"devDependencies": {
+  },
+  "devDependencies": {
     "@tanstack/router-devtools": "^1.45.14",
     "@tanstack/router-plugin": "^1.45.13",
     "@types/leaflet": "^1.9.12",
@@ -43,5 +43,5 @@
     "eslint": "^8.57.0",
     "eslint-plugin-v3xlabs": "^1.6.5",
     "typescript": "^5.5.4"
-}
+  }
 }

web/src/components/Navbar.tsx

@@ -26,12 +26,12 @@ export const Navbar = () => {
                     ))}
                 </div>
             </div>
-            <a
+            {/* <Link
                 href={'/'}
                 className="h-full border-l px-2 py-0.5 flex items-center hover:bg-black/10"
             >
                 Login
-            </a>
+            </Link> */}
         </div>
     );
 };

web/src/components/PackSidebar.tsx

@@ -0,0 +1,35 @@
+import { Link } from '@tanstack/react-router';
+
+import { PACKS } from '../config';
+
+export const PackSidebar = () => {
+    return (
+        <div className="w-full max-w-sm h-full border-r border-neutral-200 bg-neutral-50">
+            <ul>
+                {Object.entries(PACKS).map(([packId, pack]) => (
+                    <li key={packId} className="">
+                        <Link
+                            href={'/pack/$packId'}
+                            params={{ packId }}
+                            className="flex items-center gap-2 border-b border-neutral-200 px-4 py-2 hover:bg-neutral-100"
+                        >
+                            {pack.cover && (
+                                <img
+                                    src={pack.cover}
+                                    className="w-10 h-10 rounded-sm"
+                                    alt={pack.name}
+                                />
+                            )}
+                            <div className="flex-1">
+                                <div className="font-semibold">{pack.name}</div>
+                                <div className="text-neutral-600">
+                                    {pack.description}
+                                </div>
+                            </div>
+                        </Link>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};

web/src/config.ts

@@ -0,0 +1,17 @@
+type Pack = {
+    name: string;
+    description: string;
+    cover?: string;
+};
+
+export const PACKS: Record<string, Pack> = {
+    activate_windows: {
+        name: 'Activate Windows',
+        description: 'Your license has expired.',
+        cover: '/public/pack_activate_windows.png',
+    },
+    duitsland: {
+        name: 'Duitsland',
+        description: 'Manderscheid 2024 Samples',
+    },
+};

web/src/index.css

@@ -5,3 +5,7 @@
 .btn {
     @apply bg-white text-neutral-800 border border-neutral-200 px-2.5 py-0.5 h-fit hover:bg-neutral-50 rounded-md focus:outline focus:outline-2 outline-offset-2 outline-blue-500;
 }
+
+.link {
+    @apply text-neutral-800 hover:text-neutral-600 underline;
+}

web/src/routeTree.gen.ts

@@ -13,6 +13,7 @@ import { createFileRoute } from '@tanstack/react-router'
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
+import { Route as PackPackIdIndexImport } from './routes/pack/$packId/index'
 
 // Create Virtual Routes
 
@@ -25,6 +26,11 @@ const IndexLazyRoute = IndexLazyImport.update({
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
 
+const PackPackIdIndexRoute = PackPackIdIndexImport.update({
+  path: '/pack/$packId/',
+  getParentRoute: () => rootRoute,
+} as any)
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -36,12 +42,22 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexLazyImport
       parentRoute: typeof rootRoute
     }
+    '/pack/$packId/': {
+      id: '/pack/$packId/'
+      path: '/pack/$packId'
+      fullPath: '/pack/$packId'
+      preLoaderRoute: typeof PackPackIdIndexImport
+      parentRoute: typeof rootRoute
+    }
   }
 }
 
 // Create and export the route tree
 
-export const routeTree = rootRoute.addChildren({ IndexLazyRoute })
+export const routeTree = rootRoute.addChildren({
+  IndexLazyRoute,
+  PackPackIdIndexRoute,
+})
 
 /* prettier-ignore-end */
 
@@ -51,11 +67,15 @@ export const routeTree = rootRoute.addChildren({ IndexLazyRoute })
     "__root__": {
       "filePath": "__root.tsx",
       "children": [
-        "/"
+        "/",
+        "/pack/$packId/"
       ]
     },
     "/": {
       "filePath": "index.lazy.tsx"
+    },
+    "/pack/$packId/": {
+      "filePath": "pack/$packId/index.tsx"
     }
   }
 }

web/src/routes/__root.tsx

@@ -1,13 +1,17 @@
 import { createRootRoute, Outlet } from '@tanstack/react-router';
 
 import { Navbar } from '../components/Navbar';
+import { PackSidebar } from '../components/PackSidebar';
 
 export const Route = createRootRoute({
     component: () => (
-        <>
+        <div className="w-full h-screen flex flex-col">
             <Navbar />
-            <Outlet />
+            <div className="grow h-full overflow-y-auto flex">
+                <PackSidebar />
+                <Outlet />
+            </div>
             {/* <TanStackRouterDevtools /> */}
-        </>
+        </div>
     ),
 });

web/src/routes/pack/$packId/index.tsx

@@ -0,0 +1,14 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/pack/$packId/')({
+    component: (parameters) => {
+        console.log(parameters);
+        const { packId } = Route.useParams();
+
+        return (
+            <div>
+                <div>Hello /pack/$packId/! {packId}!</div>
+            </div>
+        );
+    },
+});