Create a Side Nav with Tailwind - And It's Responsive!

Let's build a side navigation with Tailwind. Similar to building a top navigation, creating a side navigation with Tailwind uses a lot of flexbox and important Tailwind classes.
CodePen: codepen.io/chris__sev/pen/RwK...
In Video: Chris Sev ( / chris__sev )
0:00 Introduction
1:18 Starting HTML
2:19 Sidebar Styles
8:07 Hovering Links
10:24 Responsive
12:00 Mobile Menu
14:45 Click to Show Nav
16:48 Conclusion
To learn more about DigitalOcean: www.digitalocean.com/
Follow us on Twitch: / digitaloceantv
Follow us on Twitter: / digitalocean
Like us on Facebook: / digitaloceancloudhosting
Follow us on Instagram: / thedigitalocean
We're hiring: grnh.se/aicoph1
#WebDevelopment #javascript #tailwindCSS #tailwindCSStutorial #tailwindnavbar #tailwindtutorial #howtousetailwind #tailwindCSSnavbar #tailwindCSSsidenav #tailwindCSSmobilenav #tailwindCSSsidebar

[@adriansantos2403]

thank you very much! this helped me for my thesis, thank you

[@nyashachiroro2531]

This is a very useful series. Nav bars are one of the most difficult parts of a website to implement. Thank you.

[@christiant5512]

This is a great tutorial. A followup deep-dive into responsive design would be awesome. A video talking about classes like "translate-x-full" and what they are doing behind the scenes.
Tailwind offers a lot of ways to do something, and generally they offer advantages and disadvantages. It would be great to hear the thought process behind why you use the classes you do for your desired effects

[@Syndeer]

It was really helpful just what I need. Man really thanks for your Hard Work

[@simonconroy7610]

Thank you so much for this. Exactly what I needed. Cheers

[@alicknyirenda7732]

Amazing tutorial!!!!! I'll never build any other Navbar different 😄

[@pacersgo]

Works like a charm with Vue! Thanks!

[@wonjinpark7502]

Love this!

[@diockman718]

Thank you very much!

[@lireelf]

Hi! Is there an approach to close the mobile menu by tapping anywhere outside that block?

[@ruiaraujo4004]

The only problem is when the main content needs to have a scroll bar, the navbar scrolls as well. Any solution?

[@riozakirahman3396]

Thank you...!

[@BalkanLeaksArchive]

how to create a responsive navbar with search bar?

[@DigitalOcean]

We have a tutorial on navbars here: ruclips.net/video/miiPsBlqMns/видео.html

[@meddhia6231]

The toggle function is not working !!!!

[@sekiro_19]

document.addEventListener('DOMContentLoaded', () => {
const btn = document.querySelector('.mobile-menu-button');
const mobileMenu = document.querySelector('.mobile-menu');
btn.addEventListener('click', () => {
mobileMenu.classList.toggle('-translate-x-full');
});
});