Here and when we hover over this we have this hover effect and then we have this button over here to expand this menu bar.
And if i click on that we have the sidebar displayed over here and we have the labels also displayed over here and if i click on this button once again it goes back to this.
Simplified view so this is what we're gonna design in this video let's get started right here i opened up this folder.
Called sidebar and i opened it with vs code so let's start by creating our necessary files so let's click on new file and we'll just create an index.html file.
And let's create a css file so let's click on new file and i'll just type style.css and we also need to have a javascript file so let's type main.js.
Css file so i'll just type link and press tab and here the extra values tab style.css and we'll also link our javascript file over here so i'll just type script colon src and press tab and.
Here in the src i'll just type main.js right now let's start with the markup of our sidebar now we'll create a division with the class of sidebar container to hold everything so let's create a.
Division so i'll just type container and in that the first thing we need to have is this button right here so for that let's create a division with a.
Class of details button and in this details button we need to have an icon so for that we're going to use font awesome icons for that let's go ahead and get the cdn of font awesome.
And you can just search for font awesome 5 cdn and you'll find this link of cdnjs.com so let's go to the website and let's click on this all.main.css file and let's click on this copy link.
Tag Wesdigital
And i just pasted it inside the head tag over here and now let's go to fontawesome.com website and let's get the icon.So the icon that we need is this right arrow so let's type right and let's scroll down and here we can see we have this icon called angle right so let's click on that.
And this is the code for the icon so let's copy this and let's paste it over here inside this division now let's open this in our browser and.
Let's see whether everything is being displayed correctly so i have this extension called live server installed in vs code so you can go ahead and search for live.
Server and install it in vs code and once you do that you can just right click over here in the html and click on open with live server and now here you can see the icon is.
Displayed over here in the browser right now the next thing we need to have are these menu items so for that we'll create a division with a class of menu items.
So here i'll just type dot menu items and press tab and in that we will have an anchor tag and before that we will give it a class of menu item.
And for the hr i'll just tap hash for now and now inside this anchor tag we need to have the icon so let's go back to our font awesome.
And let's search for the first icon which is home so here i'll just go to icons and let's search for home.
And here we can see the icon so let's
Click on that and let's click on this code to copy it and i'll just paste it over here inside the anchor tag and let's go back to our.Website and here we can see the icon is displayed over here right now the next thing we need to have is the text so if you go back to our design and if i click on this button.
We can see we have this text over here at the right so we want to have the text for all of these menu items so let's go back and here we'll create a span.
With a class of details and in that i'll just type home for this menu item and now let's copy this anchor tag and i'll just paste it three more times and now for the second menu item.
We have an icon called fa adjust and here we'll just type adjust as the keyword and then for the next menu item we have an icon called fa.
At and here i'll just type email and the last icon is cog and here i'll just type options.
All right that's it with the html of our design now let's go to our css and let's start styling this so first of all let's target the body and i'll just set a margin of 0 for everything.
Now let's style the sidebar container division so in our html we can see we have this division with the class of sidebar container so let's style that so here i'll just.
Type dot sidebar container and we'll set a background color of zero nine one one one six and we'll set the position to fixed and we'll set the left position to zero.
And the top position to zero and we want the height to be 100 viewport height and we will set a width of 80 pixels.
And let's also add a box shadow of 4 pixels 0 24 pixels negative 8 pixels and rgba 0 0 0 and 0.3 all right now let's style all of these icons so for the icons we.
Have a tag called i so here we can see we have this i tag and in that we have these classes which gives us these icons so let's target all the i tags so here let's type sidebar container i.
And we'll set the color of all of these icons to light gray and let's set the font size of these icons to 30 pixels.
Now let's tile the container of these menu items so if you go back to our html we can see that we have this division of the class of menu items and in that we have all these anchor tags with the.
Class of menu item so let's target this menu items division so let's go back and here i'll just type sidebar container menu items and we will set the display to flex.
And we will set the flex direction to column and now we want to bring everything to the center vertically so for that we have to type justify content and set it.
To center and we also have to set the height to 100 viewport height and now we can see that all these menu items are in the center now for all these menu items we will have a gap of.
42 pixels so for that we can just type gap and 42 pixels all right now let's style all the anchor tags with the class menu item so let's type sidebar container menu.
Item and we'll set the display to flex and here we can see we have this icon and also this text over here now we want both of them to be center aligned so for.
That you can just type align items to the center and let's also remove the underlines from the links so i'll just type text decoration and set it to none and we'll also set the color of the text.
To white and let's set the font family to roboto and we'll also add a padding of 6 pixels top and bottom and.
16 pixels left and right now let's style this text inside the menu item so if you go back to our html we can see that we have a span with a class of details so let's target this.
So here i'll just type sidebar container menu item and details and for the details we will have a margin left of.
24 pixels and we will set the font size to 18 pixels now let's add a hover effect to these icons.
So the icons are basically i tags so for that let's type sidebar container menu item i and when we hover over this we will increase the size a little bit so let's.
Type transform and let's set a scale of 1.2 and we'll also add a background color and let's set it to 0f1 d25 and now if you hover over this we.
Can see that the size is changing i will also add some padding to these icons so that we can see the background color clearly so let's type sidebar container menu.
Item i and let's set a padding of 8 pixels and we'll also set a border radius.
Of 8 pixels and we'll also set a transition so that we will have smooth animation so let's see the transition of all to 300 milliseconds is.