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.

[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.

[iamsid]

Hi @huntabyte. Sorry to be a bother. But can you please help?

[dexterouschen]

@huntabyte @iamsid I think the documentation should be more clear on the usage of custom trigger with useSidebar since it's just svelte context under the hood. maybe a link to svelte context documentation so developers are more aware of it without making wrong assumptions.

https://svelte.dev/docs/svelte/context#Setting-and-getting-context

you can't just call useSidebar anywhere, it has to be somewhere within Sidebar.Provider component tree since svelte context is from parent to children only. that's why if you call useSidebar on the same level as Sidebar.Provider it returns undefined, because that's just how context works.

so for the custom trigger to work, it'll have to be a separate custom component just like the default Sidebar.Trigger, and you call useSidebar inside of it.

maybe add a potential component tree to the custom trigger documentation?

# path/to/custom-trigger.svelte
<script lang="ts">
  import { useSidebar } from "$lib/components/ui/sidebar/index.js";
  const sidebar = useSidebar();
</script>
 
<button onclick={() => sidebar.toggle()}>Toggle Sidebar</button>

<Sidebar.Provider>
  <Sidebar.Root />
  <main>
    <CustomTrigger />
  </main>
</Sidebar.Provider>

[iamsid]

Using more of Svelte in the past couple of months has made this a bit more clear. The concept of context is something that I haven't been exposed to much - so this document specifically was just adding to the confusion.
I agree that a bit more clarity and in the documentation would indeed be helpful. @dexterouschen