Layout And Header

[00:00 - 00:08] In this model, you are going to build an event management application. In this lesson, we will focus on building the application layout and header.

[00:09 - 00:25] Start by creating a new application using the shadcn template you have volume the use in the previous models. Now navigate into the created folder and open it in your editor.

[00:26 - 00:46] Install the following dependencies. Be crypt, JSON web token and Faker GS.

[00:47 - 01:01] For the application to behave like in the real world, we have prepared a mock server for you to use inside an XJS application. It includes a few files that you need to download and paste inside the app.

[01:02 - 01:21] The download link is available on the screen or in the course text below. After you have downloaded the files, create a new folder called "server" paste the db.ts file into the folder, then paste the api folder inside the app folder.

[01:22 - 01:35] Now the last step would be to add a .env variable. Create a new dot in v file in the root folder and add the next public api URL key into it along with an empty string.

[01:36 - 01:42] You are now ready to develop the application. Navigate to config/side.ts.

[01:43 - 01:48] Now change the site name to new events. Perfect.

[01:49 - 01:57] The next step would be to add a theme. I've decided to use the shadcn/ui orange name from its docs, but you can choose another one if you'd like.

[01:58 - 02:19] So I'm opening the shadcn/ui theme page, selecting the orange one and copying the code. Going back to the terminal to the globals.css file, and I'm switching the layer base part as we've learned in the previous mode.

[02:20 - 02:39] Let's run the app. And you can see that the button is orange, which is the primary color.

[02:40 - 02:45] Now the third step would be to add the site header. This is what it should look like.

[02:46 - 02:49] Notice the header on the design. You can see that it has two rows.

[02:50 - 03:00] The first includes an icon, and then the theme toggle and login button. And the second row has the navigation links.

[03:01 - 03:15] Open the site header file, and let's remove everything that's already inside. We can also remove all the imports, and we'll add them back later.

[03:16 - 03:25] Now let's style the header tag. Add a class name with flex, with full, flex call, item start, justify between.

[03:26 - 03:37] Gap 4, padding on the horizontal sides, padding on the vertical side, and no horizontal padding on larger screens. The header has two rows.

[03:38 - 03:44] Let's start by adding the first one. It contains the logo on one side, and the theme toggle and login button on the other side.

[03:45 - 03:48] So we first want to import the logo. Choose the ticket icon.

[03:49 - 03:59] You also want to import the button component, and the theme toggle component. Let's add them inside the header.

[04:00 - 04:08] First create a wrapping deal for the first row, the upper row. Add a margin auto for the horizontal.

[04:09 - 04:18] The finish up. Flex, with full, item center, and justify between.

[04:19 - 04:29] Now inside this container div, create another container div for the ticket icon , and another one for the right side of the row. Let's style it also.

[04:30 - 04:36] We want to make sure the items are aligned well. And the dev and minor gap.

[04:37 - 04:45] Now render the theme toggle, and render a button with a small medium size. Add a login text inside the button.

[04:46 - 05:00] Right, now the row should look something like this. This is on dark mode, and this is on light mode.

[05:01 - 05:08] The second row includes the ineffication menu. We're going to use the shadcn/ui navigation component, which you've already used on the new site.

[05:09 - 05:21] Open your terminal, and install it. And peak ShadCin UI at latest, add navigation menu.

[05:22 - 05:30] Rewrond the app, and create a new navigation component inside the components folder. Let's start with the import.

[05:31 - 05:37] We want the link component from next.js. The button component.

[05:38 - 05:44] The usePathanem hook. We want to make an active style for the links.

[05:45 - 05:50] So you don't know the current button. And the calendar icon.

[05:51 - 05:57] And the glow icon as well. And we want the scene function.

[05:58 - 06:04] Now let's import the navigation. Now we can create the navigation array that includes the links.

[06:05 - 06:14] So const navigation equals an array of objects. The title label and icon.

[06:15 - 06:23] And a link. Now this is the explorer link that you can see on the designs.

[06:24 - 06:31] And we need my event link. Let's do the same label my events.

[06:32 - 06:42] icon equal to the calendar icon. And the link will lead to events. Now we are ready to create the navigation component.

[06:43 - 06:54] For that we need the ShadCin UI navigation component. So import from components/ui/navigation-menu.

[06:55 - 07:03] We want the navigation menu container. The navigation menu list.

[07:04 - 07:15] The navigation menu link. And now we are ready to create the component.

[07:16 - 07:21] So export const navigation. Equally function.

[07:22 - 07:29] Let's use the path name hook. And it returns a navigation menu wrapper.

[07:30 - 07:44] A navigation menu list. We are style it so the rows on the item will be vertically aligned.

[07:45 - 07:53] And then loop through the navigation array we've just created. Render a navigation menu item inside of it.

[07:54 - 08:03] And render a key which should be the item label. Don't forget to declare the item.

[08:04 - 08:16] Under the item render link because we want it to lead to somewhere. The href will be equal to the item link.

[08:17 - 08:25] And let's do the same trick we did in the news site where we make the active route highlighted. Navigation menu link.

[08:26 - 08:34] And apply a class name to it with the Cn function. The default designs will be aligning it to the center.

[08:35 - 08:45] Adding a large text and a muted foreground text. And then we're going to pass an object with the active style which is text primary with a bit of opacity.

[08:46 - 08:55] And a bolder font. And this will only be applied if the path name equal to the item dot href.

[08:56 - 08:58] Great. Close the navigation menu link.

[08:59 - 09:08] And then render the item icon with the size 4 class name. And the item label.

[09:09 - 09:12] That's it. The component is ready.

[09:13 - 09:18] Return to site header. Import the navigation component.

[09:19 - 09:26] And render it in the second row. We should now sit on the site.

[09:27 - 09:30] Go back to the site. Make sure your app is running.

[09:31 - 09:41] And if you refresh, you'd probably see an error. If you remember the error from the previous models, we need to declare the navigation as a client component.

[09:42 - 09:48] Because the navigation menu components use a React context. Now go back to the site.

[09:49 - 09:53] And you can now see the two links being rendered on the other. That's great.

[09:54 - 09:59] The last step would be to add the layout of the app. Let's look at the design.

[10:00 - 10:04] As you may notice, the content has some max width. It doesn't go full width on the page.

[10:05 - 10:12] We want the content to be centered to the page and not take up its full width. We can build this inside the layout component.

[10:13 - 10:24] And wrap the children with a div. The user max width definition. Open app/aylout.tsx And under the theme provider, you'll find the container div.

[10:25 - 10:34] We want to add the MX Auto that will align it to the center. And the max width screen LG Classness.

[10:35 - 10:40] Going back to the site. We can now see if you open it on larger screens.

[10:41 - 10:47] The header gets aligned to the center. That's it for this lesson.

[10:48 - 10:50] In the next module, you'll create the event page.