How to Create a Sidebar in Next.js & Tailwind CSS

hello guys welcome to my youtube channel so in this video i'm going to be walking you to creating a site navigation bar for a dashboard so in this case i'm going to zoom in on a blog dashboard and this is what our application is going to look like and before we continue if you haven't subscribed to my channel quickly do that right now and um let me know in the comment section what you think about the current applications by devoid so notice how this nice beautiful animation as we toggle the site now and also we have our navigation items notice how they get um they change into icons as the navigation as the site navigation is collapsed also last thing is notice the icon here the toggle icon how it changes direction as we collapse and expand and how it only displays when we overrun anywhere within the site navigation if we out of the site notification it goes up all right guys so this is all about what we're building and um just uh uh the text that we're going to be um using in this case is going to be tailwind next yes so i already have a documentation for that open and i'm going to uh maybe i'm going to add a link for this documentation in the comment section in the um description of this video so you can follow it and also configure your own application so let's um start writing our code for this let's go back let's go and start uh configuring our nexus application so we need my desktop i'm going to create a folder whole world blog dashboard and i'm going to cv into so now that we have our project created that is our project so i'm going to use the script i'm not going to follow exactly what is here but i'm just going to do npx create next app and space with a dot now notice this though notice that i'm using dot here is the project name the reason i'm doing that is because i'm already within the project folder so there is no point using uh calling the project name again if i call the project name it's just going to create a new directory again by the same name and that is not what i want so i want my nexus application to be configured within this block dashboard folder so let's hit enter and uh while it installed let me quickly remind you that if you haven't subscribed can you do that and please hit the like button if you find this interesting and all right let's wait for this to get installed right now that this is now installing let's open it in our code editor okay so this is a good editor here now let's um let me run the current setup we have in our editor okay all right so this is what we have for the current application i'm quickly going to clean up all of that and um just have basics okay i won't be ready to start building our site application so okay this is apparently flat publication and all right so that's it now let's continue with the next step in our gaming setup so let's install the stable dependencies uh since we already have here i'm going to be using round for the installations so instead of npm i'll do yarn art okay that's done let's see the next let's initialize our and uh two way by running npx3 in it so running that installs um creates a t-wind config to js file for us and this thing will configure js files where we will configure whatever other table configurations i'm just going to what i need what i want to do is i will just configure what we need for our table at one and we will just be using them to build the application so i'm going to create i'm going to set up a theme i'm going to set up a compilation uh file path and double um let's do misunderstandings so we have directories exactly this is exactly what we're going to be following and i also want important to be true so this is just to make sure that uh every style you apply is has an important cannot be overwritten so it's important and then we have our theme so we're going to import our team from the default team and default team from continuing and we'll spread to a split team within theme here and then we have our colors theme has colors so it's going to have colors okay i'm just going to even though we might not need any of those but i'm just going to default spread the defaulting colors at the beginning and i'm going to add my overwrite primary and we have white we have text so text in this case is going to also okay so this is our this is our theme and this is this these are our colors these are the colors we were needing within the uh cause of our tutorial tutorial so let's um i'm going to explain more what i mean by the default what this default here is for and how it's being used so let's uh keep watching and pay attention all right so the next thing is we already have some icons already defined a few icons so i'm just so i had already created a few right icons i'm just going to import those icons here i'm just going to paste the icons here and we will reuse them so um they will be in a component in our components folder and within components we're going to have icons and let me just space they have the article icon class i can format local account user icon the video icon so we now have our icon let's quickly uh have a look at our table documentation to see if there's anything else you need to do now it shows that we need to add things um directly directly in our styles of style slash global us css so we need to start but uh google.css i'm just going to quickly add those at the top of the file and it's going to apply all our css classes within the application now our application is good and well our application our application is already set up so let's uh try it out now let's see you notice notice how i'm getting suggestions for in taiwan and i'm having this suggestions because i installed a table plug-in for that so just search for wind and you should see tailwind intelligence this is what i this is what has happened i gave the suggestions as i typed the classes so make sure you install it so we have here uh we have classes so i'm just going to give a text color you see if i give text light we should have a light and uh so i'm going to quickly restart my server so we have our text so the color has been applied and let's just use text now let me explain how the default has failed so within our table in the config so we have here text and we have here to pop and we have the light so if i just give it text i should have the color that's default color so you notice we have your text with the default the default means that i don't need to give this text default i just have to see text and it will automatically apply the default color same thing something applies for light i just need to give knight it will automatically apply defaulting light so this is our default text color and um this is what we were using monster types so within our components font i'm going to quickly create the site and let's create a new part now let's i'm just going to import this component within our index dot index.js page so we have it here we have a sidebar and not dashboard so um next thing we need to do is let's create a layout for our application so let's quickly create a layout and from there we can now add the corresponding items within the site navigation item so we have a layout component and within our layout component we're going to have a parent thief and this leave is going to house it's going to contain a side sidebar and maybe the content of the dashboard so since there is no content i'm just going to give it an empty just like that now within our first date we have to let's get them let's give class names for this positive and we have i want the height to be 100 behind and i want it to be a flex box and a flux of reflects direction of row and justify content start so now let's um we have this let's go into our the content i'm going to give the content class name of aj primary now this primary sets the background tool that's the background for this our content the primary color i want it to grow i want to give it a flat screw of one like flex of one this is it so this is the start of it and uh i also want to give padding for text color of white since it's going to have a since it's going to have since it's going to have a background primary so the fact that it should definitely be white or something like that so right let's uh let's just quickly give it a bottle just to highlight uh the states so i want it to be a dashed butter and a border color let's say you see all right let's just give it dash and within our side knife i want to give a height of 100 piece so we have a height of 100 kilos if you hide pardon a four part on top of i'm on the top the big eight bottom four like wrench should be light just to try so i just can't bother all right let's see so this is our site navigation and uh notice that the content is still hanging on under the site notification let's do it let's now go into our layout and change that so within the layout we have like row flex of flex direction of raw so that means i should let's see oh okay so uh another issue we need to import this within instead of important that we should now have let's so let's move that okay so this is all layout so we now have a layout and we can now start adding the working on the sidebar let's go ahead and remove the borders [Music] okay now let's start by within our site navigation we have to let's um i'm going to just uh use i'm going to install the package called class names so that because you notice that on this line is too long and when it's too long you don't see you don't see some of the classes so i'm going to add class names and i'm going to use last names to define my classes and conditionally apply classes to this thief so let's call the first class should be i just call the wrapper class wrap the classic wrapper classes and i'm going to implant import class names from class name and we should have just going to quickly copy these classes [Music] and paste them there now one another thing else another thing we need to do is to create a state for the top link so i'm just going to call it token collapse and i'm going to conditionally apply a width i'm going to conditionally apply a width to this wrapper class so instead of that i'm going to have it like this [Music] and i'll conditionally apply it basically if the workload is on is false it should give it weight of 80 points and look at this two before the y is it should give the weight of principles now that is done okay within our so this is nothing nothing is changing yet so there's nothing to show here so within our site we're going to define a few containers so this first day is for the solid logo now this is for the logo on the site navigation items and lastly or second date is for the lower path which is the logout option now this last item should be for the logout based on houses the logo and the navigation items so what we need here now let's let's define our logo and um that's the final logo and uh navigation items so for this logo for this content i'm going to give it it's going to be a flexbox flex of column like with flex direction of column and that's all for this now i'm going to define container for our login and the container is going to be the flex as well align item center bottom pattern that one one point cap let's give it a gap of phone and within that we have a local icon so let me make sure it's important from icons yep so it's important and next thing is let's use the final stand for the logo name [Music] so this normal name i wanted to be hidden whenever the whenever the site now is collapsed it shouldn't show should only uh we should only have the local icon when the sideline is collapsed so i'm just going to give i wanted to have margin top of two text of large on the table large larger text i wanted to just have a font size font weight of medium slightly bold and text color of text so yeah this is um the text color text not just text but text text that text gives the text color the default text color and now we have that let's give conditionally apply the hidden so hitting here is a class name for display none so if double if double is undefined if the one is undefined this shield if double if the local address plus is our fault is true it should be hidden and if it is false it should be visible now that this one is out of the way let's go ahead and add a collapse button now our collapse button should be within these within this container and um i'm just going to give i want to give the main container position of relative so that we will be able to position our collapse button absolutely so the main container for the oppo the header had a thought okay so um i'm going to wrap this with another container the position of clinical and this container now has the logo so the logo has two containers the first one houses the logo and the collapse and the collapse button so let's add a collapse button now we also have to uh this collapse button is only going to be available when as the user hovers so let's first of all have that button and we have okay last name i'm just going to define it at the top here okay so we have here i'm going to give a pattern a fall then we have conditionally conditionally i wanted to retain it may 80 180 degrees so we should change direction so if the collapse in the collapse i don't have status 2 should rotate by 180 degrees if this falls which is just the default rotation class name just let's have a look at what it looks like cool so we have this looks very uh similar already now let's uh work on the horror states for the dog life so we the other state we are going to have dance ace collab collapsible so by default it's not collapsible and let's go back here i'm going to use on on mouse on mouse enter so as the user enters this side now with this mouse i'm going to right let's see the next thing we have to do is to conditionally render the collapse icon so this because the hover stick works good so let's now um let's handle click clicking on this on this collapse icon the opposite of its current value let's see awesome sorry right we are now able to collapse our sidebar but this is not the this is not um there is no animation to this and it doesn't really look nice so let's add some animation um in this case i want to leave a custom animation so i'm going to use the style property and i'm going to pass the transition of i want the width which transition to width and at 30 milliseconds cubic please here good let's see awesome our animation is here so we have a cyber animating it exactly the way we want it to so guys let's um we might see what's next what's next uh guys uh so far if you find it helpful find it interesting don't forget to smash the like button and subscribe if you haven't done that already so let's move on to the navigation items now for the navigation item we want to win it we need to create another another container to house navigation items so i'm going to just call it a we're just going to create a leaf and in the day we have blacks flex column it's going to be a column just like the other containers and i should have ranked terms same thing let's enter to start mining top i'm just going to keep imaging top of 24 points and let's click let's close our container now let's define uh i'm going to define our our navigation item so i'm just going to use i'm just going to use an array and i call that a very many items equals to containing objects with id um all right now that we have some here let's cop let's go into become their the contender for that and design that particular part now we're going to look through these items and enjoy i'm going to the structure and get the icon call it icon here and spread this is an object so let's return what we all right let's see okay so these are our navigation items here and let's add styling to these icons so first of all we're going to define our class our classes and in this case i'm going to use a function i'm going to use the function to define these classes for our definition items i'm using the function i wanted to show you why i want to use a function here so let's go and call it um i'm just going to call it now write down classes obviously get non-fiction classes and it expects many and it expects you to send the menu and when you send the menu it's going to return the class names and then by default we have a flex it's a flex every by default all major in terms of flexbox components all these effects items then center alignment cursor pointer hover give it a hollow state of background light lighter and water radius of rounded width 100 overflow hidden white wings no wrap so i don't want i don't want uh any wrapping and text rattling it should always be on the cell line now let's conditionally apply background light lighter when it's active so um i'm going to create an active state an active so i need to set active menu so by default i want such that as the by default the active menu will be i'm going to use use memo just to ensure that there is no uh unnecessary renderings and which will show i could use your state but using this memo for beta or for less complexity so i'm going to look through manual terms and find find the menu which many links equal report tool um i'm going to define a router const router you can use router for next router so you have router and they should be called each time there is a change in the patterning of our router so we have here i'm looking for the menu who's our link is also the current router path name so let's get the 13 and come back down here in our get now item classes and we should set the active state when the active angle is exposed to menu id the current menu id now let's go back to that component and i'm going to give we're going to now obtain those classes here so let's see what our application looks like okay this is what it looks like let's now make a few changes to make it look better uh to make it look better um first of all those are links so at the moment they are not clickable we are we just have a hover stage but no click no clicking works so let's add let's make it a link so this is supposed to be a link and we're now going to have a link from make sure x next yes and we have this link pointing to the menus link and within this link because we want to give those items some styles so i'm going to use i'm going to add a tag within the [Music] as a direct descendant of the link so flags and um we have now one icon going to have a deep and i think we want i wanted such that once the toddler is collapsed if it is not collapsed it should show our navigation item so i'm going to have a spam last name i'm going to use class name and to the text size medium font medium font weighted medium text color text text light and i want it to be hidden if toggle um there's no need for this so this is our application okay now it's beginning to make sense now um we need some space between this icon and the menu item we're just going to give the minimum width to the container right here so because this minimum weight we i don't have it within tailwind so we're just going to deal it with the style drop here so you should always have a width of 2.5 ram now our we can now navigate the pages we can now click on links and it will take a take us to the respective pages in order to avoid the error we just we just saw we're going to create those pages and we have the post users and tutorial space post users right now let's switch we have our pages i'm just going to quickly do the same thing we had here now this layout i'm going to ensure that it takes children here in that case when we get into this i'm going to call layout and just like that and just like this same picture right this is the home this is the post this is the user's tutorials okay so we are done with that one let's add our logout button just for that and i think that will be all for this detail now what do we need for the photobot we need almost very similar styles styling very small installing like um very similar so we need the styles to be very similar to what we have already for the navigation items so we have this and i'm just going to give and use template string videos and i'm going to call that function get now right here classes and in this case menus not provided i just wanted since this is not the menu item so there shouldn't be any menu and i want to add more more styling to it button of three two points and passing top top and bottom of all points a slight difference from the navigation items and we're going to have the same style for the icon then thanks okay awesome all right guys so um this is our this this is the end of this uh mini application so guys um if you find this helpful don't forget to subscribe like and share and if you have any um feedback you would like to give me please drop it down in the comment section and i would attend to them and i don't mind receiving any suggestions for future tutorial materials or tutorial videos those are also very welcomed and thank you very much for watching my video and have a nice time

Channel: FullStack Mastery

Views: 36,975

Keywords: tailwindcss, tailwind, next.js, nextjs, how to create, how to create a sidebar, how to design a sidebar, sidebar, navigation menu, sidebar navigation, how to build a sidebar, sidebar menu, how to create a sidebar menu, how to build a sidebar menu, how to design a sidebar menu, Next.js for beginners, tailwindcss for beginners, how to setup tailwind, Next.js and tailwind, How to create a sidebar using Next.js and Tailwind css, sidebar using Next.js and Tailwind, full stack development

Id: ooy92nDRHzU

Length: 41min 44sec (2504 seconds)

Published: Tue May 10 2022