From 170bde7e1b8d126551318cc6fbae3d87c887b573 Mon Sep 17 00:00:00 2001
From: Dominic Ferrando <dominicf2001@gmail.com>
Date: Fri, 10 Jul 2026 12:36:02 -0400
Subject: [PATCH] Make sidebar group and clean up styling a bit

---
 apps/portal/src/routes/(app)/+layout.svelte   | 46 +++++++++++++------
 apps/portal/src/routes/(app)/+page.server.ts  |  4 +-
 .../{ => configurations}/+page.svelte         |  2 +-
 .../commerce/{ => products}/+page.server.ts   |  0
 .../commerce/{ => products}/+page.svelte      |  2 +-
 5 files changed, 35 insertions(+), 19 deletions(-)
 rename apps/portal/src/routes/(app)/calculator/{ => configurations}/+page.svelte (99%)
 rename apps/portal/src/routes/(app)/commerce/{ => products}/+page.server.ts (100%)
 rename apps/portal/src/routes/(app)/commerce/{ => products}/+page.svelte (99%)

diff --git a/apps/portal/src/routes/(app)/+layout.svelte b/apps/portal/src/routes/(app)/+layout.svelte
index 20a1f9a..fd8267e 100644
--- a/apps/portal/src/routes/(app)/+layout.svelte
+++ b/apps/portal/src/routes/(app)/+layout.svelte
@@ -3,11 +3,21 @@
     import favicon from "$lib/assets/favicon.svg";
     import "../app.css";
 
-    const links = [
-        { name: "Calculator", path: "/calculator" },
-        { name: "Commerce", path: "/commerce" },
+    const groups = [
+        {
+            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" />
-    <div class="drawer-content p-10 flex flex-col items-center">
+    <input id="sidebar" type="checkbox" class={collapsed ? "" : "drawer-toggle"} />
+    <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,14 +36,23 @@
         <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>
-                    <a
-                        class={{
-                            "menu-active": page.url.pathname === link.path,
-                        }}
-                        href={link.path}>{link.name}</a
-                    >
+                    <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 === fullPath,
+                                    }}
+                                    href={fullPath}>{link.name}</a
+                                >
+                            </li>
+                        {/each}
+                    </ul>
                 </li>
             {/each}
         </ul>
diff --git a/apps/portal/src/routes/(app)/+page.server.ts b/apps/portal/src/routes/(app)/+page.server.ts
index 563052d..18a3b0b 100644
--- a/apps/portal/src/routes/(app)/+page.server.ts
+++ b/apps/portal/src/routes/(app)/+page.server.ts
@@ -1,6 +1,6 @@
 import { redirect } from "@sveltejs/kit";
 import type { PageServerLoad } from "./$types";
 
-export const load: PageServerLoad = ({}) => {
-    redirect(308, "/calculator");
+export const load: PageServerLoad = ({ }) => {
+    redirect(308, "/calculator/configurations");
 };
diff --git a/apps/portal/src/routes/(app)/calculator/+page.svelte b/apps/portal/src/routes/(app)/calculator/configurations/+page.svelte
similarity index 99%
rename from apps/portal/src/routes/(app)/calculator/+page.svelte
rename to apps/portal/src/routes/(app)/calculator/configurations/+page.svelte
index e62ed1b..ecbd1b9 100644
--- a/apps/portal/src/routes/(app)/calculator/+page.svelte
+++ b/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
diff --git a/apps/portal/src/routes/(app)/commerce/+page.server.ts b/apps/portal/src/routes/(app)/commerce/products/+page.server.ts
similarity index 100%
rename from apps/portal/src/routes/(app)/commerce/+page.server.ts
rename to apps/portal/src/routes/(app)/commerce/products/+page.server.ts
diff --git a/apps/portal/src/routes/(app)/commerce/+page.svelte b/apps/portal/src/routes/(app)/commerce/products/+page.svelte
similarity index 99%
rename from apps/portal/src/routes/(app)/commerce/+page.svelte
rename to apps/portal/src/routes/(app)/commerce/products/+page.svelte
index 3d61528..2a8129b 100644
--- a/apps/portal/src/routes/(app)/commerce/+page.svelte
+++ b/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...