DEV Community

loading...
Cover image for Built a Dashboard Sidebar with Tailwind & Alpine.js

Built a Dashboard Sidebar with Tailwind & Alpine.js

zaxwebs profile image Zack Webster ・1 min read

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:
Alt Text
I wanted the sidebar to be open by default on Desktops. And the rest of the page accessible to the right.
Alt Text
When closed, I wanted the content to take over the full width of the window.
Alt Text
For mobile, I wanted to do the opposite. It has to be closed by default.
Alt Text
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.

Discussion (2)

pic
Editor guide
Collapse
core_ui profile image
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

Collapse
zaxwebs profile image
Zack Webster Author

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