00:00:02 Having created the mobile nav, now we are ready to turn it into a real desktop homepage navigation in form of a left sidebar.

00:00:10 Why left?

00:00:11 Well, because we will also have the right sidebar later on.

00:00:15 So let's focus on the left first.

00:00:17 I'll create a new component in the components folder under navigation and I'll call it left sidebar.tsx.

00:00:27 Keep in mind that now we're outside of the navbar folder because this is a sidebar.

00:00:32 I'll run RAFCE and I'll put it within the root layout.

00:00:38 Right here where we have the navbar, we can create a div just below it.

00:00:43 And then here we can create a left sidebar coming from navigation.

00:00:48 Now you cannot see it yet, so let's actually change some styles here.

00:00:52 I'll give this main a class name, equal to background, dash light 850, underscore dark 100, and relative.

00:01:02 This will change it to a nicer background.

00:01:05 Let's also give this div a class name, equal to flex.

00:01:09 And then below the sidebar, let's have a section within which we'll have a div, and within which we can place this children.

00:01:17 Now, this section will have a class name of flex, min-h-screen, so it takes the full height of the screen, flex-one, flex-call,

00:01:29 so the elements appear in a column.

00:01:31 There we go, now we have a different color.

00:01:34 We can give it a padding X of 6, padding bottom of 6, padding top of 36, and in maxMD devices, padding bottom of 14, and in small devices,

00:01:46 padding X of 14. I found those values to work well, and you can see that the padding actually pushes now the title of each one of these pages,

00:01:55 so we can see on which page we're on.

00:01:57 If I go to Devflow, we can now see welcome to the world of Next.js.

00:02:01 But that's not why we're here, right?

00:02:03 We're here to see the sidebar.

00:02:06 First, let me just provide a class name to this div, such as mx-auto, so margin-left and right-auto, w-full, and max-w of 5xl.

00:02:17 So this is a max width that our content can take.

00:02:20 You can see that this just pushed the content to the middle, so we have enough space for the sidebar.

00:02:25 So let's develop it.

00:02:27 Our sidebar will actually be a section.

00:02:31 a section within which we'll have a div that'll have a class name equal to flex, flex-1, flex-col, and a gap of 6. Within which,

00:02:45 we can render nav links.

00:02:48 Yep, the same component we used in our mobile nav.

00:02:52 Let's fix the typo.

00:02:53 Save it, and take a look at this.

00:02:56 We have something that kinda resembles a sidebar.

00:03:00 But now, let's style it further.

00:03:02 In this case, I can actually put the editor to the right side, so we can see what we're doing.

00:03:08 I'll give it a class name, equal to custom-scrollbar.

00:03:13 So this is to hide the ugly default scrollbar.

00:03:17 background-light900, underscore dark 200. light dash border sticky left dash zero top dash zero so we can position it to the top h dash screen so it takes

00:03:33 the full height of the screen flex flex dash call justify dash between overflow y auto border right so border r Padding of 6 to create some spacing.

00:03:49 Padding top of 36 to account for the navbar.

00:03:52 Shadow-light-300.

00:03:56 On dark mode, shadow-none.

00:03:59 It's not needed.

00:04:00 On max-sm devices, we'll simply hide it.

00:04:06 And on large devices, we'll make it 266 pixels to give it some more space.

00:04:13 That's gonna extend it a bit.

00:04:14 And with that, we have something that already resembles a very nice looking sidebar.

00:04:21 And it's actually fully functional as well.

00:04:22 But if you compare it to the design, there's also something that we have on the bottom left.

00:04:28 We can have a logout button, Or we can have some other buttons such as these ones here, like login, sign up, similar to what we have in the mobile,

00:04:39 but we'll make them just a tiny bit different.

00:04:41 So I'll go back and I'll go below the div that wraps the nav links and create another div with a class name equal to flex,

00:04:52 flex-call, and the gap of three.

00:04:55 Within it, I can basically copy and paste the two buttons that I have in the mobile.

00:05:00 navigation.

00:05:01 So I'll head down and I'll copy those two sheet closes.

00:05:07 I'll paste them right here within this div.

00:05:10 But in this case, they don't have to be sheet clothes.

00:05:13 So I'll completely remove the sheet clothes.

00:05:16 The link will actually go inside of the button, like this.

00:05:20 And same situation here.

00:05:22 Make sure to import the button in the link if you haven't.

00:05:25 And on this desktop sidebar, we have some more space to show an image.

00:05:29 So right above the span, let's render a Next.js image.

00:05:34 With a source equal to forward slash icons, forward slash account.svg with an alt tag of account.

00:05:44 width of about 20, height of about 20, and a class name of invert-colors.

00:05:54 And we'll also hide it on large devices.

00:05:57 So we can say lg hidden.

00:05:59 We only want to show this on smaller devices.

00:06:02 And likewise, we will hide the text on small devices.

00:06:06 So we can say max lg.

00:06:09 We will hide the text because text takes more space than the icon.

00:06:14 Also, we have to give this button as child property because technically it will become a link.

00:06:20 Now we can do the same thing for the second button.

00:06:23 Give it as child and we can copy and paste this image that we had from above.

00:06:29 Put it above sign up and change the icons from account to sign dash up.

00:06:36 And we can also wrap the sign up in a span that has a class name of MaxLG.

00:06:45 hidden.

00:06:47 I'll show you what this does.

00:06:49 So if you look at it, now we have login and sign up text alongside all of the other icons or links.

00:06:55 And if I start collapsing it, you'll notice that at one point, all the text elements disappear to allow us to have more space for the central content,

00:07:05 which is why we're here in the first place.

00:07:07 Not to read the navigation, which at this point is taking a large point of the screen, rather to focus on the content itself.

00:07:15 So now, as we collapse further, you can see it actually disappears, and then instead of it, we have this nice mobile sidebar.

00:07:23 This is looking great.

00:07:25 So not only did we make this mobile and desktop responsive, it's also tablet responsive.

00:07:32 That's when we hide these text elements right here.

00:07:34 Great job.

00:07:35 Considering that creating the mobile navbar was a lot harder, since we were developing this reusable navlinks component for the first time,

00:07:43 developing this left sidebar for desktop devices was a breeze.

00:07:48 Everything works so smoothly and looks exactly like it does on the design.

00:07:53 And while we're on the roll with creating navbars and sidebars, what do you say that we develop the right sidebar next?

00:08:00 That's this one that shows the hot questions that people have been asking, as well as some popular tags that have the most questions listed.

00:08:10 Let's do that next.