Collapsible Sidebar in Next.js

foreign [Music] in this video I am going to build collapsible server here you can see the example of the project and now when click on this button and now this collapsed noise collapse and here you can see there is four menus and about Mills and contact we can click on about and now we can see we are on our board page and when we click on the contact press now we are on contact space so we are going to build this sidebar menu and this process so I am going to create one simple next project and we're gonna start so now I have open vs code here you can see I have also opened Side by directory and let's open our console here we are going to create our next project and yes create next app at the rate and latest and here you can click dot so all our module installed in this sidebar directory and here we need typescript also I'm going to use typescript as well as and let's create and here it will take some time so let's wait for that and now here you can see our type is created and I am going to also install one another packet as react icons so in pm npm I react icon you can write install to but I am going to use sort form seconds and less now our reacts I can also install and let's start server npm run there and now our server is started local is 3000 so we can open and here you can see our localhost study now let's create here we go and Source directory here is the API so in this project we don't need API so we can remove and here we can see our I have folder and here is a document an index bunch of code we can remove because we are going to write our own score we don't need next just boiler parrot and remove all those things and we can also use next font so I don't need in this project we are going to do very simple way and here you can see a style let's delete home style and here you can see I am going to remove all this style and here we can write our own style adding zero margin 0 and box type border box so unless to style body body background color e and less you can see and refresh here is our outputs and let's go on the code and just create one components folder inside of source directory components and here we can create the sidebar sideway and Dot TSX and let's support default function and here we can practice sidebar and this function written over jsx so b49 and sidewalk and let's import inside of Intex CS file for now and we can change later side of our hands so here you can see our sidebar so now let's start t our side per things here and so first I am going to open sidebar and here I am going to create our sidebusting so first I am going to take a side and this aside and give the name of this one is class name sidebar sidebar and here I am going to take one deep and this gives take one next image so emails and next image and next items also needs source SRC and here we can give the beat and beat you can need a and the height you can give any hat as per your need and help you can give class so here logo and let's Source I want to give Celeste logo dot PNG this find inside of public directory but here is now don't have any emails um which is name name of name of logos so I have one image so I'm going to paste here and public so now you can see and have NATO also alt so this error so here you can see our logo and why image is not loading here see sorry logo dot jpg we are using PNG so that's why it's not loading now here you can see image is reloading now so now I have taken one emails tag and now I am going to create foreign and here I am going to take one next link so link and this link here we can give does board for now and here hrf and this ones and here we can give also class name we can access through the class name sidebar link and I am going to use another things so here should also be used one day and this D has class name side bar icon and this sidebar icon has any react seconds so I am going to write MD here we can use our react icon so go to react icons yeah icons and here you can search dashboard dashboard so I am going to use this one and we can use here and here we can import top of the file next and here's dashboard from react icons and MD now you can see here our icons let's style of this one so first I am going to give also class name of this one span this and here we can give the sidebar name or you can give Side by title whatever you want and name and let's also replace this one as a span so now it's better let's style this one and go to inside of global.css and here we're gonna start so first I am going to select dots file bar and this side but has with I am going to give 20 Ram and effect 100 percent background color background color white nice padding [Music] one ramps or here we are I'm going to keep one resistance all want four seconds three seconds and linear for now and here I am going to select sidebar top yes I am going to give side part of so sidebar underscore underscore top and we are going to copy this one here is already signed up and here I am going to with Max contents that's enough display Flex online item Center and GAP one Wonder ing bottom one ram and margin bottom also wondering and here we can give border bottom one pixels solid and I have some shade of color so I am going to press directly here and this color and let's go inside of here you can see this little Border Side of okay now it's perfect looking perfect we don't need to Gap also just one item so we don't need that and let's go side off logo so select here Side Bar and just scroll underscore logo and so here we can give beat I'm giving three point five Ram and height also 3.5 Ram and object fit cover and Border radius now you can see here is our side but logo is looking great and let's style this item select server list server underscore list and here we can sorry list L small and here we can give lesser style knot and we can also select Hardware underscore link and we can style this link it display line block and font size one and text talk question none a color black padding I'll give 0.8 Ram top bottoms and one row I'm left and right and display play Flex and background color I have one also background color so and here I am going to paste this background color and margin bottom one ram and Border radius one okay try let's see what is output now here you can see is not looking great let's style some more so it here we can select as a server icon and here we can game answers one point two Ram also here we can select this plane land clock I hope this plane land flow now is and now I'm going to select sidebar name and yes we can give margin left point whatever now we can see yeah it's looking great but we can use some other fonts so it look more math but we can use Google fonts so search Google on and here you can see I have already Roboto fan so I'm going to copy I am not going to select I hope you know about this one if you don't know let me ping inside of comment section I will give some idea about this one so copy and here we can paste and now we can see our robot robots is looking much better than before and so now let's know other smaller and now looking everything is okay so first I am going to create one more thing Multiple List here so let's go inside of server here I am going to create one object cost and this object Side Bar items and this sidebar item object and this error of object we are going to create multiple menu so I have already menu and so I'm going to paste send me data so you don't need to create and this icon beneath and also import all this icon from the react icon so everything says let's paste here and now you can see all the icons that remove this one and less should be map here okay so this item and here we are going to cite our item Dot dot maps and after and we are going to paste this one and you can give the key here item dot name and you are also use index and here should be our icon so I am going to distracting her name HRA F all the signature icons help you can give name and you can use here as a call Signature icon and here we can give the name and now you can see refresh this page and here you can see our all the items here and we need also here is the name before get our sidebar name so let's give the server name here we need also one paragraph and this paragraph into sidebar sidebar login name and d the recorder and this login we need to select here and let's style this one so here is our sidebar top and we also give here allowing content so this will be align items so yeah align items and this should also get I hope this look much better yeah and here we can keep here logo name and here the font size 1.4 two weeks I hope 1.2 Ram is creator yeah and one with TR 600 now it's looking correct okay so when we click on the home so it's go home page and when we click of the Abode then go abort pace so let's create all other Pages here we can create your simply just like you can create here about so about dot TS6 and here you can export functions and export default functions and here about this and we can attend this div and WordPress so here you know this is about base and it is now our side but and sorry here should be our href so and let's click the sidebar so let's go on output and click here so as you can see when we click on the about Quest our sidebar is on Mount of the base so what we will do we need to create SOC so he whenever click on the paste it should be render outside but as well as our content okay so we can we can use something we can use something like that suppose This Server also we need you can also go here and we can render our sidebar and this one is our sidebar and here we can do something like okay and let's check when you click on a board piss now you can see our content is here and when you click this one and it's working but it's difficult to handle we can use we can write multiple of touch for it on every page so first I am going to create one layout so here I am going to create layout or you can also give the base layout so this one is obviously out and this is txt file and what it will just is simply we can create Port default functions and base layout and return the butt let's accept skilled and here should be prop so let's create one interface and props and children children should get react node a react not and how should we react node area and this should import react and here's problems no it's that and we can I do our children okay and let's go and use here so be careful this layout and this layout and here we can write anythings like the if and this we can home base um and go here and we can write a board and refresh this one so yeah this one is a home base and now let's change in a board for shine this change it's a board based so copy this exactly same things and go ahead and paste here and here should be also on a lot and now we can check here now it's about paste and but sidebar is not rendering so we can do here here we can render our sidebar now and now go you can see and this one is a home and here is a bot let's create this layout so our content load our right side and our side bus look in left side so I am going to give the class name here layout there's a simple class name I'm giving layout and let's select here and go to top and we can practice layout and Max display let's simply and 500 bits and position should be relative and grab Pura and now we can see our this side but and one thing is missing our button here is we need to one button so we can click on this button is will be collapse so let's create that button and go to sidebar and here I am going to create one but done let's skip the class limits sidebar paper here I am going to check button and this button also has class name simply button here we can do some condition rendering so button Arrow so let's skip some Arrow and we can open our react icons as well as and we can give Arrow and this Arrow I am going to use here so MD outline this error look much better so I'm going to use this one here and we can import here import this from react icons MD nice and let's go ahead and we can see here is our button let's style this button so go to global.css and here we can write our style okay so here should be button and make the position absolute and red should be zero or let's give four pointers and border known and background color White and the 1.5 Ram height 1.5 Ray border or one pixels solid and also need here we use border color so I also border and borders and this vertical so just look much better here we can test and Border radius fifty percents now we can see there is our button we can see our button is here now because this is positioned to our body elements so go here not a body limits okay this position is layout element you can cut here and help should be been installed sidebar cyber wrapper and position relative now you can see here let's give some more Style display Flex justify content Center align item Center and capture pointer and transform password X so now 50 percent and sponsors 1.1 around as you can see now yeah you can see let's give little bit off so let's drop on seven now is in middle of this block border let's create functionality so I'm going to create one state inside of and this side will component so this sidebar component and here I am going to create this has collapsed and toggle sidebar collapse and here we can give use state and we can write here by default by false and as this should be also cyber so it's naming you great and air Boolean type or layer and we can need to write B in small letter uh Boolean also need to import react use straight from react this is state oh react nice and when we click on this toggle button so create one main here function fonts copy this name oh and paste and last sorry Opie and here we need to paste and insert Handler and this one's just toggle the value of toggle collection here we can replace so so it has in the name and here we get set is cyber collapse and now this end yeah just accept previous data and just opposite of that data and when we click on button here we can give sorry click and we can help put Power toggles so it was spelling is wrong okay nothing my first select both simply nice and less open and Bin we click on this nothing working why because our data is changing but we are not going to do any things on this element so I am going to collapse our sidebar so I am going to use here data Dash collapse equal to 40 value of left side if it's true it's mean this server should be close or if false this means This Server will be open so let's go here and we can write our style so here I am going to select data date collapse equal to equal to sorry equal to true and this is between our width Five Point three all right now we can see we can click here and you can see here it's working fine but we also need to remove this items okay so go and know how to do that just this one and here should be also be known as sidebar name so we can display node and now we can see yeah it's working fine but also we need to remove this sidebar title so here we can also write this space this and or sidebar logo name and now go ahead yeah it's working what's what should next we need to do let's change this side power and its transition effect so here is transaction linear we can write cubics and this one so it's look more better like this one yeah it's working fine you can see but here you go collapse and when we click on this space suppose this one home and this one now our sidebar open this should be close because we close this fiber and we have been changing this side but Pages our menu will be open this is not cool how to handle this one we can use the global State anywhere and we can use and we can use one more thing we can do we can take our state to so we can take our state and we can use that top level of component on our app level but we can use also as contacts so let's use context context is better and be no need to do prop dealing in react so I am going to use set per context and it is much better and you can use other the library for State Management so I am just using your contacts and we can back sidebar on text context.px and here we can create our context so first I am going to import from react we have two things first is create context and you can just use a state and here I am going to write our sidebar in the contest and create contexts by default I am going to here initial value so what should be our initial value I am going to initial Terrace here select mask and it's here value is Sim object and should be values collapsed false and we can pass here our initial value and let's create our own more component const sidebar oh provider and then we can accept our children and also we need to write type so this box and children and react node and here obviously we are not props and here we can do here we can return our sidebar contest dot provider and here will be value and values should be as object and object contains our current tester and double so just this logic should be moved [Music] as as sidebar and comma say toggle and if we shoot this one I'm going to right here and here also initial value should be sorry sorry this is collapsed so it should be and this is as a function so that we can give us function for now empathy and this doesn't do anything for now and here this should be here sorry and it is also here yeah and now our contest is working fine here we can create one so let's use stat contacts you can create here and go ahead you should call that concept so here and those sidebar contacts but we are not exporting that so explore default sidebar provider and this side will provide we should be wrap app level and and you can apply well as well as so I am going to write app level here sidebar provide and this should be here and don't just remove this one then we can use here use con text and here we can give the server context this should also export that to here spot and advert context and also need to have the clear use context and copy this one here and copy this one here because we are returning this context here you can see exactly the same name and now we can see our inside of here what will happen so nothing else showing let's see what we will do mistake inside of this I hope I haven't a render of children so that's why yeah now we can see and change the page about um it's working fine and you can create mail space and as well as contact space so let's go ahead and create here so I'm just going to duplicate this Pages here so I don't need to write all and here duplicate this and here contact and here should be on board contact and I also need one more paste this smells and we can write here it's not as you can see on mail is no it's working fine and here you can see when we refresh is open because we are not saving data inside of local storage so that's why because when we ever refresh any pages of react this destroy our data so we don't have any step value so it's gone open by default values is false so I hope you learned something new and you can create this whole server effect and enjoy I will meet you in next one [Music]

Channel: The Brave Coders

Views: 29,297

Keywords: Collapsible Sidebar, sidebar, sidebar in nextjs, Collapsible Sidebar in Next.js, how to create sidebar

Id: _ORPWeJFXwQ

Length: 41min 16sec (2476 seconds)

Published: Sun Jan 29 2023