Built a Dashboard Sidebar with Tailwind & Alpine.js

I came across Alpine.js while on my journey of learning Laravel. And it has been a blessing.
In order to learn more about it, I've been building random things. This week, I tried building a dashboard sidebar. The design and functionality are inspired by that of CoreUI.

Here's how it looks like and works:

I wanted the sidebar to be open by default on Desktops. And the rest of the page accessible to the right.

When closed, I wanted the content to take over the full width of the window.

For mobile, I wanted to do the opposite. It has to be closed by default.

And when toggled open. I wanted it to be fixed. And the content outside it to be partly visible (opacity) but inaccessible. Additionally, clicking outside the sidebar should close it.

Interested in seeing this in action? You can do so here: https://tailpine.netlify.app/sidebar-2.html

And if you'd like to see how this was built you can do so here: https://github.com/zaxwebs/tailwind-alpine/blob/main/sidebar-2.html

Thanks for reading. Signing out.

Comments

[CoreUI]

"This week, I tried building a dashboard sidebar. The design and functionality are inspired by that of CoreUI." - use CoreUI every week! ;) cheers, yours truly CoreUI

[Zack Webster]

Wow, I did not expect to see your comment. Delighted. Thanks, team!

[Ari Budin]

Good luck Zack
Very helpful for Tailwind css beginners