Build a Responsive React Admin Dashboard | React, Next.js, Tailwind CSS, Headless UI

an admin dashboard can be a crucial part of your application which is why in today's video we're going to be building a fully responsive admin dashboard using react specifically using next.js Tailwind CSS headless UI and we're going to be using hero icons for the icons this dashboard contains a top bar which has a menu notifications and a button to open and close the sidebar I also has a sidebar with navigation items and as you can see it's also mobile friendly and the nav the sidebar works on mobile as well so without further Ado let's get into creating this dashboard so the first thing we need to do is set up our next JS project so fairly easy it's just a single command so we do npx create Dash next Dash app and you can call it whatever you want I'm going to call it admin dashboard uh am I wrong and we do dash dash use Dash npm so by default create next app will use yarn um which is fine if you want to use yarn you you can leave that part out but we we're going to be using npm to install packages and also run the things so we're going to do npm run Dev so it seems a bit weird to use yarn in our case but you can obviously use yarn if that's what you're used to using and so we'll let that install shouldn't take too long and once we've done that there's a couple more packages we need to install so we will see the internet to be CD into admin dashboard and do npm Dash not npm Dash sorry just npm I and what we'll do is do at headless UI forward slash react and at hero icons forward slash react and install those two packages so headless UI if you're not familiar with it it's really good package it gives you a lot of the JavaScript functionality for things like modals and drop down menus and stuff like that but it doesn't give you any of the styling which is quite nice actually because it means that we get to add our own styling um really easily I'm going to be using Tailwind for that which we'll install in a second and hero icons is just an icon Library and I think it's made by the same people that made Tailwind but I might be wrong on that one so it's very a very Tailwind heavy project this um headless UI is also made by the people that mid-toned um so next thing we need to do is install Tailwind and we can forget about this first step because this is just creating a next JS app and we can continue from the Second Step so we need to do this npm install um oh I hate when it does it on Mac the uh the the bottom menu pops up on your other monitor and so we just paste that so we do npm install Dash D Tailwind CSS CSS and Auto prefixer and we install those three packages and the next thing we need to do is initialize Tailwind so if we copy that as well MPX Tailwind CSS init Dash p so this will add um post CSS and Tailwind config and what we will do is we can just copy this so if you click this icon copy that and then in tailwind.config.js we'll paste this in there so if you open this in whichever text editor you want so I'm going to use Visual Studio code and it should be zoomed in hopefully this is zoomed in Enough by the way um let me know if this is okay in the comments um for you know the next video um but it should be big enough because I know people want me to zoom in on the code because it's a bit it's a bit too small sometimes so we can get rid of everything in here and just paste what we copied um which is pretty much the same it's just got these um the content stuff here um it'll just tell Tailwind what files to look into and to get an idea of um what classes we're actually using and then it'll get rid of all the other classes so now that that's done um we should be able to yep so we've got this um stuff to put in globals dot CSS so that's in this style folder so if we do globals CSS and again we can get rid of all this stuff and just paste in this um now we can do some cleaning up as well here so we don't really need this home module so we can get rid of that we don't really need the API folder that's for more serverless stuff so we don't need that and I think everything else oh yeah we can get rid of all the stuff in here but what I'm gonna do is replace the stuff in there with this final step here and if we just get rid of all this this will be our way of testing whether CSS with the where the Tailwind CSS is installed and it's actually working properly um so what we'll do is go back to our command line and run npm run Dev so I don't think we have anything else to install so that's all good we can we can keep this running on in the background so if we copy the link there and we'll paste it in and go to it so what we should see is hello world with an underline and it should be a fairly large text so Tailwind working which is good if we go back to our code and what we'll do is we will add we'll add a new folder in the root directory so there and we'll call it components and this will house all our components and one last thing I want to do in globals.css is just add um the background for the body so we'll do body and then we can do at apply and we'll do background gray and we'll do 100. we'll do and that will just um change our background to a gray color um across the board so that's good and then global.css we can close we don't need that anymore we can get rid of tailwind.config and we can also get rid of index.js for now we will add something to it later but that isn't really too important for this tutorial um because we're focused on the actual layout and whilst we're here we might as well uh edit the app Js as well so we've got import Styles global.css which is fine and what I'm going to do is import layout which we don't have yet but we'll add it in a second so we'll do import layout from and it's going to be Dash Dash and sorry not dash dash dot dot slash components slash and then it's going to be the layout so we don't have it yet but don't worry about that and that's fine and what we need to do here is wrap this component in layout so we'll do brackets for this and we will indent that one and we can do closing bracket and we'll do layout and then move component inside of layout so basically what we're doing here is making sure that all the pages that we have so we'll so index.js for example is a page this will be like the home page of the dashboard um it's going to be wrapped in our layout and our layout will include the top bar and the sidebar so it'll always be there um and it just makes it a lot easier and you don't have to you know include the layout on like each page you just wrap the entire application in the layout which is easy and we can close that we don't really need that anymore um so quite easy there so we've got three components that we're going to be worrying about we've got layout and I'm going to be using dot JS um I'm only using dot JS because I've got a plugin called prettier which when you save it will make the code it'll like reformat the code to look nice um but it for now it only works I can set it up to work on jsx files but it only works on JS files in my vs code at the moment um so if you want to do layout.jsx you can do or just dot JS um it's really up to you we've also got top bar dot Js and we've got sidebar so quite simple we've only got three things to worry about in this tutorial um top bar Side Bar and uh layout so let's start with layout that's sort of like the main thing um and what we'll do is import some stuff now um some some of the importance we're doing similar to how I did um I imported layout here without actually having layout um that will happen a few times in this tutorial we're about to do it in a second and I just want to make you aware that we will add all this code later so don't worry about it too much if you know you get like red lines and stuff like that it's not too much of an issue so we're going to do use stick and we'll do use effect spell I still can't spell and then fragment all of that is coming from react we're going to do import and this is why I was talking about a second ago so sidebar from and then it will be dot slash sidebar we're also going to import top bar from dot slash top bar one more thing as well we're going to import transition transition from headless UI forward slash react so we'll get into transition in a second really cool tool that headless UI gives us so we'll do export default function and it's going to be layout we're going to accept children as a prop and yeah we'll just open this parentheses and that is yeah that's the start of our layout um done so this is where things get a little bit trickier um obviously this dashboard is mobile friendly and with that comes some complications so what we're going to do now is write some code to basically tell us whether we're on a mobile or not so we'll do const we'll do show nav and we'll do set show nav and this is going to be used it so we'll do use State and we're going to set the default of this to true so by default it will show the nav um and this will be on desktop so you'll see in a bit we're going to set it to not show by default on mobile because you know the sidebar is going to work a little bit differently on mobile um but we will get to that in a little bit so we'll do one more and it's going to be is mobile and I'm going to do set his mobile and that's going to be equal to use state false for now um what we'll do is do a function and we're going to call it handle size and basically what this function is going to do is it's gonna have a look at the width of the essentially The View part and if it's below a certain size it's going to say that we're on mobile and if it's above that size it's going to say that we're on desktop so what we'll do is if in a width is less than or equal to 6 40. we're going to do set sure now false and set is mobile to true so this number here this 640 is the pixels of the viewport so how how wide the Viewpoint view part is in pixels now by default 640 pixels is the width of Mobile in Tailwind CSS now obviously if you go in and change some things like let's say you say that you want that break point to be like 650 then you would need to change this number as well um so there's something to bear in mind but I think most people would keep it to the default so you should be fine with 6040 and then what we're going to say is if that's not the case we're going to set sure now to true and set is mobile false now you'll notice that the values we put in there are the same as up here so you might think like why bother because the value is going to be like that anyway but we're sort of just taking into account the potential use use case maybe that there's like a tablet for example and the person um let's say flips the tablet around so like rotates it um sort of landscape and then it goes back to being what could be considered a desktop view and then maybe maybe they rotate it again and it becomes more of a mobile view if that makes sense um whether that would actually happen or not it is another matter but we we have it there just in case um just to make sure that it can switch back and forth between desktop and mobile um it may not get used but it's there just in case so we'll do a use effect here and in the use effect we will do if and this part is very important type of oh type of window is not equal to undefined we can add event listener resize so we're listening out for resize events and if this happens we want to call this handle size function um let me do let me change the name of this function to resize that because that makes a little bit more sense so we'll do uh resize there we go and then what we need to do is also add a return function and what this will do is when this component is unmounted um it will then call this what it'll call this function and then whatever then whatever's in this functional happens or in our case we want to do remove event listener and we want that to be resize and then handle resize so yeah that's not gonna um have any parameters that is watching so we just want to call this once when the um component is mounted and then never again so we do this empty square brackets here so we just save that um let me just change my indentation to two space because it keeps saving it and um taking off some of the indentations I might as well just keep it at two anyway um so now let's do the actual page so we do return and we do um brackets so I'm going to add an empty tag there just in case everything and then we'll do top bar and top bar is going to accept two props so we've got sure now it's going to be equal to show now and then also set sure enough which is going to be equal to set sure now and that's fine um that's actually going to be a self-closing one so we'll do um slash at the end of it like that um we're gonna have the sidebar component next however the sidebar is wrapped in a transition because we want to add that animation to the sidebar so if we do Transition like that and there is a fair bit to do here so bear with me take a little bit of time so we're going to do this as oh we want to do an equal there so as equals and then fragment so we're doing it as a fragment um sure and that's going to be sure nav so that's going to determine whether the the navigable is actually going to show up or not um so now we've got the sort of um classes used for the animation stuff uh I guess you would call it animation um so we've got enter and that's going to be equal to transform transition duration and that will be duration Dash and then in square brackets we do 400 milliseconds so then we'll do enter enter from and that'll be minus Translate X full enter two is going to be Translate Dash x dash zero and then we've got the leave animations to do so we've got leave equals transform same as the the duration before so we've got duration Dash 400 milliseconds we've got transitions it's fairly similar to the enter one and we've also got ease in and out so probably from told you there's going to be a lot to do with this one but thankfully these last two are really sharp so we've got Translate if I'm going to spell that right translate X zero and leave two is going to be minus Translate full so that's our transition done so that's what's gonna um make our sidebar look a lot smoother when it enters and exits and then we're going to do sidebar component sidebar and that's just going to accept sure enough so equal shoe enough there we go and that's again going to be self-closing and then below this transition we're going to have the sort of main content so we'll do oh we'll do Main and we'll do class name and oh we need to do um curly braces for this one because we're going to be using some JavaScript so we'll do pt Dash 16. transition all now this is all part of the animation stuff so obviously our sidebar is going to be going in and out quite smoothly we want our um page to do the same thing so it's basically going to like follow the side by as you would have seen in the intro it's going to follow the sidebar quite smoothly which also means we need to go to the set go at the same speed so we're going to do duration I'm going to do Dash in square brackets we'll do 400 Ms um important thing to know about this is when you do this square brackets you're basically putting in like a custom input um so obviously duration Dash and then it has Tailwind has some built-in ones like 300 um but if you do the square brackets you can just pass in whatever you like and here's where we do the JavaScript so we're going to do sure enough and is mobile is false I'm gonna do PL 56 otherwise we won't do anything and we will close that basically what we're doing here is I said that the um sidebar Works slightly different on mobile so on desktop what we want is all the content so the page to be pushed to the side so that you can see the sidebar and the content of the page um however on mobile what we wanted to do is actually we want the um sidebar to hover over the content because it wouldn't all fit otherwise so yeah and that's why we have this pl56 here which will push all the content to the side but then on mobile we don't have anything because we want the sidebar to basically overlay the content um instead so let's add a div and we'll add a class name in this div we'll do PX Dash four so we'll give it a bit of padding and that's gonna be on mobile a bit of padding on mobile and then we'll do MD px-16 so we'll give it more padding on um desktop so important numbers to note here pl56 um I think the width of the sidebar is 56. so let's say that we did we missed out this part here this px16 and PX4 actually the PX4 doesn't really matter too much but the px16 if we didn't have that the content would be touching the sidebar so what I do is I have this as the main um container to just get it so that the content shows and then I add another container under it which has a bit of padding and that will push the content away from the sidebar so that there's a little bit of a gap between the content of the sidebar and this also applies to the other side as well because we're doing PX so it's on the x-axis and there's also a bit of space on the other side um and that just makes it look a lot you know if you had it right up to the sidebar and look a bit weird um but we'll see all this uh later when actually um when we actually start like looking on the browser and looking at what we've done so what we're going to do here is pass in children and in our case the children are going to be the pages so um essentially what we're doing is just wrapping every page in this code here in all of this so that the top bar sidebar and also all this styling and stuff applies to every page [Music] um so the next thing we need to we need to add I think would be it really doesn't matter because um yeah it doesn't matter too much because we're gonna basically if we looked at this now it would all be broken uh yeah as you can see it's all broken and because we don't have any of this sidebar and top bar so we need to add both of these anyway so it doesn't really matter which one we do first I think if we do sidebar first um that would be good because that will give me a chance to explain something that's a little bit tricky and to be honest I don't know if I can explain it but um you'll see what I mean now when I do this in part forward ref from react now that's the only import we have from react on here usually we have like used State and use effect for this one just forward ref but it is a very complicated one um unfortunately basically because of this layout here um because of this transition sorry um we're using a custom component as the um sort of parent container I suppose you would call it and usually if you did like let's say you did something like this you had div and then inside of div oh for actually top of the page there um but if you had divs like the parent component it would be fine because this functionality is like built into divs in react however um when we're using a custom component we sort of have to add this ref functionality ourselves um so you see what I mean now um if I just um quickly write this component so we'll do const sidebar already it's looking a little bit different to what we've been doing before so we do const sideband this is where it gets really different we do forward ref and forward ref is actually a function and the function will work like this so we can do the first thing we do is specify the props sort of like how we normally would um so in our case we'll do show nav and the second thing will be ref so we're passing in the ref and then we'll do this um so it's going to give us an error here it's probably going to be component is missing display name so again this is where things are very strange and you might not have seen this before so we'll do sidebar dot this display name equals sidebar so usually components sort of name themselves because if we see if we look at layout here we can see we've got export default function layout now layout is the display name of this component but in our case we don't have that so we have to specify the display name in a separate place um and we're just going to do it here and we also need to export default sidebar side there we go cat spell um so yeah as I was saying this this is a little bit confusing um but it's just because we it's because we're using this transition here we have to we have to pass a ref through um so this transitioners use refs and we have to pass that into sidebar and the way we do that is by using this forward ref function and then we've got the Riff here and so we'll see this in use now um if I do well bear with me one second because we have actually got some imports to do so we do import link and we'll do from next slash link and we've got some icons as well so we'll do import and then we'll do home icon I don't think they'll all complete for us credit card icon and user icon and those are going to be from at hero icons forward slash react forward slash 24 and solid there we go and then one more thing we're going to import use router and that will be from next forward slash router so the first thing we need on this um component is const router is equal to use router so this is going to tell us well we're going to be using this you can do a lot of things with router but we're going to be using this specifically to tell us um what the root is and that's going to allow us to know whether the um sidebar menu item should be active or not depending on the route that we're in all that we're on um and then we'll do return Open brackets and we'll do div so this is where we actually use ref and this is what I was talking about when I said that ref that div has this functionality built in so we do ref equals rep so this is basically what um transition would do if you use div as the um parent instead of sidebar um I tried doing that when I was testing because what I wanted to do was avoid using this forward ref but it actually broke sidebar like quite badly um so yeah we have to do it this way unfortunately with this forward ref function but that's fine you know it's a good it's good to know that this exists and how to use it I guess suppose so that's okay and we'll use class name and this is going to be fixed it's gonna have a width of 56 which is the same as our if we go back here it's the same as the padding that we're using here so this is important to note because you might want to change the size of the sidebar so if you do that you just have to bear this in mind whatever number you change this number two has to be reflected in the padding here otherwise it may overlap the content so just bear that in mind um try and get the menu back on the other the other monitor so w56 we're going to do height full because we want it the full height of the page I'm going to do background why and I'm also going to add a a little bit of a shadow to it just to make it stand out a little bit and we will close that so inside of this is gonna be a bit not tricky um but it's going to take a bit of explaining to do why I'm doing this the way so we'll do div class name Plex justify Center we're going to do margin top six and we're going to do MB so margin bottom of 14 just to give it a bit of space around it um so there's two things here first of all you need a picture so this is the logo by the way and you're going to need a logo to put here um I'm gonna just quickly see if I can drag in a logo here so if I've got public here um you could probably do you could probably actually just use this versal.svg if you wanted to I think that would work um I'm going to drag in I'm going to drag in two things here and you'll be able I'm going to leave a link to the git repository um in the description and maybe even in the top comment so um you should be able to get these images from there but I'm just going to drag these in so we've got fairox transparent so this is a logo that I use um for test projects but also it is actually a logo of something that I'm working on at the moment and so you can't keep this logo because it's my logo but you can use it for this project um when you're just building it I've also got this image here which is mansmiling dot jpeg very nice and we can look at that image it's just a royalty free image of a man smiling which we're going to be using for the Avatar um you know the little profile picture obviously you can use whatever you want and you may actually want to get to a point where you know later down the line in development you can use the users uploaded icon instead of like just um just a royal free image um but yeah that's that I've looked down the line we'll be covering that in this video so this is the part that I'm going to need a bit of explaining to do um basically when you do images in next.js you usually you usually use something called Next image however I have found next image to be the biggest pain in the ass ever like uh there isn't many things that are really well I get annoyed with development a lot because obviously running into bugs and stuff is quite annoying but this next image thing isn't a bug it just doesn't work that well I don't think and maybe I'm just using it wrong but um yeah I'm not using next image for this because I want to set the width and height and stuff like that and doing that in next image is really annoying um to do because you had to be well you'd have to be specific specific in this case anywhere but yeah it's just annoying um so I'm not going to use the next image but I mean if you really want to follow the advice of next JS you can use that if you can get it working that's great but um yeah I'm just going to be doing it my way and um what I'm going to do is add an image here quickly so I'm going to do add add sorry I'm gonna do image IMG class name and I'm going to do with 32 and the height is going to be Auto um I'm going to set the sauce to slash ferrox transparent dot PNG and you also have to set an ALT um next GS requires you set we didn't require you to it just gives you a warning if you do it set an alt so I'm just going to set the alt to company logo and that should be fine and that's a cell closing tag now it gives us a little yellow line which is nice um so it says do not use image use image from next image instead now I'm not going to do that obviously so to get rid of this yellow line we can wrap this in picture so if we wrap this in the picture tag um it basically says I think it says on the documentation somewhere that if you're not going to use next image at least use this picture tag I don't know why exactly I don't know if it's just good to follow that like um it's a sort of standard type thing but yeah that's what you have to do to get rid of the yellow line so that's what I'm gonna do um because I don't want to use next image so let me just change sorry let me just change it again by default I use four spaces but yeah in this case I'm just using two so I'll just change that to two so the next part is the uh links part so what we'll do is we'll do div and we'll do class name it's going to be flex and it's going to be a flex columns it's going to go downwards um instead of cross which Flex does by default so um we've got a lot of classes to do here which is going to be fun so we need Link Link component and the href of this is gonna be just forward slash and we can close that and inside of this we're going to have a div so let me just um do div and we'll do I'm going to do this on a separate row because there's quite a lot going on here so I'm going to do class name and curly braces and inside of here we'll do PL Dash six P Y dash three MX-5 we're going to make it rounded um obviously you could do what you want with the styles by the way I didn't really mention this but all the colors that we're using um the fact that we're making it rounded it really up to you what you do with it you know you might want a more sharper style so you might not want to do rounded you might actually want to make it more rounded it's completely up to you what you do um tech center you can use what I do as a base and then just build upon that as well if you want to do that cursor is going to be pointer so we want it to turn into a pointer when we um hover over it mb-3 it's going to be Flex we're going to do items Center and we're going to transition the colors in this case so we'll do Transition colors [Music] and what we want to do is some string interpolation um so we'll do router Dot path name and we're going to check if that's equal to forward slash and keeps doing that if it is then we will set the background to Orange 100 and the text to Orange 500 and if it isn't we will set the text to Gray 400 we'll do hover background orange 100 and hover Orange 500. okay so a lot going on there but um yeah that's that I mean that's that's the bulk of it done just a little bit more for the um the link to go so we'll do another div inside of that div and then we'll do class name we'll do MR2 and this is going to hold the um icon so we'll do a home icon in this case and we'll do class name and we'll just do H5 with five so we'll give it a oh hang up sorry that's um that's another self-closing one so we don't need it to do that we can just do forward slash like that um so yeah H5 width 5 so that'll be uh the height will be 1.25 REM and same with the width so we'll do another div below that and this is gonna we just do a p for this sort of paragraph tag and that's just going to say home now we can save that and um that is pretty much all there is to it now obviously you're probably not going to have one um menu item so there's two ways of doing this and for now at least you could either Define an array up here so we'll do like const uh const nav items and then have the array of nav items so it's probably going to be an array of objects and then you'd have like name I don't know whatever and then like URL and stuff oh I don't know where that came from but um and then you would basically do down here where it says link above this you would do like um now items.map and then you would Loop through them and use the um array of objects to easily create all the number items you need and you would just use the values in that object to fill out the icon the URL and the name in our case though we're going to go the easy route that we're just going to actually just copy and paste and then change the values just so we can get we're only going to do it twice so we'll do we've got this initial one um we're just going to copy a link below that and then a link here and what we'll do is we will change these to something different so we've got a count if I can spell that right with two C's um then we need to change the path name here to the account as well the icon is going to be user icon and the name is going to be account I should probably just copy and paste the um that part so if we do billing and then if I copy paste that I can do filling oh no I just copy it I do this all the time I copy and paste something and then accidentally copy when I want to appear so I end up just copying nothing so there we go paste um do it here as well but I'm going to change that to a capital and then the icon is going to be credit card right so that's pretty much done for the sidebar um obviously we can't see it yet because we're just going to get errors I think yeah [Music] um think that's all fine yeah so that'll probably all get fixed when we add top bar so sure now oh okay that's interesting so actually it doesn't look like we even use this sure now so it's probably a bit pointless at the moment um yeah we might not actually need that sure now so we'll leave it there for now it doesn't really matter um but yeah I don't think we're actually going to use that so we can move on to the top bar which is like um the third and final component and once this is done our dashboard is going to be done essentially so that's quite exciting um we've got quite a lot to import here so let's get going we've got import fragment from react and that's the only thing we're going to be getting from react uh we've got quite a big one here I'm actually I'm gonna um I'm gonna copy and paste this one it probably wouldn't be um too necessary because sometimes when you use um certain things so like in our case these are these are um icons that were important here if you use them in the code it will automatically import them for you so that might happen and we we probably could do that but I'm just going to import them initially um but Azure uh working through you know on your own it may just you may not actually need to type all this you might it might just import it for you automatically if you're using vs code at least um but I'll go through this and you can copy it as well so we do import and then we're going to do from at hero icons forward slash react forward slash 24 forward slash solid we've got bars three Center left icon pencil icon Chevron down Icon Credit Card icon and Cog 8 tooth icon and we have another icon in part which is a bit smaller so that's all right and it's basically the same thing XX instead of solid it's outline and we're getting Bell icon and check icon so hopefully hopefully you can see this if you need to pause the video and copy this stuff down that's completely fine and we're also going to be importing some stuff from headless UI so I'll actually write this one out so we'll do import menu um transition so we've got another transition to do I think we've got two transitions actually but I think the two transitions are the same technically so we can just copy and paste them so that's fine and we've got pop over uh which is used for the notification stuff so we'll do import link from and then we'll do next slash link there we go so we'll do export we don't need to do any fold ref stuff here so that's that makes things a much uh much much easier export default function top bar and we're going to pass in and we're actually going to use these ones by the way so we've got sure now and set show no okay so we need to do a return and open open and close brackets and then we'll do div and in this div we're going to have class name and it's going to be curly braces again because we're using string interpolation so we'll do fixed width Dash full h16 Flex justify Twee items Center and we're going to do Transition all because similar to what we did for the um the body so like the actual page when you open and close the sidebar we want the top bar specifically the you're only really going to see the icon moving so there's an icon that's going to open and close the sidebar so when we when the sidebar closes we want that icon to move as well but move move you know smoothly um so that's why we're adding transition here and we're going to add the duration as well which is going to be the same as the stuff we did before so duration Dash and then in square brackets we can do 400 MS and then we'll do dollar sign sure now and if the nav is showing we're going to do pl-56 let me just wrap that in course and then we do empty quotes So again similar to um I think it's on layout so yeah we have the pl56 here and we've basically got the same thing for top bar as well um so the next thing we do is actually going to be this same as this um this px16 here so what we're going to do is do um div class name and then pl-4 and mdpl-16 so we're all we're doing a similar thing to what we did here for this div except we're doing it only to the left because we only want um the icon that we're going to be adding here so this uh bars three Center left icon um we want we only want that to have the padding applied to it um when the when the sidebar opens and closes we don't want to affect the padding on the left side so we're actually going to add so we're adding padding left here manually and then we're going to add a padding right to the next div we add um so that'll make more sense in a second so we'll do class name on this and we'll do h8 width a and we're also going to change the text color so we'll do text Gray 700. cursor pointer um just so it looks like something you can click on and then what we'll do is we'll do on click and this will do um on click we want to do set sure now and we want it to be the opposite of whatever sure now is at the moment so sure navage true we want it to be false and oh this is a cell Closing one again I keep doing that I should do just do this so as I mentioned a second ago um we added the padding left to this div and we're going to be adding padding right to this one um at the bottom now yeah I'm looking at now and it does make sense why I'm doing this yeah okay I get it I get it sorry so um yeah we need to add the padding um separately because we're using justifying between um so what we could have done is below this div we could have added another div that was um that had the padding on it but that would have yeah it would have made a thing a little bit more complicated so we'll just do this instead so we've got div and this will control what appears at the right side of the navbar which in our case is um the user's name profile picture drop down menu and notifications so we'll do class name Flex items Center PR for MD PR and then 60. and then close up so first thing we we can add is the notification menu so this is going to use popover and yeah there's a lot to it although I think a lot of it's going to be stuff that you copy and paste so that's not such an issue and basically we've got a similar situation to the links where we have several things that are basically the exact same so we can just copy and paste them like you know a few times and that should be fine so start off with um pop over and that's going to be class name relative so we're making this relative and yeah we can close that and then inside of that the first thing we've got is pop over dot button and then class name I don't know why did that class name is going to be equal to that's right outline num so we don't want an outline and by default Tailwind adds outlines to things that you can click select buttons and inputs and stuff um not a huge fan of that but if you are then you can keep the outline it doesn't really matter too much and we'll do mr-5 um if it's medium or above we'll do Emma a we'll do cursor pointer and text gray 700 and then inside of the button where you can use an icon so we'll do a bell icon and that is going to be class name H Ash six and width dash six so w six and that's going to be self-closing again and now we've got another transition um which is exciting but I think it's the same transition that we use on menu which is going to be a bit further down so yeah I think it is which makes things a little bit easier for the the menu at least so we'll do um transition and obviously by the way if you don't want to write all this out you can copy it from the GitHub if you still want to follow along but don't want to write it all out which I completely understand um you can just copy it from the GitHub that's completely fine so what we'll do is a minute we'll do that and then on another row we'll do all of the code so we'll do as equals and it's going to be the same as before we'll do fragment this time we don't have like a show so that you can leave that out and enter is going to be transition ease out and the duration will be 100 so we'll do enter from and that's transform scale 95 oh and then we'll do enter two and that's going to be transform scale 100 and now the leave codes we do leave equals transition easing and the duration is going to be 75 would you leave from and do transform [Music] scale 100 and leave two it's going to be transform again and scale 95s it's kind of like the opposite of the enter stuff so you've got enter from is transformed scale 95 and 2 transform scale 100 but then leave from each transform scale 100 and then leave two so I guess from my understanding and I'll be honest with you I'm not you know I'm not an expert on the sort of CSS transition stuff um but I'm guessing that these represent the state that it's in so like when it enters from it starts off at 95 scale and it basically at the end of the enter transition it's going to be at scale 100. and then when it when it starts to leave it's going to start at scale 100 and then by the time it's left it's going to have reached um 95 scale I think that's how it works um you know you obviously if you're looking at that yourself you wanna but um animations and stuff aren't usually something I I spend a lot of time on when I'm working on websites although they do look really good um but yeah it's not something I I invest a lot of time in to be honest so now we've got the main part of the notification stuff so we're going to do um pop over dot panel and we do class name and it's going to be absolute we're going to do minus right 16 um all this you're going to see this um and maybe not know it's got what's going on basically as I was doing it um as I was creating this dashboard I was testing out um the position of the notification box and making sure that it appeared properly on both desktop and mobile so this is what I came up with um for positioning it so we'll do SM right four so from smaller screens it will do right four but then on mobile it does minus right 16. and that should make it show up we'll do Z50 just to make sure that it shows up above everything else um mt2 margin top two background white we're going to add a shadow to it as well so Shadow SM we're going to make it rounded and then we're going to do Max width extra small by default and then on devices that are small or above that we'll do Max Max width SM and then we'll do width screen now this is a bit of confusing one but yeah in order to get it working properly I had to do with screen even though the width isn't actually going to be the width of the screen um it's actually going to be this so it's a bit of a weird one but I had to do that to get it working um to get it actually showing up so there we go and we'll do um yeah the content inside of it so we'll do div class name and that's a relative p-3 I don't know if it needs to be relative uh to be honest with you but I mean I've just added it there I'm not actually sure how necessary that is to be honest with you um I don't know why it's highlighting here it keeps doing this have I done something wrong no I think I'm good all right so yeah relative p dash three then we're going to add the little bit at the top that says the notifications and then also a button to mark all as red and so we'll do div and we'll do class name so Flex justify between item Center and we want to do width four we want it to be the full width I have the notification box and then inside of there we can do P A P tag and we'll do um class name text Gray 700 and we can do font medium and then we'll just put notifications as a text notifications and we can do an a tank below that and do class name and we'll do text SM and then text Orange and we'll do 500 and the hit ref for this is just going to be a hash so we don't actually we don't actually have um any functionality any functionality to mark all is red so we can start to leave it as is Mark all as red and that's it for the little top bit um now we've got the actual little notification things themselves so we'll do div and the class names here will be mt4 just to add some space between um heading part and this part we'll do grid we'll do Gap four we'll do grid calls one and we're going to do overflow hidden just to hide any text that might go over the Box so this is the part that you um well this is like the notification part so you will be able to copy and paste this at some point uh once we've written it so you'd have to write loads of times so do div and this will just be a flex box inside of that we will do two things so we've got div will have the um check mark that shows up and then also we've got text as well to put in there but we'll do the check mark first so we'll do class name rounded full shrink zero so this is important and if you don't use shrink zero it sort of compresses the um check icon and it looks like it looks a bit weird to do shrink zero the background is going to be green 200 and we're going to do h8 oh H dash eight width Dash 8 will do Flex items Center and we'll do justify Center as well and so what this is actually doing is positioning the check mark which we're going to add now so we'll do uh check icon and we'll do class name H dash four width Dash 4 and do text green and we're going to do 600 in this case so we're gonna do it a lot darker than this um green here and that's a self-causing what's up that's the icon and now we'll add the text so we'll do div and we'll do class name we'll do ml-4 to add some spacing between the text and the check icon and then we'll do p class name and that's going to be font medium text Gray 700 then we can close that and do notification text so this will actually be the sort of heading of the notification so obviously um notification title sorry um so obviously you can put it whatever you want there and when you actually add the functionality to your sort of let's say your live dashboard that actually has notifications obviously you'll put the title of the notification there and then the next thing we want to do is the actual text of the notification so we'll do text Dash SM text Gray 500 this time so we want it slightly lighter than the title and then what we're going to do is do I think we do trunk here here and that should be fine um basically truncate the text yeah so it gives us this um Tailwind gives us truncate class which um yeah overflow hidden text overflow ellipses and the white space no wrap so when the text goes outside of the box by default I think text usually wraps but in our case we don't want it to otherwise we could have like a huge block of text um which would look weird so we just wanted to cut off the text if it goes outside of the box um and then for this it's just yeah test notification text for design and that's it so that is our notification box and so this part here where it's got the div class name Flex if we try and get there we go so this would be the part where you would Loop through usually so you do a map but in our case with being a bit lazy and we just um I think I did I think again where I just copied I just copied nothing um hang on Ctrl C and there we go so what if you want a few of these um doesn't really matter too much and yeah so those are all our notifications um and that'll be uh um notification pop overdone so yeah there's a lot going on there but um it's quite nice if you obviously if you don't have notifications on your dashboard you can completely ignore that part really um but yeah quite a useful thing to know about that pop over um I think I'm Gonna Do videos in the future on each of headless uis sort of utilities they provide um each of the sort of what would you call them components yeah there we go each of the components they provide and going through how you would design them and use them and stuff like that So Below pop over we're going to add our menu so this will be the main menu that where you would like navigate from um hmm obviously we have the um Tech that we have the sidebar that you would use so this menu would be more for like maybe having stuff related specifically to like the user so maybe like edit profile would be one of the options on this menu but really you can add up whatever you want obviously so we're going to do as div on the class name is going to be relative inline inline block and text left so inside the menu we're going to have div I don't know why it does this actually it keeps highlighting stuff like it is now and I'm not too sure what that's actually doing um I don't know why it's doing that I haven't added something that doesn't I don't think anyway um just vs code being a bit weird again so menu Dot and the first thing we do is going to be a button and that's going to be class name we'll do inline inline Flex We Do width full with Dash full justify Center the item Center there we go and then this button is going to hold um a couple of things actually you can hold a few things it's going to hold our profile picture our name and also an icon um so we'll start off with a picture so again we're not using next image we're using picture um which next doesn't want us to do but uh yeah it's honestly next image and I hate working my next image um I don't know maybe the devs will see this and be like and put me right but yeah I'm not a big fan of next image to be honest so the sauce is going to be smiling Dot uh jpeg in our case in my case anyway that's what it's going to be but for you it'll be whatever image you have um available so class name and obviously you can download this image from my GitHub repository if you want so we'll do uh rounded full and that'll make it a circle we're going to do h8 we're going to do MD colon mr-4 blue border two we'll do border White and we'll do Shadow as well Shadow SM and the all we can just do as a profile pic picture and it's gonna be self-clausing and below the picture tag we will do span class name is going to be hidden so um this is going to be hidden on mobile devices but then on desktop we'll do block to show it again we'll do font Dash medium text Gray 700 and then obviously you can put whatever you want here as your name so I'm just going to put resin and below that we will do a Chevron icon Chevron oh not the check icon all right Chevron it'll be specifically the Chevron down icon and the class name for that is going to be margin left two it's going to be H4 width or W sorry Dash four and then text Gray 700 and oops that again is going to be self-closing so that's the menu button done um below that we have something I was actually dreading but now just remembered that we already technically have this it's the transition so we can copy this transition up here which makes our lives much much much easier sorry I'm still getting used to this new mouse I've got um so things are a bit janky um so Pierce that things are a bit messed at the moment but I'll just fix that in a second so we'll close that and then I'm going to save which will reformat my code for me which is nice um so inside of this we've got the menu items which there actually isn't a lot to do here which is good so we've got menu dot items that's going to be oh sorry that's going to be a capital items and then class name so this is going to be absolute and we're going to do right uh right dash zero width is going to be 56. Z is going to be 50. Mt is going to be two so just add a little bit of space between the top bar oh or specifically the the button and this button up here and the box that this creates we're gonna do um origin top right and we're going to do background white we'll do dark oh hang on a minute sorry I was adding stuff for um dark mode there which I haven't done yet but if you want a video on dark mode like how you would add dark mode to this dashboard let me know and I will do it um I've got some code left over I think that has dark mode stuff um so we're going to do rounded and Shadow Dash and we can close that quite easily and yeah we've got it keeps doing this why is it I don't get why it highlights like that I don't know I don't know what it's it's trying to tell me there um so inside of this we're going to do a div and this is going to create just it's just going to create some spacing so we'll do px1 uh oh we can just do P1 actually yeah p dash one and that's fine so we're just gonna do padding on on all sides so inside of here we've got all the menu items so again this is another case of you could create like an array and loop through the menu items or you could just copy and paste them in our case we're only going to have three menu items so we're just gonna copy in person again and that works fine for us um for what we're doing so menu item nothing on this actually um this styling is going to be on the link that we're adding here so we've got link and we'll do hit ref and this is going to be hash as well obviously you'll put whatever the href is for um whatever page you want to go to so we'll do class name let me Flex we'll do hover and we'll do background Orange 500 hover text why and then text Gray 700 rounded oh rounded and we'll do p P2 text SM and think is that it sorry again I'm getting used to this new mouse so we've got a thing here called group now I don't know so yeah I guess this is used transition colors position colors and items Center so there's a lot going on there um but fairly simple stuff basically we're going to have a pencil icon I don't know if um text hover I'm just seeing I don't know if a group is actually necessary on this one to be honest with you I don't know if it asks because we're not actually changing the the color of um the pet the icon that we're using so I don't know if a group is necessary I'm going to leave it in there but um yeah it might not actually be necessary for what we're doing so okay all right there we go okay there we go so I'm getting used to this mouse it's one of the um the Apple Magic Mouse that you can get and you can sort of do all the track bad stuff but on the mouse so it's a bit I'm getting used to that um it's a bit it's a bit uh confusing to use but yeah the first thing I'm going to do is um add an icon here so pencil icon class name H for width 4 and then we'll add some margin some margin two and then we'll do edit so that's our first menu item the next the next uh two items and again you can I'm gonna add in two sort of I'm adding two more arbitrarily but you can obviously add as many auras few as you want so I'm just adding two more just for a sort of example purposes so this will be billing and it's going to use a credit card Icon Credit Card icon this one is going to be settings and that's going to use COG a tooth icon and I think I think that's it for top bar which bit and that would basically mean that's it for everything so let's see if this works oh look at this so it seems to all be working there we go so yeah that's um that's the dashboard pretty much done what I want to do now is just add on this index.js sort of a little example of what you might do for a page so let's get rid of what's here now and we will do um brackets and I'm going to do well okay I'm going to do the empty ones just for now that's fine um and what we'll do is we'll add a title on this page so we'll do uh class name text Gray 700 we'll do text 3 XL we'll add a margin bottom of 16 and we'll make it ball and this is going to be so this is going to be the title of the page so obviously this will change depending on what page you're working on so like in my case I'm just going to call it dashboard and I also want to add some placeholder stuff just to give you an example of what it could look like so class name I'm going to use grid for this so we'll do grid and then LG so for large screen it's going to be grid calls three and there's going to be a gap of five between them and we'll do mb16 um so we'll add margin bottom to separate any content that goes below it um so we'll do we can just copy and paste what I'm about to do so I'll do div class name rounded background white we're going to give them a height of 40 initially just because there's no content in them so we need to do this and we can add Shadows to them and then um you don't really need to put anything inside of them if you just grab these and then we're going to add two more of these like that and let's add one more thing below this which is going to be sort of similar to what we just did we'll do class name grid again and we'll do call one background white hitch so the height is going to be 96 so quite a big one um and oh Shadow Dash SM and we can close that so if we save that and we go back to our screen you can see we've got three boxes here and a big box here so that's pretty much it for our dashboard um everything's quite smooth we've got the correct spacing everything sort of lines up which looks quite nice and we've got notifications profile picture with our menu here and we can try to inspect we can do smaller screen so it gets yep so it changes and this is what I was talking about earlier about the overlay so the sidebar overlays the content but on um desktop it sort of displays besides the content so it's sort of included in the content as opposed to an overlay like it does on mobile and I think that works better obviously on mobile what you could do is have a completely different menu um I've sort of done this in a way where we can use the same sidebar for mobile and desktop which is sort of trickier to do but once you've figured it out it's quite nice to use and so hopefully that's useful for you and yeah that's pretty much it so thank you so much for watching uh if you enjoyed the video leave a like um suggest any stuff you want me to do in the future in the comments and I will see you guys next time goodbye

Channel: Rettson

Views: 16,038

Keywords: Responsive React Admin Dashboard, react admin dashboard, react admin panel, admin dashboard design, react ui design, react design tutorial, react for beginners, react project, react tutorial, react admin, react tutorial for beginners, react admin theme, admin panel design, react website tutorial, react, admin dashboard in next js, tailwind css admin dashboard, headless ui react, reactjs, reactjs tutorial for beginners, admin dashboard, react js tutorial, reactjs tutorial

Id: ypRJ9ScLmco

Length: 84min 7sec (5047 seconds)

Published: Sun Dec 04 2022