React Responsive Admin Panel Tutorial | React Admin Dashboard Template Design | For Beginners

[Music] [Music] [Music] [Music] [Music] um [Music] [Music] [Music] hello futuristic developers today you are watching one of the best multi-purpose react responsive admin dashboard tutorial over the youtube with a lot of cool features by following this project you will be able to make complex uis logics between the components and many more very easily but before starting the project let's have a look what we are going to learn throughout this tutorial by following this tutorial you will learn how to make react project from scratch we will also see how to implement the use state look in react and to make the reusable components we will use the map method of javascript many times in this video for the beautiful icons and pngs we will use the icon scout library which is the famous one we will also play with the apex charts to make the beautiful and responsive charts and to make the smooth transitions between the components we will use the most advanced library for animations in react called framer motion and for more specific we will see the most interesting topic animated shared layout of framer motion to make expandable cards we will also use a material ui table which is the component of material gui library we will also try to make the responsive and elegant design using css3 still there is many more to explore throughout this video so until i roll the intro make sure you hit the subscribe button and also like the video and after watching the tutorial don't forget to leave a comment let's start [Music] and here i am in a blank vs code directory and mostly when we start a react project we write something like npx create react app and or maybe yarn create react app but it installs too much extra stuff with the default structure that we never gonna use so to avoid this problem i have made a link of github repository here with the name dashboard starter you can just copy the link and inside your terminal write git clone and paste the link so by cloning this link you will only install the required files okay so it will not install the extra stuff so i am just going into its directory open the vs code inside this and close the previous one okay here you can see we have a source folder inside the source folder we have images folder okay so in images we have some images that we are going to use during this project and we also have app.js app.js have nothing instead of some text like subscribes and keeps code okay and this is the total setup for our new app i should make the text bigger okay in the app.css i have just declared some variables means some color shades and shadows etc that we probably use during this project it's not important that we will use all the variables during the project okay so let's start the project when we try to start the project it will not start itself because we have no npm modules installed so to install them i will write simply yarn so before starting this command i want to mention that inside the package.json i have mentioned dependencies like icon scout react vueny icons and framer motion apex charts and many more so by doing so we will not have to install packages one by one during the project they all will be installed at once during the start okay so you should also do the same stuff if you clone the repository just type yarn and hit the enter okay and it definitely depends on your internet connection so let's wait so here all the packages and dependencies have been installed now it's time to import the phones so i am going to google phones and searching for a phone name inter just like this okay now here i am copying its variant 400 and 500 which is medium and 700 which is bold okay so now to import them in our project i just copy this complete link here and i think so okay yeah i just copy this link and inside my directory here in index.html just below this meta tag i am pasting this okay so let's make it clear for you guys now formative code okay here you can see we have the inter phone with the weight 400 500 and 700 for more the default react project have some margin around its body so to remove this i am saying the body will have margin zero so it will remove all the margins now let's start our project here i am just typing yarn and then start here you can see our project has been started successfully you can see the text subscribes and keeps code but the font is not applied till yet okay so now install the font in our project i will go to the app.css here and for the most parent ad class you can see in app.js the most parent is app so i am targeting this class by importing app.css in app.js okay so here i will say phone family so to write the phone family i again go to the google phones and here you can see they have mentioned how to import this phone so just copy this and simply paste this now save and see here you can see the text has been changed means it's working fine it's time to make the component for our dashboard so i just close the extra stuff here and here is our pre-built version that we will use as a reference during the video now let's first of all make the background and some glossy look to our whole project like this you can see we have a shade for the background and then a glass like div on this background so to make this on the app.js i just remove this text and make an other class with the name app class okay now everything will lie inside the app class i'm closing this and opening css side by side like this now first of all for the dot app so for the background of dot app i am just pasting a gradient like this it's basically a gradient of three shades you can just simply copy and paste this after this i say the height of our app will be 100 view height or you can say 100 percent of you okay and forward its display will be flags now let's see here we have okay and i think i should remove the zen gibbs code okay i have not save this now you can see it's clear now okay after this for the app class i'm making some styling dot app class like this first of all i'll say its display will be grid like this and its height will be 97 percent of the app okay and similarly its width will also be then 97 of the app like this and it will have the border radius of 2 rem now let's see okay i have to declare the color for this ad class so we can see its boundaries so i am saying the background will be our variable which we have the name glass now let's see here you can see but it's not in the center of our background because we have made our app as the display flex and have not make it justify content in the center and align items in the center now it will be in the center you can clearly have the idea okay if i make it on the full screen still it's not too much visible because it's very light color but you can feel the difference okay okay for more i will say our app class here will have the overflow hidden so nothing will be outside this div throughout the project it is just to make sure everything will work correctly okay now if you notice in the pre-built version we basically have the three parts of the dashboard the left side which have the sidebar the middle section which mainly have the dashboard cards and the table and then the right side which have the updates card and the customer review chart so i will divide my app class in the three parts let's see here as we have made its display as grid so i say the grid template and column will have 11 rdm as the left side and the middle will be the r2 and for the right side it will have the 20 rem okay now to feel the difference here i'm just inspecting it by ctrl shift i and now i will go to the elements tab and in the elements tab i am just selecting the app.class and enabling the grid section here we have the headings for the grid but for now they are not making the sense because we have nothing inside the app class so if i just simply make the three divs like this is the first one and then these are the three now let's see here you can have the clear idea this is the left side this is the middle and this is the right which will have the updates and the chart it will have the dashboard cards and it will be the sidebar of course like this one okay i am just removing these empty divs because we have to make components here and to make the different components here inside the src i will make a new folder with the name components like this okay inside the component our first component will be the sidebar so i have made an other folder with the name sidebar and inside sidebar i have a file name sidebar dot jsx similarly i will have an other file with the name sidebar dot css now close the app.css and i'm pinning the sidebar.css towards the left side for the sidebar dot jsx i am writing r a f c e which is a shorthand method that comes with an extension named es6 you can just simply install by going here in the extension section of the vs code and here i am importing its css by import sidebar dot css okay now let's import the sidebar dot jsx component in app.js so here simply write sidebar okay it will auto import the sidebar component now let's see if we have this text app then it's mean it's working correctly yeah here we have the sidebar text you can see here i should not zoom in okay but you can have the idea it's here and i think i should also make the empty divs so it will always remain in some alignment okay yeah now let's make the sidebar component here i am removing this text and just make this a closer for now and make this textbook bigger yeah now div dot sidebar first of all our sidebar will have our logo at the top so for the logo i am making an other div with the name logo like this and inside the logo we will have an image and with an image we also have the name of our dashboard or our shop or anything you can say so for the name i'm making a span okay so first of all let's import the image to import the image as i have mentioned earlier we have the images folder here and here we have the logo png okay so i am going to import this i will say import logo from uh just go outside and inside the images and then logo.png like this now for the image src i just simply write the logo here we have the logo png okay now i have made the name as the shops so for this i am writing sh and then inside and other span i am writing o and then again the ps why i have written the o inside and other span because if we have a look at the pre-built version the o have a different color while the remaining text have a a kind of black text okay so to achieve this effect i have made the o inside and other span and inside the sidebar dot css i am targeting the parent class and making its display flex and then the flex direction of column and its position will be relative and it will have a padding top of 4 rem so everything inside the sidebar will have some margin from the top corner and the margin will have the 4 rem height okay and then anything will be happen with the sidebar will have a transition of 300 ms keys okay let's save and see here we have this one it's time to fix our logo div okay so after this i will target the logo div which lie here here this is the logo div so i am targeting this one so dot logo and it will have height of five rem and the font weight of bold of course and after this it will have a font size okay so i am declaring its size around 22 pixels and as i have made its display flex the png and the name is too much close to each other so here i am declaring some gap and gap of almost one rem so now they have a distance between each other after this as we have made display flags so i am making its line item center and also justify content in this center let's see okay still we have to declare its height because it's too much on the top so here i will say its height will be the four percent of our total sidebar okay so let's see what's problem here okay so here we have the sidebar and here we have okay we have made an extra s here now save and see yeah now it's in the correct position it's time to scale down the logo png so after this logo i'm targeting the image inside the logo so for the image i will say the image inside the logo div or if you hover over this expression you can see it's saying it will have an element which will have the class logo and then inside the element if there is an image then it will be targeted by this css property and we have this one here inside the logo div i think you grab the idea now for this image i will say its width will be 3 rm and its height will also 3 rm so it means it will be a perfect square like this now its time to style the name okay so i will say inside the logo there is a span and then there is an other span so what i'm basically do i am targeting this o to change its color and you can see if i hover there will be an element which will have a span and inside this there will be an other span okay so now for this i will have the color pink i have declared this variable in app.css you can check okay so here you can see we have changed the name of o and i think you grab the idea of grid system so i am just closing the grid here okay i'm basically closing the inspect okay so now it's time to make the menu items let's see how i'm going to make this for the menu i will make a comment with with the name menu and inside the menu i will make a div with the name menu and of course inside this div we will have individual menu item so let's first of all make a menu item okay so menu item like this just make it more close okay here first of all i will have a div for the icon of menu item so i'm just simply making a div and for now let's only say there will be an icon and after this i will have a heading of the menu item and for now let's see the dashboard here we have this we have to make this display flag so both children will be in the row direction and we have to give some margin top so let's first fix this and then we will import the icons so here i am making a comment as menu and first of all for the menu i will give a margin top of 4 rdm and then it will have a display flex flex direction of column because we want all the menu items in the column note in the row because row is the horizontal like this one and the column is like this direction so we want menu items in this direction therefore i am declaring flex direction column and then after this the gap between the items will be 2 for the menu item i am making the display flex and align item center and the gap between the heading and the icon will be the one rem so cap one rem like this okay now let's save and see here you can now have clear idea it's time to import the icon so to import the icon i will use the icon scout library so on the top of this i will say import uil state which is the name of an icon and then i will call the library you can call this library by writing at icon scout react an icon okay now instead of writing this i will say url state icon okay here we have imported this icon successfully but let's wait it will not be a good idea to make all the menu items manually one by one here inside the menu okay because it's not the real taste of using react in react we have to make the reusable components so to achieve the reusability and avoid this recursion of same thing means we have to do something like this by copy this and paste many menu items and then we have such a structure and we will have too much stuff here so we have to avoid this okay so how we are going to do this for this stuff i will make a folder inside the src and this folder will have a name data and inside the data i am making a file with the name data.js so inside the data.js i will declare many type of objects that we will call one by one during our project to make different types of reusable components so i will do every stuff step by step so first of all let's start by the sidebar so here i am importing some icons from the icon scout library like this okay as we have imported uil state icon from here you can clearly see so i am removing this from here and i have imported this in sidebar imports okay addition to this i have also imported many more icons for our complete sidebar after this i am making an empty array for now sidebar data okay and now in this array we will declare the data of every menu item if we have a look at the pre-built version you can see every menu item have two components first is the icon and second one is the heading of the menu item so it means the every object for the menu item will have the two components so the first component will be the icon and the second component will be the heading of menu item so similarly i will make many more objects inside this array for the different menu items like this one for the orders this one for the customers this one for the products okay this uil state uil clipboard all are not just simply strings these are the icons that we have imported here for more i am importing the analytics and so just save this and inside the sidebar first of all i have to import the sidebar data as you can see i have written here export means this file will produce this array in the result so to import this here i will say import sidebar data yeah it has auto suggested me so just close this and for now make it close okay now instead of writing this i am just removing this whole menu item and i will save it right through the sidebar data and for the iteration i will use the map method of javascript and for the map method there will be an item in the return of each iteration and i think so that they should be in double breach okay so there will be an item and there will be an index in the return of each iteration now for the each iteration i will making a return statement and then in return we will have a div this divi is basically that one we have made for the menu item like this one okay do the same stuff as i have did before the first one will be the png or the icon so i will say item dot icon you can see here we have the icon key okay so here i am calling this key item dot key and after this i had a span inside the span i will say item dot heading here we have to say as the sidebar data not the sidebar okay now let's see here we have made a complete menu items in the sidebar it's time to style them but we also have to make a sign out icon okay so first let's make it after this iteration i will make an other menu item manually so just give it a class name of menu item and then inside this menu item i will say url sign out alt okay and now i will i am importing it manually here m4 now let's save and see here we have this icon for the logout now go to this styling okay so for the menu items i am making their height 2.5 rem each and then they will have a margin left of 2 rem and after this the position of each item will be the relative and relative to the parent sidebar which is also relative now i am declaring same transition that everything will be happen will have all 300 ms e's like this one here you can see they are in a very beautiful alignment okay i have to change the font size of these items so the font size will be 14 pixels moreover when we hover each item they should be a cursor pointer okay so i will say dot menu item on hover will have the cursor pointer yeah and after this if we have a look at the pre-built version we have this beautiful pink background on the active okay on the active menu item so to make this i'm making an other class with the like this and i am saying its background will be variable active item like this and they have the margin left of zero okay now to see the results i have to make one of the item as active but as we are iterating so let's make all the items active just we will fix this okay okay now their border should have some radius so to make the radius they have the border radius of 0.7 rem now it's looking more clean and we also want this dark pink div okay so to make this i will make the before pseudo element for the menu item and most basically i am saying the active class have a pseudo item before and it will have a content none like this empty and have a width of 8 pixels and height of 100 of menu item like this and its background will be pure pink okay so the background is pure pink like this one now to make only one menu item active at one time i have to use the use state hook of the react so here i am making const selected set selected and then i will say import the use state hook from that react and for the default it will have the value 0 0 means the first item will be the active on the start okay as you can see we have not implemented any logic for these indexes so let's first make them as we are also returning an index on each iteration so let's use this first of all i will remove the warning by saying the key will be like the index and now i will not make every menu item active instead of this i will make a logic on the class name i will say if the selected number is equal to the index of current menu item then return the class name of menu item with the active class okay and if it is not then only return the menu item so this is just a very simple logic to do this stuff as we have the index zero so now only the dashboard menu item will be active now you can have the idea here okay now how we will change the active menu item on click so to do this stuff here i am making a function or you can more specifically say an on click event like this and for this event i am saying set selected equal to the index of current okay so what it will do whenever and menu item is clicked then the selected variable or the cons you can see the constant will have the value equal to the index of that menu item so it will become active now let's see you can see how easily we have implemented this but still it has some problem with the margins of active item because it's uh something like left side okay so to fix this here for the active i'll say its margin right we will have some calculations like 1 rvm minus 8 pixels so why i have made the one rm as if you have the idea here we have the margin left to rem so i am making its half one rem and then subtracting its width of 8 pixels from this so it will make it equal it's just a simple math okay now you can see how clean and how they are in order the last task is to fix this okay we have to make it a little bit more towards the bottom i will say the menu and then the menu item like this and the last child of type menu item position absolute like this okay and after this it will have bottom 2.3 rem and it will have a width to 100 percent like this let's save and see so we have completed our sidebar section it's time to complete the middle section so for the middle section first of all i am closing all these extra files here and then making an other component with the folder name main dash dot csx like this and then i'll make an other file inside this with the name main dash dot css and its name should be folder name should be only main dash and then here inside this there will be a jsx file so like this one okay now in the main dash dot jsx r-a-f-c-e and then i have importing its css so import main dash dot css now inside the app.js i will make this okay so i will remove this div and here i will call main dash like this okay now let's save all the files and see the results yeah here we have the heading main dash means it's working correctly now for the main dash dot css i just give it uh only some basic styling like main dash okay first of all we have to make its class so here just make me dash okay and then here i will say it will have the display flex and flex direction of column and that justify content space evenly so if i write here space and then evenly just like this okay now what we will have inside the main dash first of all as we see in the developed version we have this heading dashboard and then these cards so let's first just make this heading okay so here i am declaring and as one tag and it will have the heading dashboard like this after this we have the card by making another component with the name card first of all we have to make another folder for these cards so cards and then inside these cards a new file with the name card.jsx and an other file cards dot css okay here rfce like this and then importing it css cards dot css let's save this and here i have to auto import this one card yeah okay now if i see at this version here we have these cards mean it's working correctly okay now as we see at the developed version you can see we have three cards so instead of making these three cards in this div individually by buy something like this div dot cards and then make each card one by one first card then second card and similarly then the third card it's not the real taste of react as i have mentioned earlier in the sidebar section so instead of doing this stuff i will again make the reusable components and similarly i will use the map method okay so basically let's grab the concept okay so if we look at this card anything that is not common in these cards will be the part of data okay so as we can see this styling of boundary is same their size are same the position of the headings and the values are same the things that are different are their values of radial bar chart their heading names different their values different and their icons are different okay so i will make an array inside the data here okay i just make the text smaller like this here i will make an array that will be exported with the name cards data okay and then inside this array i will make the javascript object and each object will represent an individual card now inside the cards data as i have mentioned i will make the javascript objects so let's first make an object okay inside the object first of all i will have the title save here i am talking about the first card okay the first expandable card about this one okay this is an expandable card so i am writing the data for this card so here first of all it's title sales and then the colors are also different for each card so i am making a nested object and the color will have a background which is something like purple linear gradient and i should close this one and also it have a box shadow as you can see each card also have a different box shadow it has purple it have pink and it has the yellow so therefore i have make a color object inside the car's data and then its bar value bar value is basically this value because the first card has 70 percent so i have made this 70 then the value of the amount here we have the value of the amount and then we have a png as you can see that the png of each card is different so here i'm mentioning here png and then the series let's forget about this series for now as this series we will use in the expansion for making this graph as each graph is different so that means each card is using a different series of data so that series of data i have mentioned here but they don't think too much about this for now we will clear everything about this on making expandable and then similarly i have made an other card for the revenue and the last card expenses okay so now what i am going to do i just save this file and inside cards.jsx here i will iterate through these card data so first of all let's import these cards data here yeah and then i am writing map method and then i say for each card will have the id like this and then each card will return a component uh with the parent name of parent container like this one and then inside each parent container there will be an other react component with the name card okay as i have not made any files with that name card so it's giving an error but we will fix it later now for each card i will give some props the first prop will be the title of the card and this title is going to be the card dot title similarly the color so color will also the car dot color and then the bar value and bar value equal to the car dot bar value and then the value simply so car dot value we also had a png so called car dot png and then at last we have the series okay as we will use it later but just pass it down as a prop series okay so basically these are all the items that we have inside the data here okay now let's make a component with the name card card and inside the card make a new file card dot csx and the card dot css like this one okay card dot jsx raf c and then remove this default text and make a div with the name card okay or i mean the class name card okay before defining styling for this i should define styling for cards.css as these okay there is an error with the we have not imported these png so the icon so i go to here and then i just simply copy the name and here i will paste this one and then similarly for this i again just simply paste it here now let's save and hope for the best yeah so i was talking about the styling of cards file so the cards have the three divs or the three cards they are in the row direction so obviously i will makes it display flex okay so here the cards dot css will have the display flag and the gap between each card will be the 10 pixels like this okay now we also had a parent container inside the cards and here if you can see we have this parent container so i should also make styling for this so inside the parent container it have the width 100 okay so let's just save and import this card by auto importing yeah just like this one it's time to see the results here we have the three card headings means they are working correctly it's time to make these cards so i just close everything except the card file and first of all i will receive the props okay in inside one variable with the name props this is basically an object that will have all the props okay now uh first of all i will make the compact card structure this one okay then we will work on how to expand this okay first of all if we see that each card have the two forms one is expanded and the other is compact so how we are going to achieve this effect so we can achieve this effect by the framework motion in the framework motion we have a concept called the animated shared layout so we will use this so uh before going in too much explanation here i am just making a u-state hook so so the you state hook have two things the first is expanded and the other one is a function the name set expanded and at the first each card will have its value as false it's just a boolean value okay so at the possible fast no card will be expanded at the first now inside the card if i just remove this okay and then i am importing the animate shared layout okay so and you made shared layout i think so that this one from framer motion okay then and then to use this effect everything inside the card will be inside this component animation layout so here i simply like right animate shared layout and then close this tag so what it does it basically provide us some extra frames okay as you see there are some extra frames when it expand and collapse these frames are provided and handled by this component animate shared load we don't have to do anything we just have to define the two different layouts okay and then i say if the card is expanded okay then return the expanded card okay just like this and if it is not expended then what return then just simply return the compact card as we have not declared these definitions expanded and compact so let's just here first of all i will make the structure of compact card okay as you can see the compact card have a type of rectangle with the two sides inside each card one for the radial chart and therefore the values and the pngs so yeah here i will make a function with the name compact card and it will obviously receive the parameters so here i will pass the parameters param value as the props that we have received from the cards and then receive these parameters here now define the body of this card this will return us a div with the class name compact card like this now inside this structure first of all we will have a radial bar and let for now just say it as a char okay and then after this we will have the details of the chart on the right side so i will say it as the detail inside the detail uh first of all we will make the png okay because here if we see we have the png on the top so here i will receive the png in the constant png and it will be equal to the param dot png like this now i will make this as the component png component and it should be bigger like it should also be bigger like this okay now after this png i have a span inside this pen uh i have the value in dollar so parents dot value just like this one and then i have another span and inside this span i have a text last 24 hours just like this okay now to see the results here we also have to make the expanded card but uh just for now let's say it will return as expended okay now let's save and see as we have files so we will return the compact card structure here you can see we have the chart and the png and all the values are received correctly okay and i am using a library called the react circular progress bar you can check its documentation here react circular progress bar okay so i'm just copying this two lines from here and import them at the top of our file here now i will make this so inside the radial bar i will hear this circular progress bar and it will have the value equal to param dot bar value and then it have a text and the text will be param dot bar value okay but the text should also have the percentage sign like this so i am writing it inside the backticks and like this yeah now it's time to style this cards so as we have received the colors for these cards inside the parameters so here i will declare their stylings the style will be equal to the background [Applause] and similarly there will be a box shadow and now it have a box shadow so the box shadow equal to the param dot color dot box and the shadow okay i should see the data file just for side by side here okay the background has a bigger g so if i write here the g now let's see here we have the background and the colors for these cars it's time to style the inner structure so i just open the car.css as i have to style the compact card so i just write the compact card and it have a display flex and the flex value of each card will be one then the height is seven rem which is important okay like this one okay now the border radius is equal to 0.7 rdm for each card okay you probably have a question why i have written here imported because we have the circular progress bar and is the component of a library which have its own width and height so it's possible that it may take over the height of our actual parent div so therefore i have written here the important and four more the text inside this will have the color white and the position will be relative and the cursor will be like pointer on each car now let's see the styling is not applied because because because we have not imported the card.css so the card.css let's save and see yeah here we have these cards in the correct height as you can see still the circular bar is not having the correct height so let's fix this first of all i want to make the compact card shadow none on hover so the box shadow on hover will be none like this now fix the radial bar so for the radial bar i am targeting radial bar and it will have the flex 1 and then the display flex and the flex direction of column of course and then it will have the justify content at the flex end like this for more it have a gap of one rem here we have this side okay so it is aligned at the end of the flex now i will target the circular bar so i will say the circular progress bar part okay so you can see these class name by inspecting these okay so here you can see this is the circular progress bar path and similarly we have the text and i assume we have the trail yeah here we have the trail that is behind the path so and this is the total png so i'm just targeting the path to make it white so here i will say the stroke of path will be white which is important everything that we will that we will work with any library component we will make it as important to override our styling okay and then the stroke width will be of 12 pixel with the important and for the last it have a shadow so i am dropping a shadow of two pixels four pixels six pixels and the white now let's see okay there is a mistake by me the b should be smaller now let's see okay here we have this and we have to style the parent div so here i write the circular progress bar without path the total div will have a width of 4 rdm which is again important and the overflow is visible so we can see the shadow of paths easily now let's save and see here you can see how beautiful is this looking it's time to fix the trail so to fix the trail i just copy this name so we avoid the mistake again and then write the trail for the trail i just simply make its display none our next task is to fix the headings of these radial bar charts so i say inside the radial bar we have a span here we will have these pens okay you can see these pens by inspecting and for this pen make the phone size 17 ex pixels and the phone and the font weight of bold let's see okay it's not targeting these texts so so i should do something different if here i assume it will have a class text like this one and if i make it fill equal to white and then important then save yeah it's working okay it's time to fix the right side the details side so for the detail side here i am commenting and writing the details i am making its flex one and the display flex with the flex direction of column and justify content space between like this and the align items i don't think so in the center they should be at the flex end okay so let's see padding to look at more clear so for the padding i am again going to compact card and here just make the padding equal to one rem let's save and see now it's looking very good now it's time to fix these text for the detail side for the text first of all i am targeting a span with the nth child i assume too okay and for the second child i am making its font size only 22 pixels and its font weight of bold like this it's time to fix this last 24 or so i just simply copy this and here instead of two i will say three and the three will have the font size of 12 pixels let's see yeah it's just this okay you probably assume that this is not the correct position for the cards and this is why because still we have not made that table when we made the table then as we have declared space evenly it will automatically fix itself to the towards the top so this is the technique to make it responsive for every device okay and i think we have forget to make the headings of these cards so why the heading okay here below this circular progress bar i'm making a span and the span will have the param dot title like this now let's save and see yeah everything is now incorrect and uh still when we hover the shadow is not none let's see why this is the compact card structure and there is compact card on however the box shadow is none but it's not working okay if i try to make it important now let's see yeah now it's working our compact card structure is now completed it's time to make the structure of expanded cards before making the expanded car structure first of all i am here passing an other function with the name set expanded okay so as i am passing it so here i also have to design define this prop set expanded and this will be a function call to our you state hook function which is the set expanded and when i pass this function to the compact card then it will open so it will make the set expanded as true okay so our card will be expanded when someone clicks on the compact card so this is a very simple logic and i am passing this function here and after the styling i will say on click when someone click on this then the function will be called as set expanded now so similarly i am declaring the expanded call function as expended card with the parameters also equal to the props and then set expanded it again will be simple a function call similarly to you use statehook function which is set expended and it will become false okay so when someone clicks on a certain element in expended card then it will become the false means it will become compact and i should remove this from here and okay there should be not this tag and still i have to close this one okay now i have to define this expanded card so i'm just making this more smaller and below this i am writing expanded card and it will again be a function expanded card that will receive the params and the set expended function return an array as div dot expanded card now in the expanded card first of all i will declare its styling so so here i am saying its style is equal to the background like this equal to the param dot color dot background and then we have the box shadow like this one which will also be equal to param dot color dot box shadow yeah like this i should format the code okay now inside that div first of all i will have a icon to close the chart as you can see here if i expand this here i have i have a closed icon on which if i click the card is become compacted i'm importing a png from i can scout here i am say import url times from at the red icons called reaction icons okay now i am using this icon here inside the expanded card div for this i am making an other div and inside this i am just writing this and i say on click on this okay on clicking this let's execute the expand set expanded prop okay and then i close this will have a span inside this pen i will simply have the title which is equal to the param dot title just format the code okay after this i have a container for the main chart or you can say the main graph so i will say div dot chart container like this and inside this i will have the chart just like this and below this i have another text which is saying last 24 hours so now if i just make its use date equal to true i will see the expanded cards but you have idea that we want only one card to become expanded at one time so for this i will just keep it as false and as i have made on click so this becomes expanded okay so and for more i should make it on click this cross icon so here is the cross icon and it has the set expended already set so yeah it's working fine you can see that it's become expanded and collapsed it's time to define styling for the expanded and to make the chart inside this okay to make the chart inside the expanded card i am using the react apex charts you can see its documentation here it has very easy documentation to read you can make different types of charts and i am using the area chart so if i go to plot options and here it is the area and it's loading here it have all the options regarding the area chart okay so this is basically saying how to make an area chart and these are all the options to play with them you can read its documentation properly from this website okay so first of all let's import the chart from the apex chart library its component name is chart and it will use the series that we are receiving from our param so param dot series and then the type will be the area okay it have different type of chart so we are using the area chart now let's import this import chart from react apex charts just like this okay so now if i see what happens yeah there is an error because we have not defined the options so okay okay so whenever i click this our app crashes because we have not defined the chart options here every apex charge uses some options so here i say the options will be equal to data dot options now it's time to declare options for this chart so here i will make a constant with the name data and inside this data i will have an other object option okay now for the options first of all i am making an object chart okay these nested objects are basically the part of documentation of apex chart here you can see here we have the chart object similarly if we have the field object data labels and i am going to use all these objects to make a beautiful chart so inside the chart i am having the type area height r2 and then i will make the shadow as the false because i don't want any type of shadow and then i will make its position just something like this a part of documentation and uh here i'm defining the color for the shadow and the opacity then how to fill the chart the color of filling the chart will be this especially a gradient color of white which will look like something bluish and then i'm making the data labels false and the stroke the main stroke of the chart will have a curve smooth if i make it not smooth then it will be like the steps which have the sticky corners okay and the color of the stroke will be white then the tooltip tooltip is basically a type of div that appears when we hover the stroke so it's also have the format on the x-axis like day month year and now the grids are the lines that are below our stroke or below our area chart that defines us the height of the chart and the width of the chart so i am making it show true and for the x-axis i have its type as the date time so everything will be like the date and time on the x axis and it has these categories now let's save and first of all let's format and save here i'm accessing these options just save and see yeah you can see the chart is appearing okay and it's looking good and here you can see to make the transition between compact and the expanded card smooth here on the most parent div below the styling i will give it a layout id okay and i think so before giving the layout id first of all i should make it as motion dot div motion is basically a component that we will import from the framer motion so here if i make it so here i am importing motion okay now you can see that a error is gone now i will give it as a layout and then the id equal to expandable card okay and the similar layout id i will give to the compact card so where is the compact card here first of all i will make it as motion dot div okay motion dot div and now make it as a expandable card layout id save and let's see the results here you can see okay so it's basically now have some extra frames to collapse and to become expandable but we have to fix it the positioning of the expendable card so let's move towards the css here i am making a comment for the expandable card like this and now this expandable card have this class name i should double check okay okay it's expanded card not expandable so first of all this expanded card will have a position absolute and the width of 60 percent of total screen moreover the height will be the 70 of our total view and it has the z index of nine means it will be over anything that we see in the dashboard and then i am declaring its left position will be the 13 rem you can play with these values to fix your needs and then the border radius of one rdm which is the main theme of our dashboard and it causes the display flex flex direction of column line align item center and justify content space between like this and for more i am giving it a padding of one rem okay now let's see if i refresh the page here you can see so for now it is going outside our main dashboard because our compact cars are not in the correct position they will become in the correct position when we will have a table below these cars but for now just assume this that this is the correct position of expandable card and you can see how beautiful it is looking and by the way these options comes with the library to download it as a png svg and to zoom in zoom out we don't have to make anything it's time to style this cross option okay so to style this so here i am declaring styling for this cross option here i will say align align self towards the towards flex end okay and four more the cursor will be pointer when we hover this and the color will be the white let's see but the align cell flex end is not working correctly let's see why okay because there's a typo okay still it's not at the end of flags so here i can make a quick fix if i just cut the styling from here and give it to the parent div okay so let's form the code now save and see yeah now the cross in its correct position it's time to make this chart fixed okay so again i will go to the css and and here i say the expanded card have a span and the span and type of one will have the color white font size of 26 pixels similarly the font weight bold and the text shadow okay so i am giving it a text shadow of zero pixel zero pixels and 15 pixels with the color white let's save and see yeah you can see the sales is looking very pretty uh we should also fix these last 24 hours okay so to fix this i am again targeting the second span type so here i will say the second type of span inside the expanded card will have the color white okay and it should not be a pure white it should not be appear but it should be something i assume just like this okay and there i will give it a font size of 16 pixels yeah it's looking very good now uh it's time to fix the width of our chart so to fix the width i will target the chart container and for the charcoal i will make it with 70 percent of expanded card here you can see everything is looking very fine now okay you can see how easy it is to make these expandable transitions we can use this beautiful transition in many of our projects and i personally use it so it's time to make that table first of all i will close all these files and inside the components folder here so here i will make a new folder with the name table inside the table folder again i will have the two files one will be the table.jsx and the other one will be the css like table dot css now inside the gsx i will write rafce and just import this css here so to import the css table dot css just like this now save and i will import this table component inside the main dash component so here i have the main dash and below this i am making a heading of h2 type see okay and it will say recent orders now below this i have the table component i should import it by auto suggestion like this now let's save and see the results here we have the recent orders and that table but i think that the recent order is too much bold to be individual so i just remove it from here and inside the table.jsx i will make the h2 heading so first of all let's make that div for the table like this one now inside this i will make an h3 heading with the name recent orders like this okay now let's see the results here we have it's time to make that table below this one so to make the table i am going to use the material ui library and it gives us a pre-built component of table if you go here inside its sidebar you have the table component and i am just copy and pasting this first component code if you click here the code appears the javascript version and just copy the source code and i am pasting it here okay so if i and i should first of all remove all things and just paste it like this yeah okay and now i will make a parent tables div and then here i will again make an h3 heading with the recent orders tag and now just ctrl x and it will be the most parent like this one okay so let's see what happen here we have this beautiful table and still we have to change the styling for this table before changing the style of this table let's first change the data for this table as this is the data belongs to some food and we don't want it so here first of all just remove all these rights okay so here i am making them align left and similarly for all of that these i am also making them align left yeah now they are looking pretty cool after this i am changing all the data so here they have their own data i am deleting this all data and making my own data like this okay so this is basically our data that belongs to each row so i have made an each row inside the create data function so what it do it just calls the create data function and the create data function then returns these values that we have passed here as string and i should also change these names here our second parameter is tracking id and the third one is date while the last one is status like this and similarly i am just copying and paste it right here yeah now this is it okay i'm just moving all the headings and our first heading will be the product which will be the name the second heading will be the tracking id and there should be a space between them okay like this and the third one is date while the fourth one is the i think so status yeah status and there is nothing inside the last table cell because it belongs to detail okay so let's save so here i will change these values of table cells because i have changed i return type of here the function create table so if i just make it here name name is same because the product name the second one will be the tracking id while the third one will be the date okay so i should change it like this state the fourth one is the status while the last one is nothing but the detail okay so it is not a prop it is just like this now let's save and see here this is the final version of our table it's time to change the shadow of our table so i will go to the most parent container here the table container and for this table container here i will declare some styling so first of all i will say it will have the box shadow and what back shadow it is going to have this one okay so let's save and see yeah the shadow is now correct and the date is red it's time to style the approved and the pending and the delivered if it is delivered then the background will be blue if approved then green and if pending then it will be red so let's make this okay so here instead of just writing this in the braces i am removing it and in this cell i will make a span okay so this is the span inside this pen i also have a class name the class name will be the status it's because we want to target it more easily than to target the children of a table okay now for the styling i will call a function make style and inside this function i will just you know pass the status of our row so yeah row dot status and inside the span again we will have the value of row dot span so row so row dot status so row dot status it should not be imported from material ui i don't know if it has some function or object for make styles i am declaring it by myself here i am going to make a very easy function that i have referenced here make style so how i am going to make this here first of all i have made a fatal function make styles which is receiving the prop status of the row and then here i am making an if condition if the status that we have received is equal to the approved then the background is this and the color is this and if it is depending then it has this red color and the background is also this shaded red and if it is delivered then this is the text color white and the background is something like this blue okay so this is basically function to make the styles of status span let's see here we have it's time to play with the css of the table so here i am going to the table dot css and here first of all i will target the m ui table row you can see this class name by inspecting the table it's very easy okay and the class name of each row is the root and then i say everything inside the row will have the padding of 10 pixels and to see the effect of this i should import this here i will say from the same directory import that table dot css now let's save save this and here we have the padding of only 10 pixels okay and then after this i will just uh simply grab this class here and then after this i am targeting the head root okay so for the head and everything inside the head of the table will have the font weight of bold and i'm making it as important so the library component will not override it okay now you can see these are bold after this i will target my own table div and i say every td and ph inside this will have the border none and i am making it as important like this one okay and then for more i'll say the table first child okay the table first child will have the border radius of 0.7 rem and also i'm making it as important now let's see the table here we have how clean it's looking we have no borders and the border of the table have some radius now the design is looking very clean now so after this i will target these statuses okay so for the status here i will say it have the padding of eight pixels and the border radius of nine pixels so i say border radius of 9px so let's see yeah you can see how beautiful it's looking now for more i will target that details glass okay so i have not made the details class i assume that so here i am giving it a class name details like this and targeting this details class here i am just simply giving it a color of blue this one and making it as important now let's save and see okay at this point our table has been completed and now if i expand the card you can see how it is spending to its correct position as i have mentioned earlier when we make the table then we have a space below these cards and which will fix the position of expanded card so now look at this how beautiful and how smooth is this okay and there should be a some gap between the sidebar and the main dashboard and similarly between the right side and the main dashboard so to achieve this gap i will go to the app.js and then app.css and here i have made the display grid i will give a gap of 10 pixels let's see even see yeah 10 pixels enough and it's looking good now so finally it's the time to make the right side of our dashboard so here i'm making a new folder with the name right side okay inside the right side again i will have similarly two files first one will be the right side the jsx and other one will be a css so let's just make it right side dot css like this now inside the jsx i am writing r a f c e and importing its css file so the similar stuff again and again like css now i am importing this right side in my app.js where i have made a grid of three column templates so i am just removing this div and here i will now say right side yeah just like this now let's see results okay here we have the right side means it's working properly it's time to give it some inner content so here i will make a div with the class name right side inside this i will again have a div and the first one did and the first d will have an h3 heading with the name updates of updates as we don't have any component updates but uh let's leave it for now and then it will have an other component which will be the customer review so it will basically again the apex chart so yeah it's again a very basic stuff now let's make the updates folder okay inside the components here i am making the updates component okay again it will have the two files the first one will be the gss and other one will be this css just like but before going to css first i should declare the css off right side here for its css i will say the right side will have the display flex and the flex direction of column of course because updates and charge should be in column then it will have a width of 95 percent of lost grid column and then justify content space evenly as we have used it before in the main dashboard so just like this now let's see okay here is an error of updates as we already know it should come because we have not made it before so here it is now importing its css updates.css like this now on the right side here just import this by auto suggestion now refresh and here we have the updates and the customer review okay now let's make the updates component so here inside the updates.jsx first of all i will remove this and make an other day with the class name updates inside this again instead of making each update manually or individually which is not the real taste of react i again going i am again going to use the map method so to use the map method first of all i should have the data for the update section so again i will go to the data.js and just below all things here i'm pasting a data for the update card okay what basically it has it will have an image of the customer the name of the customer the notification that we have received and the time that how much time has been since it is received so now import the images that we have declared here so to import the images i will say import image one from let's go outside and then inside the images and here we will have the image1.png as you can see it's live here image1.png okay okay so just i'm just copy and pasting it again and again for the other two images here and here it will be like two and two and here it will be three and here it will again just like this now import the data so i will say update data okay so it is uh auto imported uh i will map through it update data dot map now for each update i will return a function and this function will again return some div okay so here it will return a div which have the class name of update like this now each update first of all will have an image okay so what this image is its image is basically the update dot image as we have the image in the data so here if we go here is the image so similarly here is the update what after this it will have a notification so i am making a div div and then i'm making an other day in inside this day first of all i'm making a span and this pen will have the update dot name of the customer okay and similarly it will have an other span and this fan will have the notification that we have received against this customer okay now let's save and see here we have these data of course we have to style them and fix them but for now let's just import all the data after this no today here i am making an other day which will have a span and this span will have the time so update dot time just like this now save and we here we also have the time it's time to style this so first of all for this div okay here i am giving it a margin bottom and its margin bottom is around 0.5 0.5 yeah i am targeting the both parent updates which will have a width 85 percent of the total grid column and the background or no it should be only the background not the color background white and then a border radius of 0.7 rm that we are using again and again in this project and after this padding of 1 rdm and then a gap of 1 rm okay and then let's just see okay so i should make it display flags for making proper alignment and flex direction of column now let's see okay for more i can say that the should be only 13 pixels so the things will become more clear let's say yeah but still the image is not making sense okay basically the whole alignment is still not making sense so i will go to the individual update and i will make them display flex and the gap between their items will be 0.5 rdm let's see yeah and it's time to make this image smaller so i will target the image inside the update block i will say there is an image which will have a width of 3.2 rm and a height of 3.2 rem let's save and see yeah but here i am facing some problem that that time should not be in this direction it should also be in column and okay let's see what's happening in the updates.jsx first of all before the notification there should be a space okay okay and if i remove the individual div for the time here and just make the span inside this div here and format the code now let's save and see yeah now it's looking very correct okay it's time to make the name of the customers board okay so to make the customer name bold i will target the notification div and i say inside there is another day which will have a span and the nth type of span which is equal to the one which is the name as you can see here this is the first pan this is notification which have an other div which have an other span or you can just simply hover you can have a structure okay so it resembles this structure here so what it gonna have it will have a font weight of bold just this yeah it's crystal clear now it's time to make the chart of the customer review so for the customer review here inside the component again make an other folder which will have the name customer review and then inside this i am making a file with the same name [Music] customer review dot jsx now here rfce just like this and remove the most and make it as customer review just like this one now i am importing this inside my right side section so here just below this i will say the customer review now here if i say here i am and see the results here is the here i am okay now now as we have seen how to make the react apex chart visible on our dashboard i am not going to in very much detail again so i will move through this part very quickly i think you can understand how i am going to do this okay as it's going to be a very small component so it's just going to have a chart okay and this chart will be imported from the react apex chart so i will say import chart from react apex job after this just above the return here i am pasting data for its options okay so you can see in this data first of all i have the series which have a name and the data series uh against which the graph or the area chart will be plotted and then these are the options these are just basically the same as we have in the expandable cards okay so what we gonna use we just have the series and c is equal to the date data dot series and then we have an other option options equal to the data dot options and then we will have a type and its type is going to be the area just like this now let's save and see here we have this beautiful chart you can see how easily we have made this in just few seconds by having a correct data and correct options so i think that the front view of our main dashboard has been completed it's time to make it responsive for the tablets and for the mobile so let's do this so first of all we will make it responsive for the tablet view okay so if i go here and i am inspecting it by ctrl shift i and here i am making it around 1100 pixels okay or we can simply make it a ipad air okay but for now i am just making it like this but for now i am making it something like this and here i will close all these files again and i will go to the app.css here first of all i will make a media cubic i'll say media and submit and the maximum width of the screen will be 1200 pixels okay so for just for the testing okay i will say the after glass will have on this background color of blue let's see okay so if i here go down this and you can see as it hits the 1200 pixels is background become blue so i should make it upon here responsive so uh first of all just remove this and here i am saying it will have a grid template columns of 10 percent and 50 and the auto and for more on the tablet view the overflow y will be scroll okay so it will be scrollable now you can see that okay now it's time to fix the sidebar so i will go to the sidebar dot css and before going to the sidebar dot cs i am just copying this media query because uh we have to use it again again so this is our sidebar dot css and at the end of this here i am pasting it and i will say add the menu item will have a span and this span will have a display now basically i am making the headings of menu items done on the tablet view and for more the logo will also be done okay so i will say display none just like this here you can see how easy it is to make it responsive for the tablet view okay for now we have just made the sidebar responsive note the total at this stage it is enough for the sidebar it's time to move to the main main dashboard.css so here i will go to the main dash dot css and again just paste the media query for the tablet view and i will say the main dash on the tablet will have the justify content flex start okay like this and the margin top of two rem let's save and see so here now they are the items are aligned themselves to the start of this leg not the space between okay or the space evenly we have made the space evenly not the space between but now they are aligning themselves to the start of the flags and here we have the margin top of 2 rem it's time to go to the card section so for the cards dot csf i will again paste the media query of tablet and then say the card will have the flex direction of column and the parent container will have the height of 9 aria let's save this and also save this now let's see here you have the cards in the direction of column you can see how beautiful is this and how easy it is but we have to fix the expandable card okay because they are going out of the view so to fix this i will go to the car.css here in the car.css you go to the end and again just paste the media qd for the tablet and i say the expanded card will have our top of two rdm so 2 rvm like this and the height of 45 view height and the left value of 6 rm like this now let's see when i expand the card it's so uh here our fx chart is not fitting correctly inside the parent expended card div so what can i do i will here increase the height from 45 to 70 percent new height okay so now if i expand now it's showing correctly okay yeah that's it it's a very small fix in our code and now we have to fix these recent orders and this right side so first of all i will fix the right side and then i will fix the recent order tables okay so let's go to the right side dot css here we have this one i'm again pasting the query for the tablet view and making the text something like larger like this and then targeting the right side class i have said justify content will be deflect start in the tablet view because in the tablet everyone wants to see the content on the top of the screen and then the margin top will be the 3rd now let's save and see here we have this and we have the space at the end now it's the perfect time to style the recent orders table so now i will go to that table here the table dot css here like the table dot css again just paste the media qd [Music] and i will say the dot table will have the width of 170 percent of its original okay and then the margin top of two rem just like this now see how easy it is to make it bigger and to occupy the whole space so uh i think we have made it responsive for the tablet and if i go to the ipad air view then you can see how beautiful it is looking on the ipad okay so i should make it responsive for now like this we have made responsive for the tablet view now it's time to make it responsive for them while view now it's time to make it responsive for the mobile view by the way for this mobile screen at the right side i am using an extension that is called the mobile view so for the while view first of all i will make the sidebar as display none just for now to handle the other components easily and here i'll see the max width for the while view i will say i will set 768 pixels okay and here i will say the sidebar will have the display none just like this now it's time to fix the app.css so i will go to the app.css here and i just copy and paste the media queue here and now let's make it 768 pixels like this and i will again copy this for the future okay and now i say the app loss will have the grid template column of 1fr means each component will have a one frame okay so it will occupy the full width of our display and for more i will say the app glass and the webkit and the scroll bar okay so for this i will make the display as none so we will not see any scroll ball in the white view as we have now this one it will be hidden so let's save and see here each element has the one fr width and the scroll bar is now gone it's time to fix the main dashboard so i will go to the main dash dot css here i am just pasting the media query and now i am targeting the main dash class and making its align item center just see you can see this right now okay but i have to fix this more so i will go to the card.css so inside the cars.css again paste the media query for the mobile view and here i will target the dot cards and i will say the width will be the 90 percent of the total view let's save okay now it's around something fixed but still many more things to fix now so i will go to the card dot css in the card dot css again the media query and then i making the expanded card as the top eight rem and a height of 50 and the left value of 15 pixels and the width of 80 percent of the total value let's save and now see the expanded card here you can see it is have very beautiful alignment with the mobile view and yeah it's pretty much good now it's time to fix the table because due to this table we have everything out of order these dashboard cards and the headings and everything is out of order just because of our table so i will go to the table dot css here again just pasting the mobile theory targeting the table and i am making its position relative just like this one and display flex and the flex direction column and four more i am making its line item center and the width and it will have width of 18 just like this now you can see our total dashboard is in the perfect alignment with the mobile view as soon as i have fixed the table okay the table is scrollable so we can view all the elements inside this it's time to fix this right side okay so now in the while view is not the right side it's but we have the class name as right side for the update section go to the right side dot css so here it is again just pasting this stuff i'm making it with 100 okay so it will align itself according to the corners of while and margin top of zero let's save and see now the width is more reasonable for the div inside the right side i will take they will have the flip flex and the flex direction of column because everything shut down while we will have the flux direction column and the align item center here you can see how easy we have fixed and made it responsive for the mobile view so that's the beauty of react and the css combination how easy they can handle the things that are well difficult in any other framework or web templating language so it's time to make the sidebar okay so i will first go to the sidebar dot css here and remove this and i will make this position fixed okay after this i will make its z index nine then the background will be something like pink color like this then the width of 55 and the padding right of one rdn like this after this i will have the height of 100 percent for this now you can see we have a structure of sidebar in our mobile view of course we have to make it close and open on click but for now let's focus on the template after this i will say the menu item have a span for the while for the menu heading i will make them display block just see here now we have the head it's time to make the logo appear on the view so i say the logo will also have the display block now we have the logo and fix this logo by not saying it as block we will say it as display flex yeah now it's more clear with the structure of while view after this as we not have the icon for the log out so to make it appear i'll say the menu and then the menu item will have has a last child and this last child now have a position relative instead of absolute and the margin top of 6 rdm okay the 6re margin top is still more than the height of mobile so if i just make it as 2rdm now here we have over the log out button after this to make it open and close on the click i will go to the sidebar dot jsx here first of all i will make a use date okay so here i will say uh you state hook and i will name it as the expanded okay and then a function name as the set expanded and it again have the boolean value as false or let's say true okay on default it will have a true value let's say for now after this i will enclose my total sidebar inside an empty node so just like this why i have did this because now i have to make an icon of png for closing this so i am making our div and inside the div i have the uil bar icon so to make this i can appear i have to import it from the icon scout library here i am importing this and now here i have this one so to style this here i will make a condition i will say if the sidebar is expanded then the it left value of it will be okay first of all i should turn on the word wrap like this so now it have the 60 percent of the left side and if it is not expanded then it will have the left side of only five percent okay there is some problem first of all i have not deleted this style here i have to declare this style here okay and then after this i should make this div out out of sidebar just like this so we are unable to see this because of the z index value of our sidebar so i will name its class name as just bars okay like this and now i will target this inside the css here i will say for the mobile view the bars will have a display flex first of all align item center justify content center i know it's not necessary okay let's just skip this for now it's not necessary here the necessary is this i am making its position fixed okay and then it will have a top two rem and the most important we have the index equal or greater than the z index of our sidebar so uh here i am saying right nine so it will write the d structure of sidebar and then here i am giving it a background okay so for its background i'm basically using the same color as i have used here so just like this one now let's save and see okay they should be hash here you can see we have this bars icon visible okay after this uh i am saying it should have a padding of 10 pixels which will make it more reasonable clear okay and the border radius of 10 pixels will be enough it's time to make the sidebar close on clicking these bars so i will again to the sidebars.jsx and for the total sidebar div i will make it as a motion.div okay and then i am importing motion from the framer motion so here just below this i will import motion frame and motion just like this okay now as i have made this motion.this i also make this closing tag as motion. yeah here it is now i am going to use the total feature of framer motion library okay here i will say it will have some variance and i am saying the variance as the sidebar variance now i will declare these variants what are these variants so here just below this i am making them as const very side variants and then they have the two type of values first if the the sidebar is expanded okay so the left value of the sidebar will be only zero like this and if it is false then the left value of sidebar will be minus 60 percent i am passing an other parameter which is the animate you can see these parameters by googling the frame or motion library and here i'll say if the window dot inner width okay so if the window dot inner width is less than and equal to the 768 pixel then what you do then return the value of expanded variable or the expanded use state as we have made here okay if the inner width is less than 768 pixels then it is returning the true okay and then if it is not then but it will return nothing just an empty string so when it will return the string true the control will go here sidebar variant and its left value will become zero so the whole concept of making this logic is that we only want to make this expandable and collapsible on the mobile view not on the tablet view and not on the desktop view window dot innervid i hope you got the point okay now i should make a function on click for this div here bars i'll say on click execute a function which is the set expanded and make it opposite of the expanded use state okay so if it is if it is false it will make it true and if it is true then it will be false so let's see if it is working yeah you can see how easily and how cool the working of our sidebar okay so this is the total responsiveness for our mobile view as you can see it's looking very cool in the while view as well as in the desktop view but there will be a problem with the desktop or the tablet view now as you can see here if i go to the tablet or desktop view the alignment is now out of order completely that's because now we have this bars icon in the tablet and the desktop view so to remove this just above all the media series here i will say the bars will have display as none okay now it will fix all the things you can see we have a perfect alignment for desktop view for the tablet view and for the mobile view so guys if you think you really have learned something new and something unique by following this tutorial then please hit a subscribe button i know i am very late in my video posting schedule but i am trying my hard to deliver as much quality content as possible but i have to do a lot of other projects side by side so therefore sometimes the videos become late but i try my best to deliver you the quality content so please subscribe the channel hit the like button and also share this video and put your thoughts in the comment section what should we build next so till next video goodbye [Music] you

Channel: ZAINKEEPSCODE

Views: 424,313

Keywords: react admin, react admin panel, react admin dashboard, admin dashboard design, admin panel design, react website, react website tutorial, react design tutorial, react design, react ui, admin dashboard, react, react.js, react app, react project, beginners, apexcharts, responsive design, responsive, zainkeepscode, react ui design, react for beginners, react from scratch, template design, for beginners, website

Id: K7vHoUwClaM

Length: 120min 52sec (7252 seconds)

Published: Sun Apr 17 2022