‫All right.
‫And so now to wrap up this section, let's build the sidebar
‫and in particular the main app navigation.
‫So both these components actually already exist,
‫at least the styles for them.
‫So let's import the logo here, enter the main nav components
‫and let's bring them in.
‫So logo from, and they are actually even in the same folder.
‫So main nav from main nav like this.
‫And now right here in this main nav,
‫I already have these two styled components.
‫So we have nav list and a link
‫but we are not exporting any real component here yet.
‫So we want to really export the main nav here,
‫which will be a nav element.
‫Let's just write that here and beautiful.
‫Now for some reason, the image is already appearing,
‫which I think it shouldn't
‫because it is not even in the right place.
‫So let's reload here.
‫And so then we get the message that it hasn't been found,
‫which is probably what you saw initially.
‫So the reason for that is that here in the logo component,
‫so let's also open that one.
‫So here we are including this image.
‫And so this image should live in the public folder
‫but right now it's not because it is in the starter files
‫that I provided and right here in this image folder.
‫So please go ahead to your data folder.
‫And then inside of image, let's grab these two images here
‫and direct them into the public folder.
‫So then image is empty and we no longer need that.
‫And beautiful.
‫So this is the Wild Oasis Hotel logo.
‫And so like in most other web applications,
‫we display that right here in the side bar.
‫Great but now let's turn our attention
‫to what actually matters, which is this main navigation.
‫So usually we implement a navigation like this
‫by using the nav element.
‫And then in there an unordered list
‫which will contain many list item elements.
‫And then each of them will contain a link.
‫All right, so let's check out what we already have here.
‫So we already have this nav list
‫which is an unordered list, and we already have the links.
‫So let's replace this here with the nav list.
‫And then here, let's actually use that link
‫that we already have, at least temporarily.
‫So since this is an A element, so an anchor
‫it needs the eight rev prop
‫and then the first link right here should go
‫to the apps dashboard, all right.
‫And then here, let's say home.
‫'Cause this is essentially our homepage.
‫So if we click here,
‫then that actually causes a page navigation
‫and it goes to the dashboard.
‫So let's just do another one just so we see the problem
‫with this.
‫So let's go also to the bookings page.
‫And so let's check this.
‫So if I click here now,
‫then notice how the entire page was actually reloaded,
‫which we could see up here from the browser.
‫So also there was now a flash of paint here on the screen.
‫And so that's exactly what we do not want
‫in a single page application.
‫And so therefore, just like before,
‫we need to actually use the link
‫or the nav link component that is built into React Router.
‫So here we actually want the nav link component
‫that is provided again by React Router, as we can see here.
‫And here, let's use the same one.
‫And so for now, they will lose their styling
‫but now they do work,
‫or at least they will after we fix them.
‫So here now we need the to prop
‫but then afterwards we move between our pages very smoothly
‫and without causing any page transitions, great.
‫But now the problem is how do we actually
‫style these nav link components?
‫Because they are coming from a third party library
‫but we still want to style them somehow.
‫So how can we do that?
‫How can we style these components
‫that we didn't write ourselves?
‫Well, luckily for us,
‫we can use a nice trick with styled components.
‫So instead of doing styles dot the HTML element,
‫we can pass in basically some other component.
‫And so as you can guess, here,
‫we are going to pass in the nav link.
‫And so let's call this one here, styled nav link.
‫And then finally we will have our final solution here.
‫So styled nav link.
‫And immediately you see the change there and beautiful.
‫So now it even marks the current one
‫as the active link, right?
‫And so if you want, you can of course go check out
‫exactly the styles that I wrote here, but in a nutshell,
‫remember that when we use the nav link component,
‫then React Router will automatically place the active class
‫on the link that is currently being active.
‫Okay and so we style those here differently.
‫And then here we also have stylings for SVG
‫which brings us to my next point or to my next topic,
‫which is that right here in these links,
‫we also want some really nice icons.
‫So that's something that is pretty common once again.
‫And so let's bring in the React icons library.
‫So NPM install React-icons.
‫And then in the meantime,
‫let's actually go check out the documentation here.
‫So if you just Google React icons,
‫it's probably going to be right, this first one here.
‫And so what this library does is to basically import many,
‫many popular icon sets.
‫So we can check that out right here.
‫And so here are all the icon sets that we can use
‫with the React icons package.
‫And the ones that we are going to use
‫are the hero icons two, which again,
‫are actually part of Tailwind.
‫So here we can then see how this is going to work.
‫So all we need to do in order to use one of these icons
‫is to import the icon name that we see here
‫from React icons/HI2, which stands for Hero icons two.
‫So let's try that.
‫Let's first copy this and then let's find ourselves
‫an icon name for the home.
‫So let's just control F here.
‫So home, but let's actually look for an outline here.
‫So exactly this one right here.
‫And so if we click here, then it will even copy that.
‫Then we paste that here.
‫And now all we have to do is to place that right here
‫in our code.
‫So let's place it here close to the text.
‫And so this is now just a regular component
‫and all this will do is to just display that icon.
‫So then let's also wrap that text in a span.
‫And with this,
‫we should have or, well, yeah, we should, but we don't.
‫So I guess I forgot to import.
‫Well, actually it is here.
‫Let's try that manually and, nice, there it actually is.
‫Okay and as we move to another one,
‫then it fades out here to this nice gray color.
‫And then as we hover, it again, becomes like this indigo.
‫So like this blue color, which is our primary color.
‫So really, really nice design, I think.
‫And so well, let's just keep going
‫and implement the entire thing here.
‫So here, let's also add our icon.
‫And of course, I already selected them
‫and so I will just start typing here
‫and then they will probably be automatically imported.
‫So this one is called outline calendar days.
‫And then let's again wrap this booking texture
‫into its own span, yeah, nice.
‫So this is starting to look
‫like a real application, isn't it?
‫So let's just duplicate this a few times.
‫So next up, we have one page for our cabins.
‫So here we are going to use that modern home
‫that we saw earlier.
‫Okay, let's keep going and two more.
‫So next we want our users.
‫So Hero icons, and then it's always outline
‫and then user or actually users.
‫So I guess I imported the wrong one, then,
‫here from the top, there we go.
‫So here, changing the text.
‫And then finally, also a settings page.
‫Let's use this one and then settings.
‫Great, now remember how we actually have a few more pages
‫and a few more routes
‫But these, we don't want in the main navigation.
‫For example, we have the accounts page here
‫and so that will later be in the header, right?
‫So this is looking really amazing here if you ask me.
‫And so let's just to finish, add a bit of space there
‫between the logo and that menu.
‫So let's make this here, just a flex container.
‫The flex direction should be column
‫because then we can easily add a gap of 3.2 rem.
‫And with this, we finished this sidebar here
‫and we also finished this section
‫because before we keep going any further
‫in building out the application, we first need to deal
‫with our data.
‫And so next up, we will explore super base where
‫we will be able to build a fully fledged API
‫and store all our data.
‫So that's going to be really, really exciting
‫because that's gonna allow you to essentially,
‫build full stack apps completely on your own.
‫So completely,
‫without knowing anything about back end development