Make sidebar collapsable

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,19 +25,23 @@
 </svelte:head>
 
 <div class="drawer lg:drawer-open">
-    <input id="sidebar" type="checkbox" class={collapsed ? "" : "drawer-toggle"} />
+    <input id="sidebar" type="checkbox" class="drawer-toggle" />
-    <div class="drawer-content px-5 flex flex-col items-center">
+    <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
+        <div
-            class="menu menu-lg bg-base-200 text-base-content min-h-full w-72 p-4"
+            class={[
+                "bg-base-200 min-h-full flex flex-col overflow-hidden transition-[width] duration-200",
+                collapsed ? "w-0" : "w-72",
+            ]}
         >
+            <ul class="menu menu-lg text-base-content w-72 p-4">
                 {#each groups as group}
                     <li>
-                    <h2 class="menu-title text-lg">{group.name}</h2>
+                        <h2 class="menu-title">{group.name}</h2>
                         <ul>
                             {#each group.links as link}
                                 {@const fullPath = group.path + link.path}
@@ -56,5 +59,27 @@
                     </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}