Creating Navbar Using React | MERN Navbar | Blog Application MERN - 2 | Intellipaat

[Music] hello and welcome to yet another video of our mon stack block project series I'm R mhani and today in this video we will be creating Navar component for our blog website along with that we will also be creating custom hooks for our blog website in the previous video under this mon stack project series we covered the project setup and routing for our blog website so if you have not watched that video then I would highly recommend you guys to watch it before this one you can can find it in the ey button section okay now that being said let's dive into today's proceeding so in navigation bar if you have noticed there were two parts first one was the top header part and there was this hamburger menu and on click of that hamburger button uh the menu was popping out and on the mobile screen what we want we don't want the whole navigation we want just the black line and that particular uh hamburger menu and uh that menu contains all the options when we are in the mobile version so for that we have to create two components first that will be our nvar and another will be our menu first of all we will start by creating a nav bar and then we will uh see how to create that particular small menu which was popping up when we will be clicking that particular button okay so uh first of all um I'm creating one div I'm inside my navbar uh. jsx and over here I'm cre creating this um div and uh let's give this div some classes so let's say class name um we have SED up our telin right we did that yeah we did that in the last video so yeah uh let's say Flex display will be Flex item Center justify between because there are only uh two things first one that is our uh website's name and another thing was that particular um menu and uh write button over there okay so those are the only things then um pedding we will give is six and in medium screen I want my pedding to be so uh this is all the numbers which uh I have feel that is good for my screen and if you want to uh change this number according to your uh preferences you can do that as well okay pixel and py as 4 we also want this particular uh nav bar to be of black color so black and whatever the text we will be putting onto this will be of white color now after that um we have one H1 tag let's write classes for H1 tag so let's say class name and uh text will be LG then uh for the medium screen I want my text to be Excel font will be extra bold you can see this suggestion coming in my uh system right now in this I'll be uh writing my um blog site's name so uh what I want over here is whenever I'll be clicking on you know company's logo or that particular site's name I want my page to get refreshed and redirect me to the homepage so for that what we will do we will use Link so link is basically coming from our um router right right so it's basically a part of react router D we also have to import link and over here I'm writing the name of the site and I have given my site as um blogosphere sphere like this now you can see over here this link is not imported yet so we have to import it so let's say import link from react router Dome okay now after this link what I had uh I had this uh search button right so uh I also have to write the functionality to make that particular search button work so um this will be conditional rendering when whenever we will be searching anything so what will be the condition there whatever the name you give inside your search bar that particular field if matches to the backend data then we have to fedge that data from the back end and show that particular data to our front end okay so for that what I'll be doing I'm opening and closing one curly braces over here and let's say path triple equal to if my path is U slash and uh I also want this search button to appear only on my home screen otherwise I don't want uh this search field over there right uh otherwise my nfar will be very clean and blank now here we will give one uh div open and close and uh inside this div we will write some class names and uh let's make displ Flex first justify Center and um item also Center space x0 and over here we will have our let's say input field okay and uh for this input field uh we also have to write the function as well so we will do this later uh but right now let's just give the stylings first so let's say class name outline none PX3 text will be black background will be wide and uh I want this to be rounded rounded um from one side okay Excel like this now uh I also have to give uh some placeholder over here so let's say placeholder placeholder and um here I'll just say search a post and type will be text like this now after this we will create one uh you know search icon so for that I'm using a tag or you can um take div as well whatever you like okay and I'll be doing that over here so let's say P tag and uh on click of this button uh there will be some functionality happening so right now I'm just you know keeping it as it is and over here uh on this there will be on change on change okay we'll create this functions later but uh as of now let's just um be done with the styling okay and uh whenever I'll be clicking this button I want to want it to navigate the data inside it right so for that um we will be using a navigate prompt and everything I'll show you how to do that but uh first of all let's just uh complete The Styling part first so let's say class name uh cursor will be pointer first of all pointer ping will be one background will be white text with be black and this div also rounded from one side so if you see uh over here I have given uh rounded from left in uh in the text field and round it from right in my button field okay so that it will uh give me complete over shape both together now now I'll be needing one icon over here right so we will import our react icon Library I'll show you how to do that first of all open your terminal and uh move to your front end part so let's say CD front end so we are inside our frontend folder okay and go to your uh Chrome browser and over here uh type react icons and over here you can see this npm uh JS uh documentation so you can refer this documentation uh for the different kind of icons if whatever icon you want here I'm just copying this particular link and uh pasting that particular link inside my terminal so it will uh download rate icon inside my project now if you'll just go back and open this first link which says Get Up pages okay you can see uh there are lots of rect icons over here you can use any icon you want there are colorful icons there are uh bootstrap icons Dave icons and everything everything you can get over here okay so these are very beautiful icons so we will be using this icons throughout the project so uh you must set this up okay now you can see over here uh my react icon is already uh downloaded and uh now over here I'll put one icon so I have already uh searched the icon which I want to use so for this I'm using BS search like this I'll import that particular icon over here so let's say import BS search from react icons slbs now uh let's move ahead and create this functions first so uh over here what I want uh on change I want this to uh set the prompt value so for that I also have to create the prompt variable right uh so that it will uh match whatever the value we are giving to it to the back end so we have to send that data to the back end so for that uh at the very uh top over here I'll create some constants so let's say constant first will be prompt prompt comma set prompt we will be using um use State over here to set the values then similarly uh we will also be needing one more used it for the menu purpose so let's say menu and write set menu and for the beginning we will be uh making this as a false we want this to toggle right then we also create one uh navigation over here so we can Navigate Okay so let's say navigate is equal to use navigation so this use navigation is coming from a react router D again after that we will have have a path and this path will take us to the location so we also have to make use of this Ed location over here again this is coming from our react router Dome on the top you can see uh it has Auto imported uh inside my react router Dome now dot path name so we give this uh path name because we want to navigate to some other page so we have to provide the whole path name to our path now coming back to our uh on change function over here what I'll do I'll just um whatever the text we are writing inside this input field I'll take the text inside my e variable and I'll uh what I'll just do I'll just set whatever the value we have return return inside it to prompt so so to do that we will just make use of our set prompt and inside that we will just give e. Target value like this now what we want uh we have set this value we have to change the content so for that uh we will write the function over here inside this uh BS button so over here I have return on click function and um on click of this function I want it to navigate to where to whatever the prompt was so let's say prompt and we will write the tary operator so let's say um question mark search plus prompt call navigate in that case if the prompt matches we will navigate to home screen so this is how our uh searching algorithm is working over here now after this uh we will uh create a conditional rering for our menu okay so for that what we will do we will create one uh div over here at first and uh then inside this D let me first give some class name so at the starting the display will be hidden uh because uh whenever I'm in my full screen mode I don't want it to be shown okay and U justify Center for medium screen space will be four now inside this particular div I'll again make one conditional rendering like this now inside this particular div what I'll do I'll uh check whether the user is login or not so for this particular menu uh there are few conditions so whenever I'm in my uh bigger screen I want this menu to have only uh two to three options but when I'm in the smaller screen I want it to have all the options right and uh if I if I have logged in then I don't want a register option and login option instead of that I want this particular hamburger menu so for that we have to make seral conditional rendering so for that we will check whether the user is login or not and uh we will be getting this user as true or false from our context so we will learn how to do that as well but right now I'm just making use of it so let's say user if the user is true in that case what we will do we will just just give H3 over here and uh uh we will just uh give the option to write to the user okay so we will just give over link like this and uh this link will redirect to SLR okay like this now between this link I'll write uh right or uh you can give a pen option as well but I guess the right button will be more clear okay if this is false in that case what we will do we will uh give the option to login or register so for that also I'm taking the H3 over here uh providing one link to my um you know uh login page first like this and between this I'll write login now again we will make one more conditional rendering over here we will check whether the user is true or false if the user is true in that case I'll give one uh div and that div uh on click of that particular div will will show our menu so let's do that so I'm writing over here like this on click of this particular button what I want I want it to show menu like this and uh between this uh I'm creating one P tag and U uh let's give uh this P tag some class name so let's say class name U pointer will be cursor cursor pointer and uh Position will be relative like this and I'll be making use of this particular fa bars icon so you can take any icon you want I have selected this icon for uh now and I'm just copying this particular part down in my import statement and importing this icon from um react icon so fa bars like this and this is from fa Library so I'll just ch make a change over here like this and this uh is imported now now what else I want to do over here is uh I want to you know check whether the menu is open or not so for that I'll be uh writing menu uh this part is giving error because user is right now user is not defined anywhere so that's why it is giving you the error once we will make the user contacts uh then the error will be gone okay and for in that case if uh the user is already logged in then I want to show my menu bar so menu menu we have already created so that that's why this menu we also have to import this menu so at the top I'm importing the menu like uh uh this menu from back slash okay back slash uh okay we inside component only so here is this menu okay like this so menu is now imported now what you have to do we have to uh also provide the registration button right so for that uh we will again uh create one div over here like this repeat now after that what we will do we will uh just give here the option if in case this is uh false in that case what we have to do we also have to give the registered button so let's give that uh for that I'm using using H3 over here taking my link uh this will link will redirect me to my register page so slash register register and uh between this I'm writing register register like this and uh after that uh I also want to to create one uh show menu button over here right so for that I'm making one more div this menu uh will be you know for the small screen it will be hidden for uh sorry for the large screen this menu will be hidden so for that uh I'm creating this on click and for this also we will be having show menu and class name for medium screen this will be hidden text will be LG and uh inside this particular div I'll be taking P tag let's give this P tag some class name so let's say class name over here we will make our cursor as pointer pointer uh position is relative and this will be having fa bars again okay like this again outside this we will uh render our menus so let's say menu and then menu okay we have completed our Navar now now one more thing uh is left over here is to uh create the function to show menu okay so this function what we are calling over here we have also have to create this particular function right so for that what I'm doing I'm writing at the very top I'm creating one more constant over here so this constant will store my show menu function and this show menu function will just uh change the value of my set menu variable okay so I'm changing the state of my set menu using my menu like this so now show menu is defined now what we have to do we also have to uh make our user right so we are making use of user if you see over here we are validating each and everything uh based on whether the user is true or false right so for that uh what I'm doing I'm creating one more variable as const user is equal to use contact and inside this I'll be passing my uh user contacts file so I'll be creating this file later but right now I'm just passing this particular file so let's say uh user contacts okay so this is basically a name of my file I'll be creating this now okay now let's just move ahead and create this user context over here okay so inside my SRC I'll be creating uh one more folder you can directly create a file as well if you like but I think um creating the you know folder will be uh the better option because um uh we can uh easily debug this okay so so let's say contact like this and inside this particular contact we will be creating user context do jsx now over here I'll be writing RFC this will create this function for me or what you can do over here is uh you can just like RFC because I don't mind if the export is in the first line for this particular part okay and over here you also have to uh install the exos so for that write in your terminal npm install I exhaust now you can see your exhaust is installed in your uh system so first of all I'll start by importing uh my exos so let's say import exos exos from exos itself then um I also have to import um create context used effect comma used it so I'm completing my import over here we also have to create one uh URL file so that we don't have to write this again and again we can directly uh write that particular part as well but I prefer uh creating this URL file separately okay so if you want to write the you know Local Host 5,000 again and again you can do that as well or you can create a URL file so I'll be creating one URL file inside my SRC so let's create that I don't want that inside my pages I just want that inside my uh SRC okay so inside my SRC I'll be creating one file over here the name of my file will be uh url. JS okay so inside this URL folder we will be having uh two exports so that basically are two variables we will be creating like this over here so let's say export constant uh first one will be URL is equal to uh HTTP colon Local Host Local Host 8,000 and another one will be uh the images so we don't have uh images folder right now but later we will be having this images folder and from this particular images folder we will be getting all of our images okay and uh right slash whatever the uh images uh we are uh giving to our back end that will be store in this particular folder so that's why I have created this two uh particular um UR URLs over here and uh we will make use of this URLs again and again okay so I'm just closing this part and uh over here inside my use uh contacts we will import that particular uh URL from uh our URL folder so let's say U RL from dot do back SL URL you can see the file name over here right now I'll be uh removing this particular part from here because I don't want that so let's just write uh export const user contacts is equal to create Conta text create contacts and I want this to be object but empty object for now so initialize that F so uh now on top of this function what I'll be doing I'll be uh you know um creating one uh export variable like this so let's say const user contacts uh is equal to create context create um contacts like this and uh this will be having this MD error over here and over here instead of this user context what I'll be doing I'll be uh writing user context provider so user context provider is my uh function like this okay and this will be taking uh childrens so let's say uh over here we'll be passing childrens as a prop now we will also be going to wrap this um wherever we will be uh giving our routes so that's why we want it to have some children's over here okay after that uh inside this particular part what I'll be doing I'll be first uh you know uh creating uh one new state over here so let's say const and that is for my user so let's say user users comma set user user like this and uh at the very beginning the S set state will be having null value because nobody is yet log in so that's why the user is null now we will make use of a use effect uh over here we will uh pass the function like this and inside this we will get user and this we will be getting from our back end so whenever we will be setting up the back end uh we will be having the data over here with us now after this we will be uh creating one constant uh named name as get user and this will be the function and we will be getting the data from the back end so I'll show you how to uh request the data from the back end but uh we haven't set up the back end yet so it won't be working as of now but when we will uh set up our back end we will be uh you know getting the data over here so whenever we are dealing with the back end and whenever we are performing a sync operation at that time we basically make use of a try and catch block so so whenever we uh encounter any error that will be catch inside our cat block and otherwise the tri block will get executed so inside the tri block what I'm doing over here is I'm uh writing one constant creating one variable as res is equal to Res is basically a response and uh we will make it a wait until our exos do get and the data we will be getting is from our url url we have just created and uh Plus whatever the API we are going to create so I'll show you how to create this API and end points but right now just uh uh just you know write it over here let say API SL slash we will be creating one refetch endo refetch and whenever we are refretting the data what I want I want it to be with the credentials so let's say with credentials like this uh and uh this will be true you can also generate a token so for that we basically use JWT and uh we can make use of slugs also and uh from that we can um log to your particular account or you can get the user data over here so right now let's say set user uh we will pass this value to set user rest. data and whatever the data we got from the back end will be given back to our user so whenever we will be getting uh user successfully at that time the user will be not null right so in that case we will have those particular uh menu function and registered login function will be working over there okay uh right now uh if we get any error while fetching the user in that case what we will do we will just console.log whatever the error we got now very important part inside my uh return statement what I'll do I'll just pass my user uh user contacts. provider and in value we will pass user comma set user now we will be making use of this user and set user many many times okay and uh inside this this will contain all his children now I'll quickly move back to my app.js over here and I'll uh you know wrap this around my user contacts so let's say user contacts provider like this this and uh select all of this like this okay now you can see the user context provider is already imported from my uh context user context okay now we have successfully completed our nvar functionality we have wrapped our app.js uh with uh user context provider now it's time to create that small menu part okay so uh for that uh let's just make sure that we have imported the right menu over here so you can see that uh we have already imported this menu and we will move to this particular file over here so you can see I have open the menu component inside my uh vs code window and we will be now creating this particular component over here okay so first of all inside our uh menu portion what we will do I'll just write import over here uh import uh first uh first of all we will uh import use uh contacts from react over here uh also use contacts from our U user contact so that also so import both of them this this use contacts will be from my uh react like this now we will also import the exos so that uh we can get the data the user data okay then um we also want to import import link and use navigation from my react router d like this now first of all I'll be fetching my user from my use contact so I'll be creating one uh const inside that I'll give user and uh we will make use of our use uh contact contact and inside this we will also again pass user contacts like this this will be use contacts not user contacts okay okay just you this fine now uh we will also make a one constant as set user and this set user will be coming from use uh use contacts user contacts okay uh we will also create one uh navigation over here so let's say navigate navigate is equal to use navigation and function call okay now inside uh our return I'll be removing this particular part and over here what I'll do do I'll just write a class name so let's say class name um making my uh background as black like this uh width is equal to let's keep it 200 pixel uh you can change it accordingly okay whatever the size you want you can do that right now I'm just uh writing the values which was uh best suit for me and more Focus will be on how to create the back end not the front end because we all know how to write this t uh CSS code and also how to you know um um style the component according to our you know preferences so that's not main focus the main focus is to create the back end that actually works six for medium I'm making WR as 32 WR as 32 uh let's make it rounded um medium would work I guess P4 and U finally space from y AIS so let's say y four and let me wrap this okay so you can see all the code together now inside this based on whether the user is logged in or not we will uh pass the values okay so if the user is loging then and then only I want this to show right otherwise I don't want it to show if the user is not login then I want the login and register button uh if it's logged in then I will show the profile write my blogs and everything like that okay otherwise uh the if the user is not found in that case we have login and register button so let's do that first of all we will check whether the user is there or not so let's say if uh not user in that case what we will do uh we will just give the login button over there right so let's say H3 we will take H3 over here like this and U uh inside this I'll be writing some class name so let's say class name um uh we will be making our text white so let's say text white then uh I also want my text to be uh small so let's say text small and uh on Hover the text should uh turn like let's say gray so let's say text Gray and 500 okay and on H I also want my background to be changed if you want you can add it uh otherwise you can leave it okay so right now I'm not adding that uh and I'm making my cursor as a pointer over here like this and I also have to make use of my link obviously because it is redirecting me to the uh login page so all this menus of my um you can say menu bar all the options of my menu will be having a link tab I'm closing my you know terminal right now because we don't need it anymore so let's say to and this will be redirecting us to log page so let's say login and uh between this I'm writing just login like this okay now similarly I'll do for my um uh register page so I'm just copying this down and I'm pasting it over here and just changing this endpoint as resistor register and over here also this will be uh register like this now we will uh you know follow the similar process over here but now in case we have the user in that case what we will do we will give the option of our profile so [Music] we will move to the profile from that particular button so over here this will be profile profile and over here this will be uh profile and inside profile if you remember we have also passed the ID right so let's say profile first profile then slash we also have to pass the ID so what I'll be doing over here I'll be making this uh curly braces over here and inside this curly braces I'll be uh adding my user ID to my URL so let's say user dot slash ID okay so this is for the uh profile section so I'll be copying this particular part down uh and pasing it over here similarly uh we will have a right part okay so so over here I'm also giving the option to write the block and for that we will be redirecting to the right part so let's say right why this is showing error why this is showing error okay because this is not closed okay fine the error is gone now right uh similarly I'll uh paste this part one more time for uh my block section so for my blog also I want this uh user ID so that's why I'm keeping this over as it is and uh here I'm writing my blogs and over here I'm changing this URL to my blog so blogs also will be uh fetched based on my user id one more thing we have to make is a log out button so for that I'm pasting this one more time and over here I'm making this as a log out and uh on log out there has to be some uh you know pent functionality working right and I don't want the link over here this time I just want on click over here okay so on click there will be uh some functionality happening on the back end and after that uh we will be you know uh logging out from our particular um you know ID so for that let's create on click like this and on click uh we will be calling the function as handle let's give that function name as a handle log out okay and we will create this handle log out now at the top we will be creating this handle log out so for that let's say const handle log out and uh we will make this as a sync operation a sync function and uh on Call of this particular function uh we will try to log out so for that uh let's first create this try and catch block uh like this and catch catch will be catching error and in case we Face any error we will just console dolog error okay now inside this uh we will be uh creating one constant and we will give this as a response and over here we will U make this as a waight exhaust we will be fetching the data from uh exhaust let's say get and uh we will be getting uh the log out API okay so we will be creating this API in our back end so right now let's just just make use of this particular API and then we will learn how to create this API and how to you know make use of it so log out and we want this to uh log out when we have the credentials with us so let's say with credentials and we will make this as true so you can also uh make use of this with tokens but uh we have uh use uh credentials this time okay similarly we will set a user as null and also navigate to login page and I don't know why this is giving me the error I cannot see any um thing which can cause the error over here um okay let me check okay okay so over here by mistake I have removed this Arrow function from here okay so now you can see uh this is uh fine and uh this will be await space exhaust just a quick info guys intellipath offers a fulltech developer course which enable you to learn textech from both front end and backend through this course you will gain hands-on experience with the skills and Technologies such as SQL Java data structure JavaScript HTML CSS nodejs and react under the guidance of industrial professionals with this course we have already helped thousands of professional in successful career transition you can check out the testimonial on our Achievers Channel whose link is given in the description below without a doubt this course can set your careers to New Height so visit the course page link given in the description and take the first step towards the career growth with the full stack developer course

Channel: Intellipaat

Views: 7,393

Keywords: Creating Navbar Using React, MERN Navbar, Blog Application MERN, React JS Project, React JS Project From Scratch, React JS Website Project, Basic React JS Project, Navbar In React JS, How To Create Navbar In React JS, Create Navbar In React JS, Navbar React JS, How To Create A Navbar In React JS, How To Make Navbar In React JS, Dark Mode In React JS, Dark Mode And Light Mode In React JS, Dark And Light Mode In React JS, Intellipaat

Id: MZyz139mamw

Length: 51min 40sec (3100 seconds)

Published: Fri Jan 19 2024