Software/platform
1
1
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Make sidebar collapsable

Browse Source
This commit is contained in:
Dominic Ferrando
2026-07-10 13:20:48 -04:00
parent 5cfddba2b7
commit 6d4d5f83b7
1 changed files with 51 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/portal/src/routes/(app)/+layout.svelte
+51 -26
View File
@@ -16,9 +16,8 @@
}, },
]; ];
const collapsed = $state(false);
let { children } = $props(); let { children } = $props();
let collapsed = $state(false);
</script> </script>
<svelte:head> <svelte:head>
@@ -26,35 +25,61 @@
</svelte:head> </svelte:head>
<div class="drawer lg:drawer-open"> <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?.()} {@render children?.()}
</div> </div>
<div class="drawer-side"> <div class="drawer-side">
<label for="sidebar" aria-label="close sidebar" class="drawer-overlay" <label for="sidebar" aria-label="close sidebar" class="drawer-overlay"
></label> ></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",
]}
> >
{#each groups as group} <ul class="menu menu-lg text-base-content w-72 p-4">
<li> {#each groups as group}
<h2 class="menu-title text-lg">{group.name}</h2> <li>
<ul> <h2 class="menu-title">{group.name}</h2>
{#each group.links as link} <ul>
{@const fullPath = group.path + link.path} {#each group.links as link}
<li> {@const fullPath = group.path + link.path}
<a <li>
class={{ <a
"menu-active": class={{
page.url.pathname === fullPath, "menu-active":
}} page.url.pathname === fullPath,
href={fullPath}>{link.name}</a }}
> href={fullPath}>{link.name}</a
</li> >
{/each} </li>
</ul> {/each}
</li> </ul>
{/each} </li>
</ul> {/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>
</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}