Build a Responsive NextJS Tailwind Dashboard Layout

what's going on you guys Clint here welcome back to the channel code Commerce and in this video I'm going to show you real quick how we can build a dashboard layout in next.js using Tailwind CSS for our styling so this is the example I have for you right here so as you can see on the left side of the screen we have a side nav bar I just gave it a 01 for just an example so you can identify it then we have a header up here which I labeled header start on the left side header end on the right side then we have a column one here column one start column one end and then column two start and column two in now this is mobile responsive so I set the breakpoint to 768 pixels so if we grow this you'll see once we pass this 768 pixel breakpoint we're now going to have two columns and you can stretch this as far as you want and it will maintain its aspect ratio okay the header and the side nav are going to remain the same but the column one the column two will flex and stretch and then once we shrink down below our 768 breakpoint you can see how they stack so if you want to see how to build this next JS dashboard layout then let's go ahead and get started so here I am in vs code I'm just going to press the control back take button to open up our terminal here and what I'm going to do is create our next JS application npx create Dash next Dash app and I'm going to go ahead and put a period there so I install it in our current directory we're not really going to be using typescript but that's okay you can go and say yes yes linter yes Tailwind CSS yes Source directory no app router yes and the import Alias you can say no okay so we just created our next JS application I'm going to type npm rundef to start up our development server so already have my demo running on 3000 so what it's telling me is to go to Port 3001 and that's where the demo is going to be running yours is going to be on Port 3000. all right so this is it this is our next JS application our boilerplate starting code so what we're going to do is go inside this app folder here I'm going to zoom in just a little bit and what I'm going to do this page file here okay let's shrink this down a little bit so this page file here this is what you see on the screen Okay so what I'm going to do is just delete everything in here I'm going to leave that main tag there we go let's delete that and let's just delete all this matter of fact I'm going to go ahead and just change this over to a div it doesn't really matter but we'll just stick with the div for now so what I'm going to do I'm going to give this a class name of flex and let's just open this up here and what I want to do next is actually create our side nav bar let's do that first so what I'm going to do inside of this app directory here I'm going to create a new file and what I'm going to say is components and what this is going to is going to do is create a folder slash side navbar.jsx so when I create that you can see that it created a components folder and then aside navbar.jsx file our afce is going to generate a functional component now what I'm going to do in here I'm going to say 01 just so we can label our side nav bar and let's go back into our file here into our page.tsx and what we want to do is just import our side nav bar so we'll just say side navbar just like that and let's go ahead and import it and you can just copy or just type over this image since we're not using the image component so I'm going to say is import we call this side navbar from going to Arc whoops components side nap bar so now we should see an o1 on there and it looks kind of ugly because we haven't given it any styling yet but that's okay so let's go back into our side nav bar and what I'm going to say give you this a class name let's say Flex none I'm going to give it a width of 20. I'm going to say BG gray 200 then H screen which is saying screen height 100 viewport Heights I was going to save this so there you have it you can see our side nav bar just slight uh color differential there so now we have our nav bar what I want to do next is create our header so let's open this back up we're going to create a new component in here I'm going to call this header.jsx.tsx doesn't really matter r-a-f-ce and then what I'm going to say in here I'm going to just give this two P tags we'll say header start I'm going to copy this down and I'll say header end here on this one and let's go ahead and import this here and the way we're going to lay this out okay so we already have a flex here and we're going to create a div here and inside here we can have our header doesn't look like it's letting me Auto Import it so that's okay we'll just copy that down we'll say header so we import our header if we go ahead and save you can see our header start and header end there so what I want to say in here let's give this a class name what I'm going to say is flex-1 anything above a median breakpoint just 768 pixels we'll just display Flex we're going to give it an H screen and then we want this to be position relative so next let's go back into our header and now in our header let's go ahead and give this a background we give this class name BG red 200 there we go and I'll say position this absolute I'm going to give it a height of 20. a width of full which is a hundred percent I want to say flex and then justify between that way we can see the header start and the header end so there you can see that now if we Flex this or we open it up you can see we're using flexbox and it spans the entire width of the screen all right so next let's go ahead and create our first column so again let's go back into our components folder I'm going to create a new column here or a new file here I'm going to call it left column dot jsx okay RAF c-e-h going to generate our functional component once more then what I'm going to say in here I'm going to have my we'll say column one start let's copy this down this will be our column to start and let's go ahead and we're going to import this in here so with our header here then we'll also have left column sometimes vs code does not want to Auto Import for you and that's okay we'll just type it in manually there we have it all right let's go ahead and save now we're probably not going to be able to see anything yet because it's kind of hidden underneath this nav bar the side nav bar in the top nav bar so let's go into our left column and what I'm going to say I'm going to say margin top 20 which is the size of our header here so now you can see we just start right here and I'm going to go ahead and say Flex justify between you don't have to say this I'm just doing this so you can see the start and end of this component anything above medium I'm going to give this a width of we can open up our brackets here and add in custom values so in here you can add pixels you can add RAM in this case I'm going to add percentages so 65 percent I'm going to give this a BG Gray 300. and then if you want we go and save this so you can see that is our column here now you don't really have to do anything else for the sake of this video so you can see that it Stacks up I'm going to say minimum height then I'm just going to open up my curly bracket so I can give a custom value of 45 so if you can save you can see that takes up the top part of the screen now if we open this up it just lives on the left side of the screen and this is our break point at 768 pixels and guys in case you're wondering where I got the 768 pixels that is the standard here for medium so if I hover this this is a Tailwind CSS intellisense plug-in so you can actually hover on the tailwind and it gives you the CSS property so as you can see medium here is a Min width at 768 pixels okay so next let's go ahead and finally just create our right column in here so under our components folder again we'll say right column.jsx RAF CES and just going to generate our functional component let's go back in here whoops we'll say right column call them just like that and we're going to have to just import this here it's fine we'll copy that down do the right column all right so let's go ahead and save that and there you have it you see our right column here so let's go ahead and give it just a few just a little bit of class names here so real quick I'm going to say call them to start we'll copy this down say column to end that way we can see the start and end of everything so in here what I'm going to say is class name say anything so instead of saying margin top right so what I'm going to say here is anything above the medium break point I'm going to say margin top 20. because we don't want to give it if we gave it a margin top 20 as you can see right here it's going to shove it down and then when we open up to our past our median breakpoint it looks fine but what we want to do is actually give this a medium break point there we go now as you can see we don't get that margin top until we pass our 768 break point there so next what we're going to do we'll say Flex I'm just going to say justify again justify between that way you can see the start and the finish here and now anything above we're going to use our medium break point once more anything above the median breakpoint we're going to give it a width of 35 percent was 35 and 65 that we use for the left column totaling 100 and then let's just give this a BG gray 400 so we can see it let's go and save so now you can see our full column here so and again if we want to give this a minimum height we can do that we'll say minimum height we'll say 45 percent something like that now if we open this up if we pass our medium break point you'll see now our columns are flexed and there you have it this is how you can create a responsive dashboard layout and next.js of course you can add upon this you can change it you can change the width you can change the columns you can shift around the header the nav bar and change it how you see fit but I just wanted to give a quick example on how to create a dashboard layout in next.js using tail and CSS so I hope you kind of thought it was cooler got some value out of it if you did I'd appreciate it if you smash the like button thanks for watching and you guys I do have a full build coming out soon with a full dashboard next.js using trimmer for some layout components and I'm going to show you how to host that thing live so stay tuned I'm going to be releasing that here in the next week so thanks for watching you guys I'll see you on the next one

Channel: Code Commerce

Views: 5,241

Keywords: web developer, html, css, javascript, nextjs, react, tailwind, build a nextjs dashboard, dashboard layout nextjs

Id: WvIo6Kzvk4k

Length: 10min 55sec (655 seconds)

Published: Mon Aug 07 2023