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

[Music] what's going on fellow web developers my name is tyler potts and in today's video we are going to be building this responsive sidebar navigation menu which is pretty awesome so you can see here if we close it um it shuts down like this and you can have it like this so you can hover over change about page go to the home page go to any other page you want your settings down here you can also open it up and have it like this you can see some animations as you do it uh you can see here you have the uh the actual arrow animate and spin round and move upwards to be in line with the logo here just so you can see it just turns it looks really cool you've got the other animations the huffer states the active states and if you look closely to the uh text you can see how it all fades out and slides in and slides out when you change it another cool feature is we're adding local storage list to remember the user's option so if they want it out it stays out and if you close it and you refresh you can see it stays in which is really awesome and just to make a note it is responsive so if we bring this down we open it instead of pushing the content to the side it actually just opens over the top just so you can quickly have a look and then you could shut off like a menu would on mobile so that's what we're going to be building this video so i hope you're ready it's going to be also going to be using a few router to move for rounds we're going to be using fight to have a really fast engine and don't worry don't be afraid if you'd ever use any of this before i'm going to show you from scratch how to use it it's super simple it makes few development 10 times faster and we're going to be using google icons as well so the material icons and i'll show you how to get set up with that as well so without further ado let's get into the code okay guys so i have opened up a new folder inside official studio code and we it's just an empty folder nothing special about it you know that that's it that's what i want to show for that so we're going to open up the integrated terminal you can see it's a toggle terminal it's control and apostrophe but this probably be different on a mac um i think it's control um options or yeah control options t on the back uh by default uh but yeah so now we're in our folder here now we're gonna get side with a fight tool so i'm gonna show you how to set up fight now if we go to the browser you come to this page fight js.def forward slash guide and he could give you an overview about how you get served with fight i'm going to be you to this you can see your mpm create fight at latest so if i copy this so inside here if we just run npm create fight at latest and then we can give it a project directory so we can say dot which means the current directory wind you could also give this a name set say sidebar and this would create a folder inside the directory you're in called sidebar and pull it all in there but i'm just gonna say dot and then we could also give it a template let's say few like this and that would get a set with few however you don't have to type that it's a lot long-winded and it's gonna ask you anyway when you hit enter so let's try it this way so if you hit enter it's gonna be like hey what's the package name now this is just your package.json file i'm going to call it package.json i mean it makes sense that's what i want to use um you can see it select the framework so obviously fight isn't just used for fujs but in this tool we're going to be using a few you can even use it for vanilla javascript fuji s react pre-act lit and felt and i'm pretty sure you can get a typescript version of all of these as well so if i hit few you can see it says select a variant you could have a few typescript or just a few i'm going to hit few and there you go that's it see how fast that was absolutely lightning quick and it's already set now if this is your first time running a fight it may ask you to install a package if it does just hit yes it's installing some fight to make this quicker um and there you go so let's just clear this and now we need to install our package.json folder here so to do that we're going to say npm i or install it's up to you which one you type out hit enter and that's going to install the dependencies we need now while that is installing i want to show you the google materials to how to get that set so we're going to click get repository here and i'm going to scroll down to this fonts.google.apis i'm going to hit copy copy just copy copy this whole thing i want all of it and then we're going to go back to our code and we're going to go to into our index.html this is the root file this is basically where our uh our source app is going to connect to our app and as you can see here title we could name this let's say respond responsive view sidebar and then we want to connect our google up right here just like that and let's say we want to also get some um google fonts as well let's just go here and let's just search for fire sans um the one i always use and on the side here you can see there's some stuff set we could just copy this whole link in here copy that move back into our code and above the i'm going to do above the icons um we're going to use some pre-connect to connect to google and g static and then we're going to get the font as well uh if you don't want to install a font you can use any font you want you don't even have to use the google uh material icons although it does help so i'm just going to save that and now once that's all done in here we can close this as well you can also see our packages have been installed which is awesome but i want to use sas for this project now guys if you want to use css or anything else you can i just want to show you how you can install sas because it will be a lot easier for the styling which we'll be doing so it's going to be quite a bit of styling to get that naf bar working and sas just make it easier so we're going to say npm hyphen d for or add hyphen d and then we're going to say sas now normally you'd install it if you do add in fight it adds it to something i think i don't know that's just what the documentation told me to do so i'm just telling you what it told me to do so i'm going to hit enter and that is going to install sas for us and that's all we need to do to get sas working now you don't have to use this you can use anything you want i just want to show you that working and the next thing we want to install is going to be view hyphen router now obviously few router allows us to uh have pages and stuff like that it's not installed by default it doesn't give you the option when you install fire fight um compared to the fuse cli but it's super simple to set up and i'm going to show you how to do that so let's just hit enter and npm view router you can see is now in our package file there perfect the next thing we can do is we clear npm run def and there you go this is the default few free i had enough for surfer running on three fastest i had to turn it off to get this to work and there you go so this is where we're at you can see we can count up so let's go in and just get some resets done so i'm going to go into our source this is where we're going to be doing all the work for our app inside here we're going to remove the hello world component it's not needed yeah we're going to get an error but that's fine we go into our app.view we could delete this here it's really awesome we're going to delete this and we're going to give this the lang attribute of sas c s c s s um which is the language i'm going to be using and that's why we need the sas installed in our def dependencies and this will automatically know to use that instead of the normal uh css another thing we want to do is inside of our source we're going to actually in our main i'm going to show you how you do it in your main and i'm going to show you how you abstract this from your main so we're going to set up our router now so we can route to different pages one of the things we need is a new folder called fuse and inside that we need a home dot view directory and we could just use basic boilerplate right here for now we can give it a main hello we don't want you excuse me go away we just want there we go we want a main tag and i'm just going to give it the class of home not known home page just like that a h1 which says home and then oh said a paragraph tag underneath saying this is the home page save and we're going to use that layer water just going to duplicate this basically so i'm just going to copy this create a new new folder a new file and we're going to call it about.view and then in here we're going to paste this in we're going to change this to about this go say about and finally this is going to say about page and there you go so that's all set up with some different pages we're gonna use and then this root element is gonna be where we set up all our root stuff so i'm gonna delete this set tag for now i'm gonna keep these two in here and in here we're just gonna delete this put a diff with the class of app on it just so we can target it and then i'm just gonna do here say or just h1 for now and say hello world just like that hit save and that's changed on the right side there we go um so now back in our main.js i'm gonna import in here i'm gonna do it all under here we're gonna say import and i'm gonna say create router from view hyphen router just like that and we also want to get create history as well so create web history because we're going to use that to basically make sure we well read it there create a html5 history most common history for a single page application const router is equal to create router and then here we're going to have this and we're going to say history and we're going to set that to create web history and that's what we need to do then under here we could have our routes which is going to be an array of objects and we can have some different things so we're going to have a path of forward slash home or just forward slash which is going to be our home one and we could say our component we could lazy load this or we could import so let's just import up here let's say import home from and i could just say uh dot slash fuse slash home dot view or i'm pretty sure you could just do home like that copy this and replace that there and that will also work as well uh what's it saying here dot home are we in the we're in the right directory right uh to say we can't find it does this file exist it does yeah look it really does look let me just show you do not name this right fuse and home dot for you maybe we do need to adopt you oh cool we do need the dot few uh i don't know why i think that might be a fight thing i think in a few you don't but we bet we learned we learned something new and there we go and then we're gonna create a path called about uh and then we're gonna lazy load excuse me go away we don't want you we're gonna then lazy load our about dot view here as well just like that hit save and now nothing's going to happen because we haven't said if we got so we need to actually start using router by doing after the create app we want to say dot use router then mount it to the app like that and that's now going to be using it but we need to route a few in our main app element here so to do that we're going to go down to app um we're going to delete this hello world and we're just going to say router hyphen for you um and actually we don't need that we just need like that safe and you can see it now says this is the home page um placed right here which is pretty awesome and if we now go up here and say forward slash about you could say it says about this is the about page let's go back refresh because that went back to a previous cached version and here you are so that is now set up and we're gonna have our sidebar above this here um which i'm gonna again i'm gonna go over in a moment but i want to show you how you can abstract the view router from inside here to its own file so to make it a bit nearer so we'll create a folder again if you're building a page which only has like two or three four five just a couple of routes nothing much to it doing it like this is perfectly fine you could do it in the main.js it means you don't have to create a whole enough a folder file or anything like that but in case you're building a big app and you need to abstract it to keep it clean then i'm going to show you how to do that anyway so we're going into router and we're going to create a file in here and i'm going to call it index.js and then we're just going to cut all of this from there go up here um and we'll come back to the main file and we're going to paste it in here now we need to do so okay because this is now no longer true we need to go dot dot which means go back a directory out of router interfuse and it's the same for this one here um and then we need to say export default and i'm going to say router so what we're doing in here let me explain we don't need that we don't need that semicolon why are you doing um we're going to have a create router we're going to import the things we need to create ralph and few railroad create web history we're going to create a new we're going to import our home view and then we're going to go to our rate we're going to create a new router um and then what we're going to do say the history mode is going to be create web history and then we're going to define all our routes and heal for path and a component now you could do more in this uh by suggesting looking at a few router documentation if you want to add like metadata to this add some other stuff as well like titles and what else like met all the all the stuff you could do that in here as well i'm not going to show you for this video but if you do want to learn about that then let me know and i'll do a big comprehensive few router video in the future future not future um and then we're going to use export default router which is going to export our router component here we've just created we can hit save and then we can import it in somewhere like this so we can say export router from dot slash router and now this will still work as it did we refresh we could then go to about and you can see it's all working perfectly and there you go so that is that setup ready to go view router is installed we're all excited you're excited i'm excited i'm piper by the way if you couldn't tell so that's where we're at so we can close that file now we can even close the home and about folks we're not actually here to learn about the pages we're here to make a really awesome sidebar in fuji s so we're going to create a component for this sidebar so in here we're going to say sidebar dot view and i'm going to run a few now you might be wondering wait a second you just type few and you've got the option to view with default and all this other stuff here so far here and you can see create a template and you're going like wow that's a lot of code how did you just do that well i have an extension called futa um or future future by point woo right here this one install it it gives you all the features like this to be able to quickly template an app although it's currently using few two options api we can easily update this to say set up just like that hit save and that's now using the updated version we can go in here and if we want to we can delete this and just say sas like that and hit sas we can also pass the scoped attribute to this um or is it scope scoped you know what let me show you this will also tell us we go style look for the sas scoped or scss scoped and there you go that's how it sets up so it's super simple gives you a bunch of awesome tools and hopefully they update it soon to have um this setup as a default thing you can initiate instead of because you can't do it if you type in script you can see there's a bunch you can do it with like uh yeah well there you go look a bunch of different things here um to do to do different types that's typescript you can do it with whatever else but there you go so that's what we've got set up and now in here we are just going to write a site which is the sidebar tag um uh which is html html semantics there for you and then let's just do a quick test and say side bar like that hit save um we'll leave these blank for now go back into our app and now we need a script tag so i'm just going to create a javascript script tag i'm going to pass setup in here um and for those who are used to the options api well this just basically does a bunch of things for us so in here we can do something like import and we can say sidebar from and we can just say dot slash components slide bar oh not cider bar just sidebar and this is how simple it is you don't have to export it in few options you have to return it inside of um well even inside of the setup api composition api you have to return it however in this we just have to type it like this side bar and there you go you can see it's now employed at the top here which is absolutely awesome uh i want to do a couple of things to start with i'm going to create a root element here i'm actually going to copy some code um for my actual colors so inside of our style i'm just going to paste in a bit of code i'm going to close this i'm going to minimize the sidebar and i'm going to zoom in one as well to make it easier for you to read hit save and you can see everything's sold up a little bit but let me explain what css i've just added in so i've added in this root element here which could allow us to define some roots so document level um variables so you see we've got primary prime real we don't actually use that so i can remove that um we've got grey dark and dark oh light and the side bomb what that's a max width but we could also add a min width as well but for now i'm just going to do sidebar width um hit save and that's that i then added in some resets to remove all margin of elements or padding any box sizing and also added the fire sands font which we imported earlier on in google fonts i then added a lighter color to our back body background by adding far and then i've reset buttons to basically have no styling to start with so they don't look weird when we start styling them and we're gonna have one more thing we'll need an app and we're gonna have to display this as flex which puts them side by side as you can see which is really nice we can then go in here and we don't need the flex direction column we can actually just say main and the main is gonna allow us to say flex one one zero which will stretch that out to be as big as it can be we're gonna set some default padding off to rem which is going to push it out a little bit and then because we're actually going to have this sidebar on mobile be an absolute element which sits on top we're basically going to just remove this well this is actually going to end up seeing right to the left so we need to do so here when you say at media max width 768 pixels so on ipad and below we want to set the padding to be six rem like this here so you've got the 768 and padding ram there so here you go so you can see that's really far over and the sidebar is just looking a bit weird so that's all we need for this app.view by the way this is now done we can actually close this app everything else going to be doing is practically inside of sidebar dot view so we're going to start with styling this inside of here because it's scoped we don't have to worry about writing something here that's going to style something else it's only going to style this stuff inside a template which is great so we could just say aside like this without having to give it a class although a class would help this is just simpler we'll display this as flex and we're going to give it a flex selection of columns you want anything to go down we then just want to say background color is going to be equal to one of our variables which is going to be dark so if we just say if you can see that's now dark we don't want to add in a color as well a far light anything in it all the text will be a whiter color or you could just do white here by saying fff but i just prefer to add in a slightly dimmer color so it doesn't hurt your eyes and then i'm just going to go back up here i'm going to say width is equal to far sidebar width which you're going to see is push out 300. i'm going to set overflow to hidden so if it goes off screen it all gets hidden which are also going to help out with is a key element that helps us with the side while shrinking and growing we want to set a min height here to be let's bring this up 100 feet h that's just going to make it the same size our screen so it takes up all the space we require it to and we're just going to add a padding of one ram which is equivalent to 16 pixels right now finally at the bottom i'm just going to add a transition of 0.4 like that or 0.2 ethernet make it a bit quicker and say ease out which can allow it to when we actually do the transition of this opening and closing it's going to basically slide in and out which will be nice so we're going to do a media query in here and i'm just going to say media query max width of 768 pixels and we're just going to say position fixed and then we're going to say c index 99 to make sure it's on top and there you go you could now see that's hidden the elements are gone and if we stretch this out you can see the home page reappears the reason the homepage has disappeared is because actually got behind this bar so if we was to delete this bar of the inspector um delete you can see home is still there it's just underneath it we're actually going to have this closed by default so we can see that so let's go in here and we're just going to change this from being far to calc because we're going to calculate we'll use the maps here to to do some things let me show you we're going to say calc to rem which is double our padding on the left and right um because we need to do that plus 32 pixels now the reason we're doing plus 42 is that's how big our icons are going to be so we're going to have our icon size plus the padding on either side and that's going to give us the width of our sidebar and there you go that's that there let's go up here and just remove this um for now and we will add in the logo as a placeholder for now so i'm just gonna say dot logo i'm gonna say image we're gonna say dot slash assets slash logo dot png it's a png not anything else uh and we'll just say view in there oh and that's not loaded that's because i have done it wrong it should be dot dot slash uh logos we're in currently in the components directory and you can see that that's there but it looks a bit ugly let's go style that up so inside of the aside tag we just want to say dot logo um and we're gonna give this a margin bomb of one rem which will push anything inside of it down or anything below it down and then we're gonna add a ma well a margin bomb of width to ram just like that we don't need the height and there you go that now fits in our element 32 uh two ram is equal to 32 pixels so we could actually change this to two rem which would also make sense i just like using the pixel value here we could also just say for rem here if we really wanted to but using the calculations means we could change this into a variable and change the width of our icons and if you anything else using that there i'm not gonna do that right now but it just gives you an idea of why i'm doing it like this um and there you go so now we've got a little side by there let's get in the actual icon to open and close the menu so underneath our logo let's give it a couple of spaces um we're just gonna say uh dot menu toggle wrap this is gonna be the element around our uh menu toggle we're gonna have a button with the menu toggle class and then inside of here we're going to have a span with the class of material hyphen icons now this basically says we're going to use material icons and we need to give the icon name inside of here so i'm just going to show you i know what icon i need to do but i'm going to go and show you how you get these icons so if we go to fonts.google.com forward slash icons you come to this page and we're looking for a double chef ron a double arrow chef from fig this fig here so we want this one here the keyboard double arrows if we click this it shows you how you could use it with the spam that's the outline you can see we could change it to filled rounded sharp or two totes but we actually only have the field element uh installed because that's the one we added so we're gonna use the field and i'm just gonna select this text right here i could copy the whole thing i'm just gonna click this i'm gonna go to here and we're just gonna paste that inside of here now if we well open this up and reopen up this you can see the icon is actually there it doesn't look very good it needs styling but you can see it's there and it's it's it's clickable we could also add in here a click event which we're going to call toggle menu just like that and in our setup we could just say const toggle menu is equal to or where it's actually going to be uh equal to an arrow function which will toggle our menu now we're going to import something from vue.js we're going to import ref from view and then we're going to create a new thing called um menu open what should we call it let's call it expanded we're going to say is underscore expanded which means our sidebar we're going to set reference to false by default so now in here we could just say is expanded dot value is equal to not is expected so whatever it is sell it to the opposite and that is all we need to do and that's now going to be pulled in here obviously if i click it that does nothing it's going to change the value but you can't see anything happening so inside of our side tag at the top here we can actually bind a class element i'm just going to use backticks here to be able to use temporary literals i'm just going to use this and i'm going to say is expanded and i can just say if it's expanded we're going to say is hyphen expanded otherwise we're just going to pass through a default empty string there hit save and there you go i believe you could do this shorthand as well by just saying and and like that and that will basically work as well so if you click that and we let's inspect this here um you can see there it says is expand if we click it again it removes it just puts false yeah so it puts false if you use the other way of doing it it won't put anything you'll just leave it as empty but the shorthand looks neater so we're going to go for that now this doesn't do anything because we need to actually add some css to get this to work so let's go underneath our aside here and before the media let's just put in a and s underscore is hyphen expanded and then we can add all us us well all our styling in here which we need for it so the first thing we'll do is we'll give it its width to be equal to the variable we set which is sidebar width so if we now click this you can see that expands and if we click it it closes which is pretty cool we then want to also go to our menu toggle rack and we're just going to basically say top is equal to minus 3 ram now this is a good job anything yet because we actually haven't styled this menu toggle wrap at all anyway so let's go back to our site tag underneath the logo we're just going to basically add in the menu toggle wrap class so just like this dot menu toggle wrap and in here we can basically add a bit of sign we can display this as flex for starters we're then going to give it justify content flex n which means it's always going to sit at the end of this element so when we open it it will sit there let's save this you can see so you see now it says at the end we can then also give it a margin bomb of one rep because we're gonna have a menu under we need to push down we then want to set this position equal to relative and once we got the position equal to relative we can add a top of zero it's not necessary but i like to add it there for visual purposes and then we can say transition 0.2 seconds ease out like that hit save and now if you click you can see that moves upwards into this gap which means it's in line so it no longer sits below this and looks all ugly it sits next to it because if you just pulled that out here it would look a bit weird so i brought it up that's what we did let's then go into our menu hyphen toggle and now in the menu toggle we're going to give this a transition of 0.2 seconds ease in or ease out like that and then we're gonna get the material or the material icons which is the class for our icon here and we're gonna set its color but we're going to say it's font size to be 2 rem which is 32 pixels in this case and our color to be light so you can see there that's now there but when you have it open you can see it does not it's facing the wrong way so we need to add some styling to that which deals with it so let's go all the way down into here and we'll go to menu hyphen toggle and we're going to pass in a transform element and we're going to say rotate minus 180 degrees now the reason we're using miners and not just a positive is because it right i want it to rotate anti-clockwise instead of clockwise so you can see there it now spins around and it's facing the right way which is perfect that's exactly what we want huh i want to add a hover estate to this you can see you can actually click it and it makes it a bit more clear so inside of our menu toggle here i'm just gonna go under the material icons i'm gonna say when we hover above this if i have there you can see it's say when we hover on the menu toggle we're going to give this the color or the sorry the material icons a color of our primary and what was going to say a transform translate x to be equal to 0.5 rem which is about 8 pixels so you can see there that now jumps across uh it seems our transition is not working there oh it's because we need to transition also on our material icon and there you go that's a nice little transition and you can see when once it's rotated as well the animation works backwards and points inwards which makes it look really nice so that's that done now let's actually add in our menu underneath so we want to go under here and we want to add in a h3 to start with we're just going to say menu just to identify that it is a menu especially for those screen readers um and then we can have a dot menu class and then we want to add a router hyphen link with the class of button and we want to do this about four times so we're just gonna say four and there you go we have four router links with the class of buttons i'm gonna add in a two to all of these we're gonna say two um and we're just gonna say for now and now in the first one we're going to say home well actually that's incorrect let's break that down why actually you know what i just realized this is let's close all of that we want a couple of things we want a well there you go we want a span with the material icons of home which is going to give us a home icon and then we want to give it a span with the class of text equal with the cluster text so we can target this this span specifically there now we can copy this and paste it again and we can change this to let's say document which is just one of the icons i'm using and this is going to say about and this one is going to go to forward slash about just like that so let's leave that here and you can see we have two things here it looks a bit ugly but we'll deal with that in a second so if i hit about you can see it change to about and home takes us back now i'm gonna duplicate this two more times just so we have some uh elements i'm just gonna leave these at home and this one will say our team um oh sorry this will be group and this one will say team and this one uh what is it email and this one will say contact us so it's safe refresh and you can see that the only ones not working is about let's have a look for an icon for about um so here we can see a description i think that's what we want should we just do the i i like the eye let's do the eye the eye looks cooler i had a different in the actual uh the demo but we're going to use the i you can choose any icon you want by the way these are just the ones i'm choosing and there you go you've got the about which ti now it looks cool um it looks really ugly so if we open this out you can see it's all broken it doesn't look very good so let's go and style our menu to start with so let's go in here underneath our menu toggle wrap we'll say dot menu now the menu is going to be styled with a negative margin which the reason we're doing this is because we want to add the padding to the actual element and not to the not to not on the outside i'll remove this and show you what it means later we also need to start our h3 and our button hyphen or button.text as well now we're going to go in here we'll say opacity 0 because we don't want to be able to see the menu or the text when we're not expanded we're going to say transition is going to be equal to 0.3 seconds so point second from the actual pulling out of the actual menu and we just want to say uh ease out like that we can then copy this pull it inside of our um it's expanded and i'm just gonna remove the transition and set the opacity to one and there you go so now when we close it you can see the text is now gone and it's back just like that but it looks a bit broken still so let's go back to our menu we're going to get our button inside of our menu and we're going to give this the display of flex we're going to give this the the line item center um and we're gonna just say text decoration no so if we say if you see it's looking a bit better now it's it's looking effing's in line instead of on all right next week suffer we're going to give this a padding of 0.5 ram to one ramp which is going to basically be the padding to the left and right and there you go your t now lines up with this element here and then finally we can underneath the padding and give it a transition transition off 0.2 or yeah 0.2 is out we can then set the material icons to have a font size of two rem which is going to be um 32 pixels we can then also give it a color of light far hyphen light and another transition on this so when we hover over it we can have a state of zero point seconds ease out as well and there you go so that's the icon styled we don't want to get our text and we just want to really give this um the color of far we don't want to give it a transition as well we can copy this transition i could have probably added this transition to everything just to save time of rewriting it out and it will make it more dry but also there's certain elements we only want to animate not everything so there we go and then underneath this we can say button on hover we're basically just going to say the background color is going to be equal to far dark alt which is the ultimate dark color we set we're then going to get the material icons and the text and we're going to set the color to be far primary so when we're hovering over them you can see here that now looks a lot better wasn't going to give this a margin right off one ramp like that just to bring give it some space away from it there well actually no you know we're going to take this away and we're going to go down to our is expanded underneath this hedge fund we're going to set the menu and inside of our menu we just want to say well actually no we could just say button this doesn't have to be the menu say our button and our material icons need to have the margin right of one rem so now when we show that close this and we open it you can see it has a sliding animation like it's pulling itself in as well and there you go that's that's the base elements all set out there it's looking pretty good let's add some more styling to this let's style this menu tag and a few other things as well so we want to go up to our buffer menu just under this i'm gonna say h3 we're gonna give it a color of far grey we're gonna give it a font size and we want this to be slightly smaller so it's a 0.7875 rem which is about 14 pixels um and i'm going to give this a margin bottom of 0.5 rem and a text transform of uppercase so it's all capital and there you go that's the menu there looks pretty cool uh it's a nice little subtitle that you can see but it's not too intrusive so it's out in and out of the way the next thing is when we when we click on a page you can see it's not highlighting that page it highlights when we hover but not when we're on it so we need to basically add in another class now if we inspect this here you can see it's actually added some classes you can see the router link is active or we get router link exact active now um the difference between router link active and router link exact active is router link active will find anything so let's say this was forward slash about um it would be on the about page but it also be referencing the home page or if we had about forward slash um child off about it would then be referencing the about page still as well via the non-exact method so the router link active but router link exact will only be on the exact link here in the href so that's why we're doing that there so you can see that so let's go to our menu and in our button we just want to say underneath all of this under huffer well actually we can actually go here and say and this class now save and that should hopefully when we're on the homepage oh we also need to add it after this um so we need to say and material icons so here we're gonna say um when we just have the router active we wanna say border right five pixels solid and far primary hit save refresh and for some reason it's not working now why router link exact active that should be right um oh you can see here we need to use the and and i also need to do and there as well hit save refresh and it's kind of worked oh i did that save okay so that's kind of working except you can see everything is highlighted except the about page we select the about page it then works oh and guys i've just realized why it's highlighting every single one is because inside of our sidebar we have them all set to this forward slash so we just need to change these ones to say say girls let's just say uh we can have team and then the one below is going to be contact hit save and there you go they're no longer highlighted i can't believe that took me a minute to figure out um but there you go so you can see we can hover and these have little animation to actually bring them if you click on these because they don't actually exist in our router they actually just throw errors in the console here saying there's no match for it um so just so you know that's what happened if we shut this as well whenever we go home you can see it's home page we swap it says about but you can obviously see that on mobile if we now make this bigger so if we bring this out um and let's just slam it to the top and we open this you can see instead of um obviously this being behind it it's now to the side of it and we can show it and it will follow it exactly which is really nice and looks really cool when we have it both ways so another thing is we have a settings button at the bottom here now how do we get button from up here to the bottom well we actually added the class to this called flex which allows us to push things around so if we was to copy this menu and this router tag go under here i'm going to add a class called flex but then under this i'm going to have in the menu which we're going to set to settings settings settings and this is going to say settings just like that and now we refresh you can see this settings is there but it's underneath them now how do we move it down so we're going to do that by going into our css scrolling right down to let's say below well you know what we could do at the top here just under here we can say a dot flex element is going to have flex one one zero to push it all the way and there you go you can see that's pushed it down to the bottom now it's down here so that's how we can move elements straight to the bottom and give some spacing in between um and there you go so that's flex out you can select a home and now the menu you can see works really nice everything pulls out and that's there now there's one last thing if i refresh this page you can see it goes back for refresh again it goes back now how do we add local storage to this to remember the choice we make so if we want to open and we refresh we want it to stay open just for the user experience so that's super simple inside of here we're going to change this ref false to be ref local storage dot get item and we're going to get this underscore expanded and then we're going to check if it's equal to true if it's equal to true then this is going to return true otherwise if it gets anything else like null or undefined it's going to say or even false is going to say it's false now to set this when we toggle the menu all we have to do is underneath this we can say local storage dot selenium is expanded is expanded dot value and that's going to save the state of our thing so we refresh and we click this and we refresh you can see it's now saved that it's open if i keep refreshing it's always saved if i show it and refresh again you can see it's now saved in the shut state so that will always remember what you're doing unless you clear your local storage um you'll always remember what that is and that is it for this um tutorial guys it's super dead simple super straightforward and as you can see it's pretty awesome to create this super simple mobile uh mobile responsive as well so if we move this to the right side and we just do this you can see it works on mobile and it doesn't push the content to the side and break it it goes above it let's say we go to the ipad air you can see the menu still works and if we go to long mode it's looking good as well um if we go to the ipad mini you can see it goes over above it because it hits that threshold of 768 um because i'm pretty sure the content will be way too small in this side if you didn't um but you can see there how it's all working how it would work now there'll be there'll be some probably some extra challenges you need to comp to think about when you actually create more content in here but otherwise this would work flawlessly and you'll just have to make a few tweaks when you actually add content to these pages otherwise it depends on what content you actually add so you can't really cater for every scenario but as you can see that is what we've been built today i hope you have learned a bunch of cool things with ujs if you have don't forget to leave a thumbs up it really helps out my channel and i really do appreciate it if you're new around here and you do want to see more consider smashing that subscribe button joining my awesome community of developers and learning with us um i'm still allowing myself to be fair i just make it upside go along i come up with an idea i'm like i'm going to record that video and we do it and that's how we create these cool videos so don't get subscribed if you want to see more of that leave a comment down below if you have any questions leave comment down below or if you have a big issue you've got some errors and you need and fixing hop into my discord server there's a lot of friendly people around who can help you uh well help you with anything basically they'll just come along like yo what's up man or i might even help you myself try not to tag me though a lot of people keep tagging me um and i can see all the messages i get notifications anyway so tagging me just you know adds salt to my wound um but yeah i will try and help you or other people will help you with this question so any questions you have so guys feel free to hop in the discord server get along with the community it's pretty awesome and finally thank you all for watching this video and peace [Music] now [Music]

Channel: Tyler Potts

Views: 99,279

Keywords: webdev, javascript, css, sass, scss, js, vuejs, vue, website development, website design, app dev, app, app design, app development, mobile app, native, web developer, app developer, developer, programmer, vue router, vite, vue.js

Id: Ul4KOXNQJSk

Length: 46min 14sec (2774 seconds)

Published: Tue Feb 22 2022