DEV Community

Cover image for Making a Navigation Drawer/Sliding Sidebar with TailwindCSS (Blueprint)

Making a Navigation Drawer/Sliding Sidebar with TailwindCSS (Blueprint)

Fayaz Ahmed on May 29, 2020

Let's build the above navigation sidebar with TailwindCSS & Nuxt.js. It's not necessarily a nuxt specific project I will be hardly using any ...
Collapse
 
alijcode profile image
alijcode

Thanks for the article.

Collapse
 
fayaz profile image
Fayaz Ahmed

Just checked it, works in a similar way I have explained here.

Collapse
 
isidromar95 profile image
Isidro Martínez

When I click on Nuxt-link the sidebar still open.. how close it when a link is clicked ? Awesome work btw! 🔥

Collapse
 
fayaz profile image
Fayaz Ahmed

You can add a close logic when link is clicked with @click.native="isOpen = false"

The .native ensure click happens as well page ia navigated.

Collapse
 
alijcode profile image
alijcode

The background is very cut.

Collapse
 
fayaz profile image
Fayaz Ahmed

Cut?

Collapse
 
fredkufner profile image
Fred Kufner

thanks!

Collapse
 
oriolrf profile image
OriolRF

Hi Ahmed

thank you for this great example.

how could I have the main content to shrink when the sidebar is displayed, instead of the sidebar to overlap the main content?

Collapse
 
lum3ll_96 profile image
Luca Mellano

Wonderful... one question:
How to open menu from the right?

Collapse
 
zabocado profile image
zabocado • Edited

Replace left-0 with right-0 to have the menu position to the right, then replace-translate-x-full with translate-x-full to have the transition change direction toward the right instead of the left.

Collapse
 
ndh103 profile image
NDH103

Nice

Collapse
 
tirtakeniten profile image
Tirta Keniten

Thank you Ahmed