Make sidebar group and clean up styling a bit

apps/portal/src/routes/(app)/+layout.svelte

@@ -3,11 +3,21 @@
     import favicon from "$lib/assets/favicon.svg";
     import "../app.css";
 
-    const links = [
+    const groups = [
-        { name: "Calculator", path: "/calculator" },
+        {
-        { name: "Commerce", path: "/commerce" },
+            name: "Calculator",
+            path: "/calculator",
+            links: [{ name: "Configurations", path: "/configurations" }],
+        },
+        {
+            name: "Commerce",
+            path: "/commerce",
+            links: [{ name: "Products", path: "/products" }],
+        },
     ];
 
+    const collapsed = $state(false);
+
     let { children } = $props();
 </script>
 
@@ -16,12 +26,9 @@
 </svelte:head>
 
 <div class="drawer lg:drawer-open">
-    <input id="sidebar" type="checkbox" class="drawer-toggle" />
+    <input id="sidebar" type="checkbox" class={collapsed ? "" : "drawer-toggle"} />
-    <div class="drawer-content p-10 flex flex-col items-center">
+    <div class="drawer-content px-5 flex flex-col items-center">
         {@render children?.()}
-        <!-- <label for="sidebar" class="btn btn-primary drawer-button lg:hidden"> -->
-        <!-- 	Open drawer -->
-        <!-- </label> -->
     </div>
     <div class="drawer-side">
         <label for="sidebar" aria-label="close sidebar" class="drawer-overlay"
@@ -29,16 +36,25 @@
         <ul
             class="menu menu-lg bg-base-200 text-base-content min-h-full w-72 p-4"
         >
-            {#each links as link}
+            {#each groups as group}
+                <li>
+                    <h2 class="menu-title text-lg">{group.name}</h2>
+                    <ul>
+                        {#each group.links as link}
+                            {@const fullPath = group.path + link.path}
                             <li>
                                 <a
                                     class={{
-                            "menu-active": page.url.pathname === link.path,
+                                        "menu-active":
+                                            page.url.pathname === fullPath,
                                     }}
-                        href={link.path}>{link.name}</a
+                                    href={fullPath}>{link.name}</a
                                 >
                             </li>
                         {/each}
                     </ul>
+                </li>
+            {/each}
+        </ul>
     </div>
 </div>

apps/portal/src/routes/(app)/+page.server.ts

@@ -2,5 +2,5 @@ import { redirect } from "@sveltejs/kit";
 import type { PageServerLoad } from "./$types";
 
 export const load: PageServerLoad = ({ }) => {
-    redirect(308, "/calculator");
+    redirect(308, "/calculator/configurations");
 };

apps/portal/src/routes/(app)/calculator/configurations/+page.svelte

@@ -343,7 +343,7 @@
     {@const activityParams = currentEditor.params.activity[activity]}
     {@const activityMetadata = allStandards.byActivity(activity).getMetadata()}
     <div
-        class="w-full -mt-10 -mx-10 px-6 py-2 bg-base-200 border-b border-base-300 flex items-center gap-2 flex-wrap text-sm"
+        class="w-full px-6 py-2 bg-base-200 border-b border-base-300 flex items-center gap-2 flex-wrap text-sm"
     >
         <span class="label">Configuration: </span>
         <select

apps/portal/src/routes/(app)/commerce/products/+page.svelte

@@ -63,7 +63,7 @@
     <button
         disabled={synchronizer.isInProgress}
         onclick={() => synchronizer.syncAll()}
-        class="btn btn-xl mb-5"
+        class="btn btn-xl mb-5 mt-10"
     >
         {#if synchronizer.isInProgress}
             Syncing...