Problem with sidebar

[Benoit1980]

Hello,

I would like to know if there is something missing in your code for the sidebar(I used the code of the first one): https://tailwindui.com/components/application-ui/application-shells/sidebar

When using your demo and resizing the screen, the bar slides nicely, but when copying your code, pasting it in a file and resizing the screen, I am getting this: https://www.screencast.com/t/eZQKROjOTun

Thanks!

[adamwathan]

Hey! It looks to me like you've pasted the static HTML version of the layout. In the static HTML examples, there's no JS included for things like opening/closing dropdowns or sidebars, so those elements are just statically rendered in the open state by default and it's up to you to implement the interactive behavior using whatever methodology you prefer:

https://tailwindui.com/documentation#using-html-and-your-own-js

We include this format so there's a sensible starting point for people who want to use vanilla JS or JS frameworks we don't include first-party examples for, like Angular, Svelte, and others.

If you're a React or Vue user, you can select React or Vue from the dropdown above the example to copy a snippet that includes all of the JavaScript needed for the interactive elements to function out of the box 👍🏻

Hope that helps! 🍻

[Benoit1980]

Oh I see, thank you so much. I get it now. Will you ever include some JS with the static html versions please, so Laravel users can just copy/paste the entire block in their blade files(to gain time). I am realising that a lot of people like myself are struggling with this. I asked for help around, no one is able to.