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
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!
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!
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!
using it for a few years and now I want to upgrade and I'm happy I did that.
This might be the world's best video on creating sidebars with Vue. Thx :)
Best web dev tutorial ever!! Hands down!!!
Perfect, Vue + beautiful sidebar + vite + router.
Exactly what i was looking for.
Finnally now this channel is actually gonna be consistent
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!
Good Resources for people like me who are in learning process.
Exactly what i was looking for! Thanks for the informative video
Glad it was helpful!
Noice !!
This is the exact same thing I was looking for
Thank u so much !
Glad I could help!
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}"
Thanks mate, it was a nice oportunity to practice vue :)
Awesome! :D
This was great! Thanks a lot for sharing it whit us!
Glad you enjoyed it!
Thank you, it means a lot bro:)
Cool, like the one in google cloud console
Great video, the program works great
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!
MUITO OBRIGADO VOCÊ É GENIAL DEMAIS
thank you ❤❤❤
Great tutorial 🔥
Thank you!
Would love a next 3 version with slots
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 🤣
Easy explained very good tutorial.
Thanks a lot !
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}"
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!
now i am in a good mood
Amigo, nem sei como agradecer pelo seu conteúdo!! Muito obrigado, que você seja prospero em todas as coisas, um abraço.
Keep inspiring
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.
Amazing mate, you have a new suscribe. Thanks a lot!
Awesome, 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
Bro, thx!
Really nice video, I truly mean it, amazing!
Thank you very much!
Hi! Which type of extensions do you use?
thank you
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!
Great video
Thank you so much!
Can we add a sub menu?
awesome video
How to add submenu?
Hello! Please tell me, how you got the automatically code import (css) ?
Great video! Can you make the same video but updated to Nuxt 3?
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
This is so good,, how about generate admin template?
It was a very good educational video. But based on that, I asked you to put it in a navbar above
thank you bro thank you
You're welcome!
does it work with composition api ?
how can i switch the icons you are using?
My sidebar is in the middle of the screen. Does anyone know how to fix?
how to make menu link sidebar from table database in vue js?
Which theme is that?
Whenever i use the GMS and put it in the soft, it holds out the note forever! please help, i am very confused
very great
Thank you!
@@TylerPotts make a vue
portfolio tutorial
한국인이 보기에도 어려움이 없는 아주 좋은 강의
ur a fcking legend dude honestly
Thank you so much this helped a lot!!!! You saved my life
how do i run this from another system if already pushed to githhub
with react :)
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"
scss is not installed, why?
Fallen Sun yeah! e too
great video, thank you.. can i have contact with you?
For once, the software is actually really useful
That's great to hear! Thank you.
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.....
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!