Build an Animated Responsive Sidebar Menu with Vue JS, Vue Router, SCSS and Vite in 2022
HTML-код
- Опубликовано: 21 фев 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!
Source Code: github.com/TylerPottsDev/yt-v...
Resources
vitejs.dev/guide/
fonts.google.com/icons
// JOIN THE DISCORD SERVER!
/ discord
// BECOME A MEMBER TO UNLOCK MORE CONTENT!
ruclips.net/user/tylerpottsjoin
// MY GEAR FOR CODING AND RUclips
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
Screenbar Light: amzn.to/3iFRS7w
All of these products I own and have tested!
// FOLLOW ME ON TWITTER
/ tyler_potts_
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.com/store/apps/de...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE 
Хобби
Did YOU enjoy this video? 🤔
Also, I think I was pronouncing Vite wrong... 😅
Yep, try `veet` :)
That's the one! 😅
Sure!
@@SimonDepelchin Yep, nice suggestion :-)
Thank you very much
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.
Glad it helped!
This might be the world's best video on creating sidebars with Vue. Thx :)
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 RUclips community. Keep up the great work!
Thank you! This really boosts my motivation! I'm happy I've managed to help!
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! :)
This was a very nice job Tyler. I forked it and am busy with it. Congrats!
using it for a few years and now I want to upgrade and I'm happy I did that.
Perfect, Vue + beautiful sidebar + vite + router.
Exactly what i was looking for.
Finnally now this channel is actually gonna be consistent
Exactly what i was looking for! Thanks for the informative video
Glad it was helpful!
Thank you so much for this great video! 👏It really helps a lot! Love your works!
Looking forward to the video talkig about route!! 😍
Awesome! Thank you!
Noice !!
This is the exact same thing I was looking for
Thank u so much !
Glad I could help!
Thanks mate, it was a nice oportunity to practice vue :)
Awesome! :D
Best web dev tutorial ever!! Hands down!!!
Good Resources for people like me who are in learning process.
This was great! Thanks a lot for sharing it whit us!
Glad you enjoyed it!
Thank you, it means a lot bro:)
Would love a next 3 version with slots
Learned a lot from this video, good job, mate! I have a question to ask, when I scroll-down the page the sidebar's not following the scroll and stays in the upper page, can I fix it so when I scroll-down the sidebar will stays the same? Thank you!
Thank you, that was exactly what I was looking for. Besides the video was a bit of an entertaining comedy show
That's me! Comedian! Actor! Absolute failure! I'm happy I could help 🤣
now i am in a good mood
Cool, like the one in google cloud console
Great video, the program works great
Easy explained very good tutorial.
Great tutorial 🔥
Thank you!
Thanks a lot !
Really nice video, I truly mean it, amazing!
Thank you very much!
Great Video!. learned a lot. But now I am trying to add a nav bar in the content section and it is showing full height of sidebar. can you please guide.
Great video! Can you make the same video but updated to Nuxt 3?
Great Video! Thank you.
Some Feedback:
1) Add timestamps to the video
2) "Vite" is pronounced like "weed" and not like "wide"
3) A better way for dynamic classes would be :class="{'is-exanded': isExpanded}"
thank you ❤❤❤
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
Thank you so much!
Can we add a sub menu?
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}"
const is_expanded = ref(false)
.is_expanded {...}
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}]"
Amazing! Thank you for that insight!
@@TylerPotts Glad you like it! Maybe you could do a short video about it. Because i see people missing out on this little trick and it's alot cleaner than ternary operators ✌️🧹
I might do a "how to style your vue projects the right way" video but I'll need to do a lot more research to make sure I can give all the tips! :D
@@TylerPotts Sounds awesome! 😎
Thank you!
Hi! Which type of extensions do you use?
This is so good,, how about generate admin template?
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!
Co-Pilot!
It was a very good educational video. But based on that, I asked you to put it in a navbar above
MUITO OBRIGADO VOCÊ É GENIAL DEMAIS
Bro, thx!
I have a question on soft soft v20. I have it installed and have played around with it a little. However, I have a very specific goal. I am
thank you
Hello! Please tell me, how you got the automatically code import (css) ?
awesome video
Great video
Keep inspiring
How to add submenu?
Thank you so much this helped a lot!!!! You saved my life
how to make menu link sidebar from table database in vue js?
cool tutorial thanks. But :
1. you use camel case in javascript, isExpanded
2. also no pascal case in function but still camel case toggleMenu. pascal case is for classes
3. to add dynamic classes you do :class="{expanded: isExpanded}"
한국인이 보기에도 어려움이 없는 아주 좋은 강의
how can i switch the icons you are using?
thank you bro thank you
You're welcome!
ur a fcking legend dude honestly
My sidebar is in the middle of the screen. Does anyone know how to fix?
Whenever i use the GMS and put it in the soft, it holds out the note forever! please help, i am very confused
does it work with composition api ?
very great
Thank you!
@@TylerPotts make a vue
portfolio tutorial
how do i run this from another system if already pushed to githhub
Which theme is that?
I could not find the GitHub repository for your sidebar. Could you please share the link?
Sorry, my mistake - found it! By the way great video!
Happy you found it! Thank you!
at 18:39 your SASS doesnt work for me, i cant declare the main inside the .app{} it just tells me that 'a colon was expected' is this deprecated or?
for anyone wondering, i wrote the style identifier as Lang="scss: instead of lang="scss"
great video, thank you.. can i have contact with you?
with react :)
scss is not installed, why?
Awesome...although the github link for the source code is not working...please fix...thanks a lot
Try now! I accidentally had it as private! Thanks! :D
Thank you so much.....
For once, the software is actually really useful
That's great to hear! Thank you.
Fallen Sun yeah! e too
Great video👍 however... It is NOT white, it is weet 😀 my ear were hurting so much 🤣
Your VSCode theme plz?
SynthWave84
@@TylerPotts thanks for your immediate reply
program.
you don't want google fonts in europe :D gdpr will hunt you in your dreams :D
Smooth without content. But add some images and div`s and width changing animation tear your eyes apart...
why dont you use webstorm
Why would I pay for webstorm when I have vs code? Don't get me wrong I know webstorm can't be beaten on intellisense but I just prefer VS Code.
@@TylerPotts get it free lul
@@TylerPotts i use it free
Module not found: Error: Can't resolve './src/main.js
эта ошибка не дает мне прогресса
I learnt .router-link-exact-active thanks🍦🍦
You're welcome!