00:00:02 Before we dive into creating the navigation bar, I want to explain to you the design a bit and how there's going to be different types of navigation in

00:00:10 our app.

00:00:10 First of all, we'll have our navigation bar, which will contain the logo, the global search for the entire application, the theme switcher,

00:00:18 and finally the auth icon.

00:00:21 On the left side, we have our sidebar, which we'll use as the primary navigation in our app.

00:00:27 And finally, there's the right sidebar, which appears on larger devices and also shows some popular tags.

00:00:33 The best developer isn't someone who knows how to code, but the ones who knows how to organize and architect their code in a way that anyone going through

00:00:41 it will have a general idea of what's happening.

00:00:44 And the first and hardest step in becoming a better developer is understanding how to write better names.

00:00:50 good names for variables, functions, and even files and folders.

00:00:55 In our case, from the design, we can notice that there are three navigation-related parts.

00:01:00 So, to manage these properly, we can create a new folder called navigation.

00:01:04 We'll create it right within our components folder, navigation, and within it, we can create a new folder called navbar.

00:01:13 This is a folder and not a file because we'll have to separately handle the mobile navigation and theming inside it, as well as the desktop navigation.

00:01:21 This way, we'll keep them close but still separated from each other.

00:01:25 So within it, let's create a new index.tsx file.

00:01:29 Now, use RAFCE to quickly spin up our navbar component, rename it to navbar, and turn this div into an HTML5 semantic nav tag and just make it say navbar

00:01:42 for now.

00:01:43 Next, we want to import this navbar in our layout.tsx, because we want it to show everywhere in our application.

00:01:51 So let's head below the theme provider, right above the children, and here you can render the self-closing navbar component coming from navigation-navbar.

00:02:01 If you do that and go back to your application, you'll see the navbar now appears right at the top.

00:02:06 This might be a good idea to put our editor side by side by our browser, just so we can see what's happening.

00:02:12 There we go, we still have enough space for our code.

00:02:14 Now, let's go back to our navbar, and let's start implementing it.

00:02:18 I'll start by providing a class name to this nav element, and I'll give it flex-between.

00:02:25 You'll notice that flex-between is not a Tailwind CSS property.

00:02:29 If I hover over it, we cannot see what is it about.

00:02:32 There will be many classes in which we have to use flex justify between item center or for example flex justify center item center.

00:02:41 This idea comes from having to do this multiple times when building all the different applications I've built.

00:02:47 So to avoid writing these long class names, we have to reuse them whenever they'll be used.

00:02:53 For that reason, we have created this flex-between utility in globals.css.

00:02:59 So if you search for flex-between, you can see that it's actually applying three different class names, flex-justify-between and item-center.

00:03:09 So instead of just manually calling all of these three, every time you have to define this class name, you can just use our predefined flex between class name.

00:03:20 Just wanted to get that out of the way.

00:03:22 Now let's go ahead and create what is going to soon become our navbar.

00:03:27 I'll give it a background dash light 900 underscore dark 200. I'll give it a property fixed so that it's fixed at the top as you can see.

00:03:37 Z of 50 so it appears above other elements.

00:03:41 W full so it spans over the full width.

00:03:43 Panning of 6 to give it some more breathing room.

00:03:46 On dark devices shadow dash none.

00:03:49 and on small devices, padding X of 12, and typically shadow light of 300. So now we have our navbar, which currently hides our text.

00:04:01 We can also give it a gap of 5, so we create some space in between the elements.

00:04:05 Now, right within it, let's display a Next.js link component coming from Next Link.

00:04:12 And I'll give it an href pointing to forward slash because this is going to be our home logo.

00:04:18 So let's give it a class name of flex, items-center, and a gap of one.

00:04:24 And right within it, we can display a next image component.

00:04:28 that'll have a source equal to forward slash images, forward slash site dash logo dot SVG with a width of about 23 and a height of 23 as well with an alt

00:04:42 tag equal to dev flow logo.

00:04:46 It is super simple to use it now that we have the full public folder.

00:04:49 You can see it appear right here at the top left.

00:04:52 Right below this image, let's display a p tag that'll say dev and then within a span we can also say flow like this we can style this p by giving it a

00:05:06 class name of h2 bold you can see immediately how that changes it font dash space dash grotesque text dash dark 100 on dark mode text dash light 900 and

00:05:20 on max small devices so this is devices lower than 640 pixels we can simply hide the logo because we don't have enough space for it We can also style the

00:05:31 span by giving it a class name of text-primary-500.

00:05:34 You see how simple it is to use different colors now.

00:05:39 And if I expand this a bit to go below 640 pixels, you can see the Devflow logo appear.

00:05:45 But on smaller devices, we'll need screen space for the sidebar, for the buttons to open up the sidebar, the auth icon, and the search.

00:05:53 Finally, let's go below this link and let's render a P tag.

00:05:59 within which we'll have the global search.

00:06:01 This will be implemented later on.

00:06:04 And right below it, we'll implement a div with a class name equal to flex-between and a gap of five.

00:06:14 Within it, we can render our theme picker.

00:06:17 So this is it.

00:06:18 This is our mobile navigation.

00:06:20 And at the same time, it works perfectly on desktop devices too.

00:06:25 This was pretty simple, right?

00:06:26 Great job.