support hide/show Sidebar

[xmlking]

any plans to support hide/show Sidebar? by exporting show, and transition props in Sidebar.svelte, I think we could allow users to customize to their needs (via Hamburger, button, etc)

<script lang="ts">
	import classNames from 'classnames'
	import {fly} from 'svelte/transition';

	export let show = true;
	export let asideClass: string = 'w-64';
</script>

{#if show}
	<aside transition:fly={{x: -250, opacity: 1}} class={classNames(asideClass, $$props.class)} {...$$restProps}
		   aria-label="Sidebar">
		<slot/>
	</aside>
{/if}

Usage example

<script>
        import { sidebarOpen  } from '$lib/stores/sidebarStore';

	let show = true;
	sidebarOpen.subscribe((value) => {
		show = value === true;
	});
</script>

<Sidebar {show} {asideClass}>
	<SidebarWrapper {divClass}>
		<SidebarGroup>
....

[shinokada]

What do you think about Svelte-sidebar-menu? It is responsive, flexible and has example with Flowbite-Svelte. Repo

[xmlking]

Svelte-sidebar-menu looks great but few reasons why I like to build my layout all from flowbite-svelte components where Svelte-sidebar-menu is not perfect fitting my needs:

1. try to build entier WebApp with just flowbite-svelte components without depending on 3rd party components for consistent styling and maintenance
2. I like to arrange my layout with a sticky header and footer wittout using absolute positioning ( z-50 top-0 left-0 ) , I am setting up mine

<DarkMode btnClass={darkmodebtn}/>

<div class="flex flex-col h-screen">
	<!--  start::navbar   -->
		<Header />
	<!--  end::navbar     -->
	<div class="flex flex-1 overflow-hidden">
		<!--   start::Sidebar    -->
		<SideMenu />
		<!--   end::Sidebar      -->
		<!--   start::Main Content     -->
		<main class="container overflow-y-auto mx-auto py-32 px-8 dark:text-white" >
			<slot/>
		</main>
		<!--   end::Main Content      -->
	</div>
	<!--   start::Footer    -->
	<Footer/>
	<!--   end::Footer      -->
</div>

3. like to use my own button icon to hide/show sidenav and like to add sidenav either left or right

[shinokada]

Once the Drawer component is done, you can add anything in the component.

[shinokada]

I believe this is what you wanted.

https://flowbite-svelte.com/drawer#Drawer_navigation