#2 React Sidebar with react-router-dom version 6

hello guys can we check this application now we have here my coding book now we have the sidebar been linked to the virus pages you can see guys so that is that let's do this if you want to type along with me you can install the phone one npm install react router dom and two mpm install react items with all said and done let's begin thank you very much let's begin by creating four folders next as the folder let's call the first one assets and call the second one components then call the third one pages then the last one data so that is that the last thing the first one assets now this project we have no images or a spinner so we need a blank move to the second one components components let's create four files now on the second one let's call it enough bar but yes last one let's create the next one and call it enough page dot js get my last one let's call late sidebar dot js so that is that guy let us take the first one mainpage.js so let's take our raf ce good so it's over nowadays why don't we use reactor fragment good so we inside that we have a section then a div to say hello now let's link that to the app.js to view on screen so we go to app.js then we call main page and let's import it components okay so that is that now let's check our figure hello on the screen so let's check our screen we got hello here let me position it together good we have hello here sermons ready to go so that's that guys to begin let's look at the structure for the application because i want us to have uh first you're gonna have a body this way then we have you can see you have something like this then inside that now we divide this one into us something like this guys so that is what we're gonna do so we use that main page to do this so let's do this on the main page so let's go to the main page okay our main page is of hello let's take the then give it two sections okay so let's head in section and the sidebar section so let's say the first one the heading section now the heading section what do we need we just need nav bar so let's create a deal to call the nav bar so we say a div here okay so let's create the null bar okay so we now bar so now about the same thing let's go back to number caller r a f c e good so instead of ordinarily why don't we make it react or fragment okay so we say good so enough bosch waiting with a section to say hello now let's link the navbar to the main page to see if we're gonna get hello on the screen the main page and let's go call number in the main page so let's say nav bar let's import it so that is done let's check it out good we got hello on the page so it means you're ready to go so now let's go to navbar and style it okay over here now about what we need you know let's take the div the hello give it a class name bg black high 20 and width 4. the insider let's have 2 2 dips the book and uh and the writing okay so let's create the first div and let's create a second d the book in the writing so the book let's call the react icon which over here call it let's call bs book give it a class name test white and that's for excel let's import it we'll go up here and say import bs book from react icon slash bs as again where we have our book ready now next is that t tag to give us our heading so we say let's give it a p tab so we inside that we have a class name called text white and text three so as my coding book so we can see it's ready now let's flex both of them so we go to the apparent d which is this one then we can say flex then what item center you can see guys we have it now let's give you some padding left you can see guys so we use some padding left so we say pl then space space 4 you can see our header number is ready now next let's look at the main page the second section of the main page which is the sidebar now the sidebar let's get the structure okay it's over here let's give it a div then inside that we can have two div so this will be the wrapper then inside that we can have two divs now we're gonna give them but yeah so over here we give it a class name you say grid and grid calls 12 now the 12 let's make the first one of course three good so we give it correspond to a league black height screen and padding left two so you can see guys so then the second one will be their course nine okay so we can bring it down a little okay let's take it down and this one must take the uh the pages okay so this one's gonna line you can change the color to see let's make it uh game 500. you can see guys so that is that guys so we ready so now let's take the uh we need the side bar okay so the sidebar let's go to the sidebar then create the sidebar so we see array fce good now instead of oh now this let's give it what the what's the name uh we have the fragment so we have that give it a section and say hello now that it's black that's how we can see it's let's go uh last name let's test right now let's link the sidebar to the main page okay i go to main page then call that sidebar over here inside this div we need to give it a call the sidebar so close this thing and go up and then pause it yeah we can say oh hello now okay so now what we're going to do now is um create the sidebar data so to do that let's go to the [Music] then call uh sidebar data sorry side bar data export sidebar sidebar data across good now let's give it the our data yeah so the first one is going to be title home path a given the slash then there i so that's that guys who ness is to repeat more of the data so so that is that guys you can see we've done it for the rest too so next is to import the uh the icons the react icons yeah so we'll import our comments from so that is that uh sidebar data is ready so now let's import the sidebar data into the sidebar to go to the sidebar so to begin with let's import the site data you know so we outside that from where data then site data so next is to call the site data inside there the map it's over here okay so to begin the mapping let's call jsx then inside that we can say good so that is the let's give it a key so the key will be what's the index so that is that nest let's call nav link now the link good now the link is ready now let's import enough link from we are to auto dom okay so you have import now link from real traffic don't okay let's check this out no issue okay now let's create a spawn tag for the items now what is the issue resolution of link location what do we do what do we do okay guys knobbling now blame is important okay let's hold on with enough link then let's finish everything after everything then we talk we come to this issue so let's use a d for now and d let's take the second uh what you call it the second spawn yeah so you can see guys we got everything we need so now now what we're going to do now is to just style the uh the id so let's give some class name with flex justify start item center space x1 then let's give it space y uh space okay so give it a hover then what pl empty with full height flex just restart item center and text wide texture so space x1 it does that guys it's working so come on this is too close so we can give it uh medium screen the listening is too much the pattern left is too much so let's check that pl let's give it maybe pll five yeah it's okay so that is that guys next now let's create the pages over here we'll go to uh pages pages so over here let's say rfce so it's of a narrative why don't you make his way out or fragment so inside we have a section and a div to say hello so pages let's link that to to the main page okay so right here we call the uh pages which is enough page here so the second one the green side we call an off page so we say now and the [Music] page here let's import it it doesn't import important for us good so we got hello here okay so our pages it's also working now we're gonna do is to get all the pages that we did for this application so let's do that go to the pages column over here let's call the pages one after the other so let's go um angular and angular.js uh that'll refc good it's off on nowadays why don't we make it a react dot fragment then we give it a class name send it text for excel height screen so let's create this class name senate okay so let's go to app.css then create center then inside that we have display flex justifies content center and align item center so that is that we're going to use that we'll go back to the angular so the angular get we have it here but that is that now what we're going to do next is to do likewise for other pages so for instance let's take the next one which is when the css page i'm going to copy this one good then we go to the next page and call css see right here i already have seen okay then let's paste it here nicely you get and change it to css the next one is figma okay so let's go um php dot js all already fcd good so all our pages are ready now now all we need to do is to uh call all the pages at their uh uh whether that enough page the components let's go to the nav page we need to call all the pages okay so to begin a let's import the route to expose this one so we have the import routes and route the browser router we do that at the app.js so we can do that also first so make sure you forget so let's do the app.js here let's call the browser router so right here let's import good so let's link it to the main page so right here we say okay so that is that inside that we have our main page and gonna cut it and put it there so that is that we have our browser right here and it's already how we have our main page so next you complain yes no complain so next is the work on the pages okay so let's go back to the now page that we're at now route and the root so let's call the state is the hello off then get our [Music] iot route then inside that we have our route so i seizure let's give the route self-closing tag so now let's call that one after the other so to begin we call that home which is the route the path and the element is what uh the home okay elements into they give you the home so likewise let's do for all okay so already so now we need to what import all of them so we go up and say good let's check it out so everything has been imported so we can say we got it or their home page so now we need to what uh creates link them together so that when you click the pages change so how to do that let's go back to the main page your main page is ready we have the enough pages on the nav pages ready now on the sidebar it is a let's go control get the sidebar okay this is where we stopped okay so let's let's try it again let's push the uh the nav link there again and see it's gonna complain now blank okay let's give it a preference to of course item dot [Applause] good i'm not like this working now okay so let's try it out you can see guys it's changing so cool now let's look at the active link the active link okay the active link so to do that let's uh come here create some class name for the active link so you can see we have cost active link let's give it some over then empty seven pl seven with full height we can see we have created some class name for it now let's create another one for the normal link so we say commerce so then actively normal link will just be the same just that the active link has a background of what red and the normal one has no background of word but it's the same thing so now we just quit a condition and called the active link so way over here we come to the class name here [Applause] so right here the class name let's take it off so we give it a dynamic one and say if you see if the nav is active give it the active link otherwise give it a normal link so we can see if i go you can see it's the same thing just that the normal link has no and the active link has a background so you can see guys that's how it is so that is that i think we are done what else where ss minor let's check the large screen so why is just the same way we can reduce the articulate there this length is three the grid that we did is three so at a medium screen we can make that grid two so over here and let's check it out uh that's the main main word main main page so over here okay here you can see we have a course on three so we can add a medium screen and so at medium screen let's have cold span two called span two so that it does guys let's check it out you can see so and let's increase the other one that nine and make it towards ten so at medium screen let me be asking correspond go spawn 10. good see that is that guys ready to go let's check it out so that is that guys thank you for sticking to catch you the next one please don't forget to do good say peace

Channel: Gooddo Micro Projects

Views: 21,670

Keywords:

Id: UPFkT8kmmQU

Length: 23min 21sec (1401 seconds)

Published: Wed Jun 01 2022