Unable to use useSidebar

[iamsid]

The documentation for useSidebar here does not seem to be working: https://next.shadcn-svelte.com/docs/components/sidebar#usesidebar

In the same page, another doc refers a different way for the same: https://next.shadcn-svelte.com/docs/components/sidebar#custom-trigger
This one fails with error: Uncaught TypeError: Cannot read properties of undefined (reading 'toggle')

Can't get either to work. I am new with Svelte and Shadcn, so maybe I am doing something wrong.

I tried configuring a class binding like so, and it does work. This span is inside Sidebar.MenuButton

<span class="text-xl" class:hidden={Sidebar.useSidebar().state != 'expanded'}>Brand Name</span>

But when trying to do the same on click event, it fails.

<Sidebar.MenuButton onclick={() => Sidebar.useSidebar().toggle()}>

Error in browser console: Uncaught Svelte error: lifecycle_outside_component
Updating above button click event to use sidebar variable results in undefined error.

Please help.

[huntabyte]

You don't seem to be following it correctly. You need to invoke useSidebar in the <script> tags, it cannot be invoked programmatically like that, the error message tells you it must be used within the lifecycle of the component.

[iamsid]

Sorry but I am still not getting it.
The custom trigger sample code shows the toggle function being called outside the script tag. But it just throws an undefined error.
Using Sidebar.useSidebar() directly in dynamic class works, but throws lifecycle error when used in the onclick event.

I tried creating a function in the script tag, and calling that in the onclick event, but that again throws the undefined error.

I looked at the lifecycle doc here https://svelte.dev/docs/svelte/custom-elements#Component-lifecycle, but could not grasp it in this context.

[huntabyte]

You need to call const sidebar = Sidebar.useSidebar() in the script tag, and then you can call sidebar.toggle() on demand as needed.

[iamsid]

Tried some other things. When I added the useSidebar on a page other than layout, it starts working. Layout page is where I have configured the Sidebar provider and rest of the sidebar itself.

When I try to access useSidebar from within the layout page itself.. or a sidebar component in the layout page, its failing with above messages.

Sample code

<script lang="ts">
	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
	import { useSidebar } from "$lib/components/ui/sidebar/index.js";

	let { children } = $props();
        const sidebar = useSidebar();
</script>

<Sidebar.Provider>
	<Sidebar.Root>
		<Sidebar.Content>
			<Sidebar.Group>
				<Sidebar.GroupLabel>Application</Sidebar.GroupLabel>
				<Sidebar.GroupContent>
					<Sidebar.Menu>
							<Sidebar.MenuItem>
								<Sidebar.MenuButton class="text-base">
									Home
								</Sidebar.MenuButton>
							</Sidebar.MenuItem>
							<Sidebar.MenuItem>
								<Sidebar.MenuButton class="text-base" onclick={() => sidebar.toggle()}>
									Account
								</Sidebar.MenuButton>
							</Sidebar.MenuItem>
							<Sidebar.MenuItem>
								<Sidebar.MenuButton class="text-base">
									Settings
								</Sidebar.MenuButton>
							</Sidebar.MenuItem>
					</Sidebar.Menu>
				</Sidebar.GroupContent>
			</Sidebar.Group>
		</Sidebar.Content>
	</Sidebar.Root>
	<main>
		<button class="rounded-md bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
	onclick={()=> sidebar.toggle()}
		>Toggle</button>
		{@render children()}
	</main>
</Sidebar.Provider>

My primary use case here is to hide the sidebar on click of a sidebar menu item. For which I was trying to use the click event - but its resulting in undefined error.
Even the toggle button fails on the layout page, but works if I move it to a page.svelte using this layout.