Build an Animated Responsive Sidebar Menu with Vue JS, Vue Router, SCSS and Vite in 2022

Learn how to build an animated responsive side navigation bar with a menu using Vue JS, Vue Router and SCSS as our CSS pre-processor. We also use VITE for our Vue development engine!

Resources

// JOIN THE DISCORD SERVER!

// BECOME A MEMBER TO UNLOCK MORE CONTENT!

// MY GEAR FOR CODING AND YOUTUBE

All of these products I own and have tested!

// FOLLOW ME ON TWITTER

// INTERESTED IN GAME DEV?

// CHECK OUT MY GAME

// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

[TylerPotts]

Did YOU enjoy this video? 🤔

Also, I think I was pronouncing Vite wrong... 😅

[zariachenshui]

Learned a lot from this tutorial. For me, the transition wasn't smooth when shrinking the sidebar, because the text would go onto two lines while the transition was taking place, and increased the space between each menu button once it shrunk. I remedied this by setting a height value for the menu buttons of 3rem (2rem of material-icon height plus 2 x 0.5rem padding). Thank you for this video and your commentary! :)

[Sprunk]

Thank you so much! This might just be the first tutorial I've done that hasn't had any unsolvable problems! Cheers on this one.

[dennisfransen]

What's up Taylor! Great video as allways.

In vue you don't have to use an ternary operator to have the class toggled 'is-expanded'. You can actually just pass an object to the class attribute like this.

:class="{'is-expanded' : is_expanded}"

Or even better. You could have the css class name and the boolean named the same.
So it would look something like this.

:class={ís_expanded}"

<script setup>
const is_expanded = ref(false)
</script>

<style>
.is_expanded {...}
</style>

And if you had multiple booleans with multiple classes. You can pass an array of objects to the :class attribute
Since im all about examples...

:class="[{is_expanded}, {is_as_fancy_as_taylor}]"

[orion]

Thank you for everything! Your videos have really helped me out and I appreciate all the hard work you put into creating and sharing them. Your content is always informative, entertaining, and enjoyable. Thank you for being an amazing creator and for being a positive influence in the YouTube community. Keep up the great work!

[Jorgeee]

Hey Tyler, what extension is that where you can see some greyed out code snippets when you type? For example at 15:43 theres that greyed out div snipper when you start typing in the template. Thanks!

[andriansugiantoputra]

may i ask which part of the code that make the content go right when u open the sidebar? mine doesnt work so i wanted to know which part

[gokhanekc]

This might be the world's best video on creating sidebars with Vue. Thx :)

[MazaBoYBesT]

Good Resources for people like me who are in learning process.

[renatomarcondes]

Amigo, nem sei como agradecer pelo seu conteúdo!! Muito obrigado, que você seja prospero em todas as coisas, um abraço.

[ginocote]

Perfect, Vue + beautiful sidebar + vite + router.
Exactly what i was looking for.

[rodrigopina]

using it for a few years and now I want to upgrade and I'm happy I did that.

[manprinsen]

Best web dev tutorial ever!! Hands down!!!

[bastiancontreraswasilkowsk]

Really nice video, I truly mean it, amazing!

[arbdevforesttrouble]

Thank you, that was exactly what I was looking for. Besides the video was a bit of an entertaining comedy show

[EdsonAristiguieta-xbxg]

Amazing mate, you have a new suscribe. Thanks a lot!

[danielwatson]

Would love a next 3 version with slots

[alorpothe.]

Finnally now this channel is actually gonna be consistent

[abdellatif.x]

Thanks mate, it was a nice oportunity to practice vue :)

[guestofallah]

Noice !!
This is the exact same thing I was looking for
Thank u so much !