For once, we've got our reactor in place.
I think I'm going to start on those components that will be displayed on every page so we've got no
splitter.
And also the sidebar now, when it comes to NAV Bar, we need to understand that there's going to be
two layouts and I'll control them using access.
So I have a big screen lamp where I'm going to have the logo, one of the links and also the card buttons.
And then once we get to the smaller screen, this is not going to be done using the react, but essentially
will have only the logo and and toggle button here.
So that's going to be a small screen layout.
And then once I click on a button, then I can see the sidebar.
And the same is going to work on the sidebar where essentially will only see the sidebar once we get
to the small screen.
So now once I navigate to the big screen using siestas, I'll just hide it because notice because now
I have the links and then the buttons.
Hopefully that's clear where we have a small screen layout for number where there's going to be only
logo and then the buttons.
So once I click the button, I can see the sidebar and then once I get to the big screen, I'm not going
to have the button to tackle the sidebar.
And also sidebar will be hidden by default.
And in here, I'm going to have my links as well as the card buttons.
Now, these card buttons are going to be a separate component because I'll use them here in the sidebar
as well.
So let's set up our number.
We're going to navigate back to our project.
Of course, we're looking for NAV Baja's again.
It is going to be in the components directory.
I'll close all the files that I have currently open.
So open the doors.
I'm just going to close them.
And in the source, we're looking for components and nav bar just so that our nav bar component, as
you can see, we have quite a few imports.
So of course we have the style notice here.
I set up my styled component, which of course will use in a second.
Now, in this case, I call this nav container just to showcase that you can call whatever you want,
but in most cases it's going to be a wrapper.
And as you can see, I'm returning and have like I said, we can return whatever HDMI element we would
want.
And as far as the logo, well, I'm just importing the image from the assets.
And if I haven't covered this already during the course, if you want to render images and react, you
can either do it using the URL like we have been doing from the API, where essentially we get some
kind of URL that points back to the API or if you want displayed locally, then of course you need to
set up that image.
So in this case, I have assets folder in that assets folder I have Lowgar 3G and then we import now
the Gotch about the import that the path has to be a full path, meaning we need to point to the directory,
which is going to be assets, and then we have the full name.
So we're going to go with a logo on the DOT SPG or for example, we have zero hyphen BCG and then dot
jpeg.
So effectively we need to include the file extension as well because remember, when it comes to Joska
files, we really don't care.
We just go with the file name.
But when it comes to access as well as the images, we need to go the full path around where we go with
the full name of the file.
So in this case, it is a logo and then that Asaji then we need to give it some kind of name.
So in my case, I went with logo and then of course I'll have to use it in my component.
We have component I'm sorry, we have icon coming from reactor icons.
This is just going to be that little toggle button icon.
We have a link from reactor.
Our done is, of course, will be setting up links.
Then also we have links coming from the content and I'm going to cover that once we get there.
And then, of course, the card buttons component that will work on in next video, because first I
want to focus on setting up our number and then, of course, we have a few imports from global context
that we're not going to cover at the moment, but we'll cover later once we get there.
So I'll close the sidebar just so I have a bit more real estate.
And in here we're going to go with Nerf container and inside of this nav container, what I would want
is set up nav centre dev, so nav centre dev.
And then inside of this div, I'm going to go with my header where I'm going to place my.
Image as well as the bottom.
So we're going to go here with knife header and inside of it I'm going to place my image on a button,
not just to showcase that we can wrap our images and legs essentially and show you how to do that.
So if I make this smaller, notice how I can click here and I'm navigating back to the homepage.
So the reason why is that happening?
Because I can just place my image inside of the link.
And in order to do that, we simply need to go with our link component that we're getting from reactor
down.
Remember, that was the component that we have to use.
And I'm just going to set up some kind of path.
In my case, that is the homepage.
That's why I go with forwards.
And then we go with image.
And remember, for the source now I need to use this variable name wherever you have it for the name.
So in my case, of course, that is the logo.
So I go with logo as far as the alternative.
I'm just going to say comfy and sluff.
And once I save, I should see my logo here.
And of course, once I click, I can navigate to the homepage.
But since of course we already are on the homepage, it's kind of hard to see that.
So let's go to the products.
We should still see the number.
Correct, since my bar is displayed on all the pages.
And then once we click, notice that we nicely navigate back to the homepage.
Beautiful.
And once we've got our link and I like I said, I'm going to go with Button and then we're going to
add right away type button that's just necessary for the demo.
We're going to go with class name and nav toggle.
So that's the name of the class.
And by the way, if you want to see the styling, just scroll down and notice this is the success that
I used and this is the case where I use the next thing, because inside of this button I will place
my icon.
That icon comes as the SPG element.
So I said, yeah, grab me the knife toggle.
And then inside of that toggle I'm looking for the SPG again, something I covered already before,
but I'm just reiterating.
So we all are on the same page now.
Eventually there's going to be unclick, but not for now.
So we're going to go with F.A.A. because that's the icon I would want to place.
And the moment I say, of course there is, I have my logo and of course I have my button as well.
And next, of course, I would want to have those links.
Now, I can tell right away that the links will be hidden if you scroll down a little bit.
Notice how by default I had the links and then only once I got to nine hundred ninety two, then links
are displayed, something I showed at the very beginning of the video.
Now the gotcher here is, remember, technically, if I wanted to, I could do something like this where
I still want to set it up within the center.
So don't place it inside of Napster, but also don't push it outside of the center.
I can go it on our list and we're going to go with NAV Links class.
So that is important.
And technically, yes, I can go with list item and then place all my links on one by one.
But remember, it was somewhat of a bad practice.
Why?
Well, because we also have the number unlocked.
And by the way, close this one.
We also had the sidebar correct.
And in the sidebar, I was essentially using the same Leung's, so it wouldn't make sense if we would
set those links up in one place and then just important and of course, render them.
And if I'm telling you that, cause I already set up those links in a separate place, so I would want
you to navigate the utils and then look for constants Jayesh.
And in here there's multiple things that I set up.
One of them is services.
The other one is the URLs that we're going to use.
But the very first one is of the links component.
And in that links component, all essentially it's an array, but I'm just going to call this component.
And in that array, each link represents the page.
Correct.
And it is set up as an object in here.
I have the idea since I will have the list, I'll have to use the Kiprop then the text that is going
to be displayed, also the forward slash.
So in your case, if you want to add more pages, I would suggest just adding those links in here.
Now, there might be some issues eventually if you keep on adding more and more links with a sixth sense.
In my case, when it comes to CCIS, I really thought that there's going to be only four eventually.
There's also going to be a check out.
But that's a story for another day.
Just keep in mind that if you want to add more links, you can definitely do it.
So I have my links exporting as links.
So this is named export.
And of course, in the of.
And also in the sidebar, I import those links, I import that, all right, now what you also notice
that there is no check out.
So check will have to do it somewhat manually.
Now, why we're doing manually because checkout will be only displayed if the user has logged in this
case noticed the user hasn't logged in because it says log in and then I would need to log in in order
to change it to the log.
So once we log in, only then we can see the checkout.
That's why I did not include in this.
All right.
So now let me close the sidebar.
We have our links.
And again, instead of setting up manually, I'm just going to iterate over my mom's links map online
for every item.
I'm just going to call this link, not going to be particularly original.
And from the link, what I would want to get well, remember, it was an object and the properties were
already taxed.
And then the URL that is all coming from the link.
And as far as the return, we're going to go with a list item.
And remember, we have, of course, the list.
So we need to have a Kiprop I'll pass in the area.
That's going to be my unique value.
And inside of this list item, we're going to go with a link and then, of course, we'll have to up
and I will point to the URL.
So where I would want to navigate and inside of this link, I would want to show my text so safe.
And of course, now I should see my links.
Now, keep in mind, we're not going to see them on a small screen.
So let's navigate here.
I have my hello, which, of course, is the error page, but instead I would want to go to the home
page and there it is.
Once we get to the big screen, of course, we can see the links.
Now, while we're still on the small screen, I cannot see the links.
And by the way, I'm massively zoom in.
So, of course, if you go one hundred percent, you'll see them right away.
But in my case, I'll have to make my screen size bigger.
And they're just now I have my lunch.
So now, of course, we can go to about page, product, page on page.
And of course we can also use our logo from here.
I click on a logo and I go back to the homepage.
And then the last thing is going to be card buttons, which we're going to set up in the next video.
So I have my list over here.
And since I would want to display those card buttons in both places and by the way, I struggled here
with the naming.
I went with card buttons.
Technically, it's a link and the second one is the button for the login.
So I was struggling to come up with a name.
So I just went with card buttons, just giving you a heads up where technically maybe you might come
up with a better name.
But just remember, if you change the name, then you need to use it in two places is going to be in
the bar as well as the sidebar.
So right after the on our list, I'm going to go with my card buttons.
So my component, which again, we're not going to be able to eventually see once we set up properly
discounts on the small screen, but.
It's going to be displayed on a big screen here as far as the buttons, beautiful ones, everything
is in place as far as the basic Narberth setup.
I think now we can focus on the card button suckers.