From 6d4d5f83b7064ce5a78065485515f6f92ea08688 Mon Sep 17 00:00:00 2001
From: Dominic Ferrando <dominicf2001@gmail.com>
Date: Fri, 10 Jul 2026 13:20:48 -0400
Subject: [PATCH] Make sidebar collapsable

---
 apps/portal/src/routes/(app)/+layout.svelte | 77 ++++++++++++++-------
 1 file changed, 51 insertions(+), 26 deletions(-)

diff --git a/apps/portal/src/routes/(app)/+layout.svelte b/apps/portal/src/routes/(app)/+layout.svelte
index fd8267e..80255b5 100644
--- a/apps/portal/src/routes/(app)/+layout.svelte
+++ b/apps/portal/src/routes/(app)/+layout.svelte
@@ -16,9 +16,8 @@
         },
     ];
 
-    const collapsed = $state(false);
-
     let { children } = $props();
+    let collapsed = $state(false);
 </script>
 
 <svelte:head>
@@ -26,35 +25,61 @@
 </svelte:head>
 
 <div class="drawer lg:drawer-open">
-    <input id="sidebar" type="checkbox" class={collapsed ? "" : "drawer-toggle"} />
-    <div class="drawer-content px-5 flex flex-col items-center">
+    <input id="sidebar" type="checkbox" class="drawer-toggle" />
+    <div class="drawer-content px-10 flex flex-col items-center">
         {@render children?.()}
     </div>
     <div class="drawer-side">
         <label for="sidebar" aria-label="close sidebar" class="drawer-overlay"
         ></label>
-        <ul
-            class="menu menu-lg bg-base-200 text-base-content min-h-full w-72 p-4"
+        <div
+            class={[
+                "bg-base-200 min-h-full flex flex-col overflow-hidden transition-[width] duration-200",
+                collapsed ? "w-0" : "w-72",
+            ]}
         >
-            {#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 === fullPath,
-                                    }}
-                                    href={fullPath}>{link.name}</a
-                                >
-                            </li>
-                        {/each}
-                    </ul>
-                </li>
-            {/each}
-        </ul>
+            <ul class="menu menu-lg text-base-content w-72 p-4">
+                {#each groups as group}
+                    <li>
+                        <h2 class="menu-title">{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>
+            <div class="flex justify-end p-2 mt-auto">
+                <button
+                    class="btn btn-ghost btn-sm btn-square"
+                    title="Collapse sidebar"
+                    aria-label="Collapse sidebar"
+                    onclick={() => (collapsed = true)}
+                >
+                    <span class="text-lg leading-none">‹</span>
+                </button>
+            </div>
+        </div>
     </div>
 </div>
+
+{#if collapsed}
+    <button
+        class="btn btn-ghost btn-sm btn-square fixed left-0 bottom-4 z-50 rounded-l-none border border-l-0 border-base-300 bg-base-200"
+        title="Expand sidebar"
+        aria-label="Expand sidebar"
+        onclick={() => (collapsed = false)}
+    >
+        <span class="text-lg leading-none">›</span>
+    </button>
+{/if}