What I want to do next is build the actual sidebar. So before we move on onto any page, I want to have a fully functioning sidebar. So you can do that either in the mobile mode like this or you can zoom out and expand your screen to see how it's going to look like on desktop. But both are going to use the same component so you don't have to worry about checking both at the same time. So let's go ahead inside of our sidebar component.
And for the first item I want to add we can actually revisit our marketing page, specifically the header and from here you can copy this image and h1 saying lingo and you can even copy the div which gives it the exact padding that we need. So I'm going to copy these three elements and I'm going to replace the text sidebar with that. Once you've done that you have to import image from next slash image so let me just add that and make sure that you have this div make sure that you have an image which uses slash mascot and we're gonna see if we're gonna modify the height and the width and the h1 I believe can stay exactly as it is. So if I click here Oh and let's also remove the background color. We're not going to need it here.
There we go. So now this says lingo and let me just close this. There we go. So this says lingo as well. So This is how it's going to look on 100% height.
This, sorry, 100% zoom. That looks great. Now what I want to do is add some sidebar items here. So let's go ahead and, and yeah, let's turn this, this logo into a link. So in order to do that, I'm going to use the link import from next link and I'm going to wrap the entire div inside of that.
And I'm going to give it an href to go to slash learn because slash learn is going to be the default like home page for logged in users right. I'm not going to disable the marketing page with the redirect but the the logo click will go to slash learn. Now let's go outside of this link and let's add a div element here which is simply going to hold all of our routes. So give this flex flex column so it goes one below another. Let's give it the gap y2 and let's give it a flex of 1.
And now inside of here we're going to use the component sidebar item which does not exist yet so we're going to go ahead and create one. So I'm going to do that inside of the components folder, sidebar-item.vsx, and let's go ahead and create this reusable component. So this is going to be a used client, meaning that we're going to create a boundary so that we can use some hooks inside, because in Next 14 and 13, basically Next.js versions which use the app router, every single component that you create in page inside of the app folder is a server component by default. That means that you cannot use hooks and other interactivity. Obviously, there is much more going on between server and client components.
If you want to, you can read the Next.js documentation for that, but when you see me write useClient, it means that I'm creating a boundary so that I can work with this as your usual React component. I can add hooks, I can add on click, and I can add use effect and stuff like that. But for other components by default, they are server components, and you're gonna see what they are very useful for later. So this is going to be our good old client component so let's go ahead and define some props here. It's going to have a label, it's going to have an icon source and an hre.
And let's go ahead and export const sidebar item and I'm gonna go ahead and assign the type props here and extract the label, icon source and the href And then inside of here I'm going to go ahead and just return a button component from .slash UIButton, but I'm going to change this import to go to components UIButton. And in here I'm just going to render the label for now. Like that. And we can go back inside of this sidebar.tsx and we can import sidebar item from .slash sidebar item. So now you should just see a button in here.
Great. So and I didn't pass any label here so that's why it's not showing. So if I pass a label for example learn. There we go. We now have a button here which says learn.
Great. So let's go ahead and do the full implementation of the sidebar item component here. So I'm gonna go ahead and now finally add a hook here. So I'm gonna call this path name the use path name from next navigation. And let me quickly demonstrate.
So when I save this, there are no errors going on, but if I comment out use client, I'm not entirely sure if it's going to throw an error. It does. So you can see how it threw an error and you can see why it's going on. So use path name only works in client components. Add the use client directive at the top of the file to use it and you can read more here.
Right, so obviously if you want to learn more about server components and client components We are going to talk more about them the more we use them throughout these tutorials. I also have a short section in all of my tutorials about client and server components but I'm not going to focus too much on them for this tutorial. If you want to you can go ahead and visit the Next.js documentation and in here you can learn all about the components inside of the app router so just make sure you are using the app router and in here you can see how we define routes, pages and layouts and also the difference between for example a server component and a client component which is our good old usual components that we are used to. So I just want to clear that up in case this is your first time seeing the use client directive. So make sure you have use client at the top and then using a hook should not cause any errors.
And now let's determine whether this sidebar item is active or not. So we're going to define a constant here, path name is equal to href. And let's go ahead and give this a variant to be dynamic. So if we are active, we are going to use the sidebar outline, otherwise we're going to use the sidebar. So those are some of the variants we've created in our buttons chapter, if you remember.
And let's give this a class name of JustifyStart. And let's give it a fixed height of 52 pixels and let's also pass in the as child prop because we're gonna incorporate a link component here from next slash link and let's give it an href of href make sure you import next link from link and we have an error because we are not passing any href here so let me just add an href to slash learn here there we go no more errors And we can now see the text learn here. And we can see that this page is active because our URL is at slash learn. Great, and one more thing that we have to do is we have to render an image component. Again, from next slash image, so just make sure you've added that.
And this image component is going to have a couple of props. So the source is going to be icon source. Alt can be the label. And then we're going to have a class name of margin-right 5. And let's give it a height of 32 and a width of 32 as well.
And there we go. Now we have this broken image here because we're not passing anything. So let's go ahead and actually pass in an image. So I'm gonna go ahead and collapse this. And for this one we're gonna pass in the icon source which is gonna be slash learn dot SVG.
So again this is gonna be a broken image because we don't have that. So now you can either use your own icons as always or you can go inside of my GitHub here, go inside of the public folder and I'm gonna add all the items I need here. So let me go ahead and find my Learn icon here. I'm going to download Learn. And let me go ahead and paste that in the public folder here.
So learn.svg. There we go. So I added this little house icon. These are MIT licensed icons from Microsoft if I remember correctly. Let me go ahead and show you this.
There we go. So this is how it looks like. So what I want you to do now is find the equivalent icons for Leaderboard, Quests and Shop. So I'm gonna go ahead and do that now. I'm gonna download all of those icons and then I'm gonna show you their names.
But you can find all of them here in the public folder. So I've added the following. I have a leaderboard icon so you can find that in here. I have a learn icon, quests and shop.svg. So make sure you add all of them, all of those, you can find them in the public folder.
And or you can of course use your own. And now let me go back inside of the sidebar here and I'm just going to go ahead and copy this sidebar items. So the next one is going to be leaderboard and it's going to go to slash leaderboard and we're gonna have a leaderboard svg and for the next one is going to be quests and for the last one is going to be shop. So let's go ahead and try that out. So if I go ahead here and zoom out, there we go.
We have learn, leaderboard, quests and shop. If I try and click on any of those I'm redirected to a 404 page but once we implement them they're gonna have the same status as our current learn page here. So just make sure you've added this icons and one more thing we have to add is our logout button here. So let me add a div here with a padding of four. Let's go ahead and import a couple of stuff from Clerk here.
So from at Clerk next JS, we're gonna go ahead and import clerk loading. Clerk loaded. And let's add user button. And while we are here, let's also import a loader from Lucid React. Now I'm gonna go ahead and add a clerk loading here to add a loader with a class name height 5, width 5 and text muted foreground and animate spin.
And then clerk loaded is simply going to render a user button. But remember to give it an after sign out URL to go back to the marketing page. There we go. So we've added that. Let's go ahead and see how it looks like.
There we go. So here in the bottom, we have our user controls. Let's see how it looks on mobile. Perfect. So we have a responsive sidebar and we can use it to control what part of the app the user is on and we can also manage user settings and we can also sign out.
Perfect. So we are officially ready to start developing the Learn page and we're gonna go ahead and do a similar process. We're gonna start with creating a skeleton layout because we're gonna have a sidebar here and some feed content here and we're going to work up until to the point where we need some stuff in our database and then we're gonna connect Drizzle and we're gonna start building our backend. Great great job.