In this chapter, our goal is to create the home layout. As you can see from this screenshot right here, the home layout will consist of three main parts. We are first going to have the navbar, which is going to feature your app, your marketplace, your platform's logo, some basic navigation bars where you will be able to add the about page and some basic SEO pages, let's call them that, And then two buttons, one for login and one for creating an account. We are then also going to add a search bar here just so we actually use one of the components which we previously created. And for now, we're going to skip this part, which are going to be the categories, simply because the categories will be a much more complex component than everything else we're going to build in this chapter.
Besides this, we are also going to have to create the equivalent on mobile here. And we're also going to add a very simple footer. So I'm going to be calling this app Fun Road, which is a parody on Gumroad. You are, of course, feel free to name this whatever you like. So our goal is to add a home route group where we're going to be able to do all of that.
If you don't know what route groups are, don't worry, I'm going to do my best to explain that. And then we're just gonna do and push to GitHub. So before you can start, it is crucial that you establish that you are on your main or master branch. You can do that by taking a look here in your IDE, especially if you're using Visual Studio Code. You can also click here to confirm that you are on master or main.
And you can also type git status here. I just want to ensure that you are not accidentally on a previous checked out branch. Great, So now let's go inside of source, let's go inside of the app folder, and let's learn how to create a new route. So if I create a new folder called test and inside a file name called page and then I do a default export here and write div test page here. What do you think will happen if I go to localhost 3000 slash test?
Well, I think you can already guess. If I go to localhost 3000 slash test and of course run my app first so I don't embarrass myself. Let's refresh and there we go. We can now load the test page. So That was a super quick crash course on how routing works in Next.js.
Basically when using the app router, which in the shortest definition means you're using the app folder, if you create a new folder and you put a reserved file name page it can be .ts .tsx .js or .jsx basically page is the important part and the second important part is the default export So if I don't do this and instead do a named export, what will happen is an error. The default export is not a React component in test page. So that's what it's looking for. Whenever you want to create a new page in Next.js, you need to do a default export here. Great, so now you learn how to do that.
And now you've also learned that whenever you have a page with a default export and a folder, that is going to become a part of your URL. But what if you just want to organize your files without creating a new route? You can do that using a route group. For example, home, like this. So if I go ahead now and, for example, create another route here, let's call this foo, and then a page dsx inside.
Let's go ahead and render foo. And also the name of the default export does not matter. It can be page, it can be x, it absolutely doesn't matter. So where do you think I can now access this foo page? By some logic, it should be slash home in parentheses and then slash foo.
So let's try that. If I go slash home slash foo, I get a 404. This page doesn't exist. So what I just attempted was slash home and then slash foo. That's what I attempted.
But the truth is, whenever you add a folder inside of parentheses, that is a convention for a route group. That basically means that you're going to use this folder as an organizational folder. Or more precisely, and the better definition to use would be a route group, because the route group has some special quirks in it. One of the quirks is that it's going to be omitted from the URL. So this is how you're going to access it.
So if I now go to localhost 3000 slash foo, there we go. I can now see the foo page. So this is now gonna come quite handy for us. So this is what I suggest you do now. Go ahead and shut down your app just for a second.
Go inside of your app folder and in here remove the test folder entirely. And now what I want you to do is remove the full page as well. And instead, I want you to copy the page.tsx and I want you to paste it inside of the home folder. You can also drag it and move it, but that's going to trigger some Next.js cache to be unsaved and it often just confuses people. So now that you've copied and pasted that instead of the homepage, you can delete the old one.
So what I've done now is I've moved my page inside of a home here. And this basically allows me to organize my routes in a better way. So what I can do now is besides having a root layout, so this file as you can see is quite structurally important. It provides us with the HTML and the body wrappers around our entire app. So I don't want to modify this file and I don't want to create another reserved layout file.
But what I can do is use this route group to create another layout file in here. Layout file has similar rules to page where you need to do a default export. And let's try this. Let's go ahead and return a div with a layout and the reserved file name layout.tsx. If you go to localhost 3000, but of course make sure you now run your app.
The reason I told you to shut it down is because sometimes it can cause hot reload issues when you move your main page.tsx into a route group. So what happened now? Why do I only see layout on my localhost 3000? The reason I only see layout is because layout is rendered first. And in order to do a proper layout, you need to do the same thing that you do in your root layout here.
You need to pass the children. So let's go ahead and create an interface, layout or just props, children, React, ReactNode. I'm gonna go ahead and extract the props here and extract the children. And then render the children here. Where do we get the children from?
Next.js automatically fills that prop. You don't have to worry about it. There we go. We now bought our app back to its initial state. So what did we achieve with this layout file?
How is this useful in any way? Well, here's how. For example, you can now add a navbar here, and you can give it a class name, background red, and a text of white, and some padding, and let's say navbar. There we go. You can now see a navbar above my entire content.
The cool thing is that inside of this route group, which now has this layout, I can create subroutes like foo, like I did previously. Let's just add a page inside. Foo page, it will also have a navbar. So I'm that confident that when I visit foo, it's also going to have this navbar. So if I go to slash foo now, there we go.
You can see that my foo page also has a navbar. So that's the power of layouts. They allow you to create reusable wrappers, components, everything you need inside of your Next.js application. They also don't re-render when you're using navigation. So if you're navigating within this route group, so if I go from page to foo using the next link, this part will not re-render because it doesn't need to.
It's reusable, it's the same on both routes. So that's what's cool about layouts. And that's also what's cool about route groups. So as I've shown you in the beginning, in the app directory, nested folders are normally mapped to URL paths. However, you can mark a folder as a route group to prevent the folder from being included in the route's URL path.
This is the convention, as we've just learned. And as you can see, you can use it to organize or separate your modules like marketing and shop or you can also share layout files in between them like we are doing right now. So that's a quick crash course on routing. Now I'm gonna remove my full route again and I'm gonna go back inside of my layout file. Inside of the layout file let's go ahead and give this div a class name flex flex column and a minimum height of screen and now replace this with an actual navbar component you are not going to have it so an error is expected at this point So now let's go ahead and let's create our NavBar component.
For starters, let's put it in here, inside of the home route group. So navbar.esx, like this. And when it comes to components, we can use, and we should use named exports here. They are much easier to work with and they won't accidentally be, you are reducing your chances of accidentally creating a reserved file name with the default export. So better to use named exports when it comes to components.
So inside of the navbar here, let's go ahead and we'll not use div, right? Let's use nav and give it a class name, height of 20, flex, border-bottom, justify-between, font-medium, and background-color of White. Now let's go inside of the layout and let's import the navbar from .slash navbar. I'm going to go back to localhost 3000, and I'm going to zoom out a bit. So you can now just see a big space for the navbar, but no text inside of it just yet.
So what I want to do is I want to go ahead and I want to import Poppins from next font Google. And now I'm going to prepare Poppins here in a constant. So Poppins. And I'm going to add subsets, Latin, and weight here is going to be 700 because that's the only weight we are going to need, basically the ultra bold one. And now let's go ahead and do the following.
Inside of here, I'm going to add a link from next slash link which will simply route back to the root page later on that's gonna be useful right now it doesn't make too much sense But let's go ahead and give it an items. Actually, we just need PL6. Like that. And let's add a span here. Fun road.
So right now you should see a text which says Fun Road and it's a link. You can see when you click on it, right? And now let's go ahead and give this span a class name and let's use CN, which I briefly mentioned in the beginning, which stands for class names and it allows us to merge Tailwind classes. So I'm gonna go ahead and give it some default classes. I'm going to give it an extra large text and font of semi-bold.
So that's how it looks by default. And then just for fun, we can add a dynamic class name, so Poppins font class name. So now the font looks just a little bit different as opposed to all other texts. Let's go ahead and give this link an item's center as well. Actually, yeah, that doesn't do anything at the moment.
We need to add flex item center, maybe. There we go. So flex item center, and then the Funro logo is center. It's no longer attached to the top great now what I want to do is I want to create an individual navbar item which is basically this right individual item here so the way I'm gonna do that is just in the same component, I'm going to create a const navbar item. And let me just fix the typo here.
So navbar item. And inside of here, I'm going to be using a button component from components UI button. And you can see I have a certain convention when it comes to imports. So I'm using the global imports, basically my npm packages at the top and then I use a empty white empty line to separate from my alias imports here. So now that we have the navbar item let's create an interface navbar item props and let's go ahead and give it an href.
Let's give it children and is active which can be optional like this. Let's go ahead and destructure navbar item props. So we're going to have Ahrefs, children, and is active. And now I'm just going to go ahead and render the children inside for now. So I'm not going to do anything else.
I'm not going to use anything else. So now below this, let's create const navbar items, which is going to be an array of objects. In the first object, we're going to have an href of slash and children, which is just going to be a text, home. And then what you can do is just add as many routes as you want. So slash about, slash features, slash pricing, and slash content.
This part is not that important because this is not where our main e-commerce logic is going to happen. All of these are mostly SEO pages, right? So it really doesn't matter what you put here. So just put a few of them so it looks nice from the home page. Now what we are going to do is we're going to go and just you can use white space if it's easier for your eyes.
Create a div here and the class name items center gap for hidden and flex on large devices. So hidden by default, but when it hits a large breakpoint, it becomes a flex. Inside, we are going to map over navbar items, get the individual item and render the navbar item component. Inside of here, give it a key, which is going to be item.href. So make sure that each href is different.
And I think you can just spread the rest of the item inside. The props should match the href and the children. And we're going to have the handle is active separately. And this is actually not a self-closing tag. So I'm not sure if it will work the same way if you pass the children as a prop and if you actually pass it right here but just to be safe Let's do it like this for now.
So now you should have in this corner right here all of these buttons, right? And now we're going to go ahead and make them look better. So let's go back inside of the navbar item and let's focus on making it look nice. First of all, I'm going to give it a variant outline. So that's how it will look by default now.
And then let's give it a class name here using CN. So let's add some default classes. By default, The background is going to be transparent, so regardless of what the actual background is, we're going to set it to transparent. We're also going to make sure that when we hover, it stays transparent. We're going to turn them into full rounded buttons.
On hover, we're going to change the border to primary and by default border will be transparent like this. So when you hover it's going to start to show the border. Go ahead and add PX of 3.5 and the text of large inside. And then add a comma and then a special case, if is active. In that case, background color will be black, text will be white.
On hover, background will stay black and on hover, text will stay white as well. There we go. And now let's go ahead and wrap our children inside of a link which we already have imported and give it an href of href. And in order to make this work properly, you also have to pass as child prop to the button, which basically tells to the button that this link will now be used as this component. And there we go.
This is how it looks like now. So in order to properly show the isActive prop, what we have to do is we have to use the path name hook. So const path name, use path name. And once you do this, make sure you import the path name from Next Navigation, you are going to get an error. There we go.
You are importing a component that needs use path name. This React hook only works in a client component. To fix, mark the file or its parent with the useClient directive. So, basically, in Next.js, all components and pages inside of the app folder are server components by default, which means that when we want to go back to the good old client components, we have to, let's call it, open a portal to the client, right? It's a better term to use than to convert a component to client because people don't know this, but you can also mark a parent component as a use client and then everything inside of it will become a client as well.
But I'm also going to show you a little trick. So if you go ahead and mark this as useClient, This will fix the issue, no more errors right now. If I remove it, you can see that it causes errors. If you remove it from the navbar and go inside of layout here, since you render navbar like this, It will also work if you mark the layout with useClient as well, as you can see right here. But if I remove it, we get an error.
So what we did with the layout here is this suggestion, it's parent. So When I show this to people, they immediately think, oh, okay, so if you mark your layout file as useClient, every single thing from now on in its children will be client. That is not true. So you can render a server component inside of a client portal. That's why it's a better terminology to use portal because you're not converting a client component into a client component.
You are just opening a portal in this specific place. Right, so what you can do now is the following. Let's try it like this. So I'm going a bit off topic just to, you know, cover this important topic that we have. Inside of my page.tsx, which says I am a button, I'm going to go ahead and do the same thing.
I'm going to do useEffect. Console.log rendered. So this will be rendered only on the client. Make sure you import useEffect from React. And I'm going to remove the usePathName from my navbar and from the import just so it doesn't mess with my example.
Now, you don't have to do this. I'm just demonstrating something. Right now, as you can see, my page.tsx right here has an error. I'm trying to use useEffect here but I need useClient. Easy fix, right?
Just useClient. There we go. So you might be thinking, okay, but I could have also done it here in the layout, right? Because I know that inside of my children, the page is a client component. Oh, well, that's not true.
That's because if you render something through the children prop, that will not be passed through the portal, right? So that's going to be a server portal, if you want to think of it that way. So I just wanted to clear that up. So we're going to remove the use client from the layout, because we don't need everything else to be a client. We're going to remove the use effect from our home.
And I'm going to close this page. By now, you should have no errors at all. Let's go back inside of the navbar. Let's uncomment this. And let's uncomment the usePathTheme.
Now, let's simply add useClient here because that's the only place where we need useClient at the moment. No need to remove server components from other components. And also, server components are not the same thing as server side rendering. So just because you mark something as use client does not mean that it's not rendered that it's not doing server side rendering on it, it is still doing server side rendering on it. It's just not a server component.
Those are two completely different things. All right, now we should fix the error. And let's go ahead and do the following. Inside of the iteration here, let's add isActive. And let's do the following.
So we're going to do if path name is identical to item.href. So right now, home should be highlighted because we are on the root path. So if you want to, you can now go ahead and create about and inside page.tsx return a div about page so that's going to be you know the the the most what I'm going to do about these SEO pages, because I don't think anyone here is watching to see me design these pages. They're going to be different for every single eCommerce. So it doesn't make sense.
But I just want to show you the skeleton behind it. And we are going to focus more on the actual e-commerce application rather than this SEO things. I don't think anyone's really interested in this. So we already have about, what's the next one? Let's see.
Features. And then we have contact. So inside of contact, this will be contact page. Inside of features, this will be features page. And inside of pricing, this will be pricing page.
There we go. So now you should be able to click on all of this. And you can see how your navbar is getting highlighted. Great. So later on, when you finish the project, you can develop these pages fully, depending on what you want your e-commerce to be.
I'm just giving you a starting point here. It really doesn't make sense for me to develop those. What I'm going to be developing is the actual shop, right? Not the SEO of the shop. So let's go ahead now and go back inside of the navbar here.
And what we are going to do now is we're going to add these two buttons right here, which will allow the user to log in or register. So we're going to do that after this part right here. So let's go ahead and do a div. And we're going to give class name hidden by default, visible on large devices. So yeah, I forgot to tell you this.
In case you're not seeing any of the items, it's because you're zoomed in too much or you're using too small of a screen. So just zoom out a bit or expand your browser, because we hide these elements on mobile mode. So make sure you have enough space to see them. And now inside of here, we're going to render two buttons. The first one will say Login.
And The second one will say start selling. There we go, login and start selling. You can see how now everything is nicely aligned. So now basically we're going to modify these so they look a little bit better. Let's give this a variant of secondary and let's give it a class name BorderL, BorderTop 0 BorderBottom 0, BorderRight 0 Px of 12, Height of full, Rounded, None BackgroundColor of white, OnHover, background color of pink 400, transition colors and text large.
So now you can see the effect right here. So you can now copy this because it's going to be very similar for the button below. Like that. With a slight modification. By default this will have a background color of black and a text of white.
On hover it's going to be background pink 400 and on hover is going to be text black like this. So now this is how they look like. Great! So what I'm also gonna do is add a link which we already have imported. For the login, it's going to go to slash sign in.
And for this one, it's going to go to slash sign up like this and give both of them as child so the links are properly rendered. There we go. So if you click on any of them, you should get a 404 because we have not developed the login pages just yet. Great. So what we've done now is we've finished the desktop part of this right here.
And now we have to do the mobile part of it. So let's go ahead and create a component called navbar-sidebar. And we can do that right here in the home route group so go ahead and create the navbar-sidebar.tsx component this will be the props And we also have to create an individual navbar item interface. So basically an href and children. And then let's just export const navbar sidebar.
Like this. And let's destruct all the items we need. So items open and unopen change from our props like this. And the component we are going to be using is the sheet component from chat CN UI. You can also use the sidebar component, but somehow I've gotten the habit of using this.
Sometimes it's actually simpler to use it, but the sidebar component is amazing, right? So you can check it out on Shazam documentation. We're also gonna be using scroll area. So let's go ahead and actually use that here. So we need to return a sheet component and go ahead and give it an open prop of open and unopen change on open change.
And inside sheet content with a side left and the class name adding of zero and transition none. And inside of here you can add a header with a class name padding for and border bottom and a div with a title menu. And you can give the title a class name, my apologies, the div a class name of Flex and Items Center. This is because I plan on also adding a Close button here. But now that I think of it, maybe the Close button will appear by itself.
Anyway, this is enough for us to try it out. It's not finished, but it's enough for us to see what we're doing. So it's important that you pass the open and unopen change here. And now what I'm going to do is just anywhere here, it really doesn't matter, I'm going to do it below the link. Render the navbar sidebar component so you can import it from .slash navbar sidebar like this.
And now you also have to create some states here. So const is sidebar open. Set is sidebar open. Use state from react with a default value of false. Make sure you have imported use state from react.
And now what you're going to do is you're going to pass open to be is sidebar open. On open change, set is sidebar open. And you can also pass in the items to be navbarItems, which is the constant which we have defined right here. And now when you try going to your app, nothing should change. But if you change this to true, there we go.
You can see you have an open menu now. So now we have to create a button which is going to open that. So let's go all the way down and let's take a look at this. So it's hidden by default, but it's flex on large devices. So we have to do the opposite of that here.
By default, it's going to be flex, But when it hits a large device breakpoint, it's going to be hidden. And let's also add item center and justify center. And inside a button component with a menu icon from Lucid React. So make sure you have imported Lucid React here. Now let's go ahead and give this a variant of Ghost, a class name of size 12, border transparent, and background color of white, and onClick is very simply going to be an arrow method, which calls set is sidebar open and sets it to true.
So right now it's not visible, but if you zoom in a lot or use inspect element to shorten your page. There we go. You can see it. So that's how the mobile view is going to look like. There we go.
You can, of course, play around and increase the size of this if you want to. So I think the way you have to do it is by using this, maybe. Actually, I'm not 100% sure, so I'm just going to leave it as is right now. Great. So now we can go back inside of the navbar sidebar and we can actually complete it.
So now we have the items, make sure you have passed the items here through the prop right here. And we're going to do a similar iteration over all of our items here. So let's go outside of the header and let's add a scroll area which we imported. Let's give the scroll area a class name flex-column overflow-y-auto height-full and padding-bottom of 2. Inside of here we are iterating over our items.
So let's add a link from next link with a few props. Item href as key and href item href. Make sure you have imported the link from next link like this. Inside of the link, we are going to render the children. So our link is the main component here so we can give it direct class names here.
Full width, text left, padding of 4, cover, background black, cover, text white, flex, items, center, text base and font medium. Like this. Text-white, flex-items, center, text-base, and font-medium. Like this. So now already when you click here, you should see all of the elements here.
Great. And then we're just going to go ahead and add two separate items. So class name border top here. And you can go ahead and just add two buttons here. My apologies, link components, not buttons.
This one will be sign in, like this. And the lower one will be sign up. So now I'm just going to copy the class name and paste it here and paste it here as well. So this will be login and this will be start selling. So now you should have the exact same components right here.
And you can see we also have the close button. So yeah, we don't actually have to do this. No need for that. Let's try it again. There we go.
So we can now click on Login, we should get 404. But when we click on these, we should get redirected to those pages. And here's what we can do to make this just a little bit better. When you click on this link, let's also do onOpenChange false. Basically we're going to close this every time we click on some element.
So when we click on home, it closes. Like this. There we go. Great. So that's it for the first part.
We added the navbar and the mobile navbar. And now we have to add the footer. So since the chapter is already almost 40 minutes long, I'm going to leave the search bar to be finished later on with the categories, right? And it actually makes sense because this is not really a layout component, it's a component specific to the homepage. So it makes sense that we only focus on this part for now.
So now we just have to do the footer, which is way simpler than anything we've done so far. We are going to go back inside of the layout file right here And we're just going to add a footer at the end here. Footer does not exist, so an error is expected. So in the same place here, in the home route group, you can just add footer.dsx. Let's export const footer here.
And instead of using div, Let's use footer and the class name flex Border top justify between font medium and the padding of six like this Inside a div with a paragraph fun road Again or you can add incorporated or whatever you want. It's just a parody. In my case, in your case, it can be the name of your shop or your company. There we go. So this is a footer and we can now import the footer right here.
And here's a little bit of a problem now. So the footer here appears to take up all the space, which is not something we want. And here's an easy way to fix that. So we can add a div around the children. And since we marked this entire thing as flex, we can add flex1 to it.
And now, as you can see, the children take up as much space as they can. And we can also change the background color slightly to F4, F4, F0 here. So now, this has a slight color change. And we also noticed an interesting issue here, which we are going to resolve in a second now. So let's go ahead and do the following.
So I'm going to go inside of text area, inside of my components, inside of my source components UI text area. And I'm going to give this, let's see, background is set to transparent. So I'm going to remove that class name. And instead, I'm going to do background white right here. There we go.
So that's resolved. Let's go inside of the checkbox. Background dark input. Can I add background white here? There we go, that seems to resolve it.
And the same thing we can do in progress. So I know I'm the one who put background transparent, but I think it makes more sense to have it background white so it's consistent with all other inputs here. Then that kind of sums up our layout. So great. Let's go ahead and mark all of these things as complete.
So we successfully added the home layout, the navbar, the mobile navbar, and the footer. So what we have to do now is we have to push those changes to GitHub. And just to say something in advance, we're not going to just randomly have these components inside of our route group all over the place like this. We're going to have a proper modules folder, but we're going to do that later on. For now, I just wanted to focus on wrapping up the layout.
So last time I showed you how to check out using the CLI. So I thought that maybe this time we could try using IDE. But then I remembered, I have no idea if all of you are using Visual Studio Code. But yes, if you want, you can also create branches from here. So this is what I'm going to do.
As you can see, I have 13 changes. So I'm going to shut down my app. I'm going to do git checkout-b03, and this is home layout. Right, so I'm just staying true to my chapters, home layout like this. Git add, git commit.
You can of course add a descriptive message. In my case, this will just say home layout like this. And git push u origin 03 home layout and that will push a new branch to your github. There we go. You can see that now I am on this branch.
You can see it right here. So I'm no longer on master. So I'm going to go ahead inside of github.com, inside of my multi-tenant e-commerce repository here and There we go. So again, you can go inside of pull requests, new pull request, and select the home layout here, basically your newest branch. You can see a quick preview of all of your changes here, and then you can finally create a pull request.
So before we merge this, I'm going to pause the screen and I'm going to show you what CodeRabbit has to say about these changes. As you can see, it just started taking a look at all the files I have modified. And here we go. As you can see, a very impressively accurate summary by CodeRabbit. So we introduced a couple of new features, including several new pages.
About, Contact, Features and pricing. We also added a responsive application layout featuring a navigation bar, a sidebar menu, and a footer showcasing the company branding. We've also modified the style, enhancing the look of key UI elements. We've updated the checkboxes, progress bars, and text areas to adopt a cleaner white background for improved visual consistency, exactly what we did. Perfect.
So If I refresh, let's see if anything's more here. There we go. So we have the entire walkthrough of the changes which we've made. And we also have a sequence diagram rendered here for us. So we can see exactly what's happening in our current layout.
I think this is super impressive. So we can see exactly while the user is requesting a page view through layout, the layout renders the navbar, it also renders the page content, and it renders the footer. And we finally return the complete page to the user. We can also see our navbar sidebar diagram here. So this is super impressive for something that is literally, you know, just installing into your GitHub.
And you can even see it left some useful comments. You can see, oh, sidebar should be closed by default. It actually caught a bug. This is actually impressive. It caught a bug.
Yes, I completely forgot to close the sidebar. I'm now super impressed by this. It also allows me to commit that through it as well. This is very, very cool. Let's immediately fix that.
There we go. So CodeRabbit just saved us here. So I think we have to go inside of the navbar component and yeah change this false like this so I'm just gonna go ahead and do git add I'm still in my branch 0 3 home layout that's important right? Because we are fixing an issue. And I'm going to do 03 home layout.
And then I'm just going to do fix. And let's do, we can just do git push now. We no longer have to do the git push origin because you already pushed that. So now, the cool thing is that I think, I'm not sure if it's going to trigger CodeRabbit again, but I think it is. And I think that now CodeRabbit will basically tell us that it's okay, we fixed that issue.
But this is insanely cool. It caught a bug. I am super impressed. So I'm not going to wait for the next one because, well, I know what the issue was, right? So yours is going to be green.
So just click Merge Pool Request. Confirm Merge right here. And there we go. So I'm not going to delete the branch. Basically, I want you to be able to see all of them.
So 0.2. Customization, 0.3. Home layout. And now that you've done that, what you have to do is you have to git checkout back to master or main depending on what you use. If you get an error, you're obviously using main.
And then git fetch, git pull origin master or main, depending on what you're doing. So now, let me go ahead and close this go inside of here and there we go as you can see we've opened a new branch home layout and then inside of here we've done the home layout fix and then we merged that pull request right here. Excellent. So just make sure that you're on the master branch, run git status, and everything should be completely fine. Perfect.
Great, great job. Let's just go ahead and mark this as complete as well. And if you want to, you can just do bond run dev to double check. I always like to be sure that everything is fine there we go everything seems to be completely fine perfect amazing amazing job