So now that we have our authentication and database ready, I want to go ahead and create a basic layout for our application, which will include the sidebar right here to pick and choose different organizations, another sidebar here to pick between favorites or recent words and a navbar right here and then the rest is going to be content inside. So the first thing I want to do is I want to move my root page.tsx inside of a route group folder so I don't want this page.tsx to just be randomly laying around inside of my app folder and if you remember from the second chapter inside of this tutorial we learned about the route groups so this is what I'm going to do. I'm going to shut down my app because if you remember, when you modify existing routes, Next.js cache can get confused. So just make sure that you are no longer running your app. And then let's go ahead and do the following.
You can remove page.tsx completely. And then inside of the app folder create a new folder dashboard like that. And then inside create a page.tsx. And this is now going to become our new root page.tsx. So this is the exact same thing as having page.tsx inside of the app folder.
But this way we are organizing it better. So I know that this represents my dashboard. And what I have to do here is simply export the dashboard page. So I'm going to create a div dashboard root page like this. So just make sure you do export default and make sure it's right here and then if you go ahead and do npm run dev here you should not be seeing anything different except it should simply say dashboard root page right here after it loads there we go now let's go ahead and create a reusable layout file for our dashboard organization sorry for our dashboard route group so inside of dashboard create layout.dsx like that And this will now throw an error.
So we're gonna fix that quickly by creating an interface dashboard layout props. And we are very simply only going to have the children which are a type of react node as the props so let's go ahead and write const dashboard layout and in here very simply let's extract the children and let's assign the dashboard layout props and let's simply return the children like this and then don't forget to export default dashboard layout like that. Perfect! So now you should no longer be having any errors and you should still see the dashboard the root page which we've defined right here. Now let's go ahead and create our sidebar.
So for that we're gonna go inside of the layout.tsx and we're gonna replace this wrapping div with a main element like that. And then we're going to give this main element a class name of h-full. And then in here I'm going to render a sidebar component. And I'm gonna go ahead and wrap the children inside of a div. And all I'm gonna do for now is give the div, which is wrapping the children, a padding left of 60 pixels.
Like that. And let's also give it a full height. And of course we have an error for the sidebar because it doesn't exist. So inside of the dashboard, I'm gonna create an opted out folder, underscore components, like that. Because these components are only gonna be used inside of the dashboard.
So that's why I'm not creating it inside of here. So inside of this underscore components, I'm gonna create another folder called sidebar. And let's go ahead and create an index.tsx inside of here and very simply let's just do const sidebar actually export const sidebar and let's go ahead and return a div saying sidebar Now we can go back inside of the layout and we can use this underscore components sidebar to import the sidebar. So I'm gonna go ahead and import sidebar from slash components slash sidebar like that. Perfect!
And there we go, you can now see that we have a little sidebar here. So let's go ahead and style this sidebar just a bit. So go back inside of components, sidebar index.tsx. And the reason I didn't just create a file named sidebar, why did I create a folder? Well, that's because sidebar is gonna have multiple smaller components.
So it's just easier to keep that all in a folder. And let's change this from a div to an aside element and let's give it a class name of fixed. Z index of one, left is gonna be zero, background is gonna be blue 950 like that height is going to be full width is going to be 60 pixels flex padding 3 flex col and gap y4 like that and in here this will represent our sidebar So you can add a little plus, for example, or whatever side, something that you can see being rendered right here. You can also give it a text of white if you want to. There we go.
So now you can see that this is our sidebar, right? You can see even when I expand, this is the sidebar and this is now the dashboard root page. And even on mobile, it is still visible here but that's how we want it. What we have to do now is we have to create another sidebar which is going to be called organization sidebar which is going to take this space right here and then this will be pushed here instead. So let's go ahead and do that.
So we have to go back inside of our main layout here and inside of this wrapping div. Let's create a new div with a class name of flex gap x3 and h4 and That is also gonna wrap the children. So just make sure you add children inside of this new div right here And then let's go ahead inside and wrap the children simply one more time with a div and a class name of HFull and Flex1. And I'm gonna add a comment here, add navbar. And then in here, we're gonna go ahead and render the organization sidebar like that.
So above this div, which wraps the future navbar and the children. So just the organization sidebar. So let's go ahead and let's go inside of components again and for this one we can simply create a new file organization sidebar.dsx because it's going to be much simpler than this sidebar for which we need a folder. So in here let's mark this as useClient so we prepared this. So useClient means that this is going to be a client component and not a server component which means we are allowed to use hooks and use effects and on click and other interactivity elements.
So let's just do export const organization sidebar here and let's return a div and now we're gonna make it dynamic. So by default is gonna be hidden, but on large devices is gonna be flex. And when it's flex is gonna use a column flex space y6. Width is gonna be 206 pixels. Padding left is going to be 5 and padding top is going to be 5.
So these are some just some arbitrary values like this width and this padding, right? I don't expect you to know how I got to this. I just did trial and error with the design until it looked good. Great. And then inside I'm simply gonna write org sidebar.
Like that. And now you can go back to the layout and import org sidebar from the same path. So .slash underscore components org sidebar. The same way we did with the original sidebar and now it should not be visible but when I expand there we go when you go to full desktop mode you should see the main sidebar and then you should see the organization sidebar so just to make this easier you can go inside of the organization sidebar and give this a BG red 500. And now when you expand, there we go.
It's much clearer what space this organization sidebar actually takes. Perfect. So what we have to do now is we have to create a navbar and then that is going to push this dashboard root page in this content right here. And then we are finally ready to start working on this sidebars and navbars and make them functional. And yes, on mobile devices, you should not be able to see the organization sidebar.
So only on desktop. All right. So for now you can leave this color if that is easier for you. We're gonna remove that later. So what we have to do now is we have to create our navbar component so let's go ahead and do that inside of this underscore components so in your file navbar.tsx so the same way we did with the sidebar and organization sidebar this is also going to be a client component meaning that we're going to have to use some hooks here and let's export const navbar inside of here and let's go ahead and return a class name of flex item center gap x4 and padding of 5 and you can also give this a BG, let's use green 500, so we can easily see it.
And then you have to go back inside of the layout here and where you have a comment at navbar, you can now simply render the actual navbar from the same place, .slash components, navbar. And there we go, you can see how this looks on mobile. And let's also add a little text here. So navbar, like that. There we go.
So you can see, this is how it looks on mobile, and this is how it looks on desktop. And yes, there is a little space here, but that is completely okay because the actual background color of the nav bar and the organization sidebar is gonna be transparent. So it doesn't matter that there is a little padding between them because it actually looks better once we start adding some elements there. Perfect, so we have the basic layout. Now what I wanna do is I wanna actually put my user button to log out in the proper place, which is the nav bar.
So let's go ahead and simply render the user button from clerk next JS right here. There we go. Perfect, So now it is right here and you can also do the following. So you can add a little div here. Let's do it like this.
Let's add a little div and I'm gonna add to do add search. And let's give this a class name of hidden by default. And on large, it's gonna be flex one like this. And on large is also gonna be flex by itself. And then in here, let's wrap the user button.
To be class name. Block by default LG. Actually I think we can just leave it like this. And then when you expand, there we go. Yeah, my apologies.
So I was looking on the mobile notes. I was confused why it didn't work. So you can just add an empty div here where we're in the future. We're gonna hold our search input, which is hidden on mobile. And then when it hits desktop, it will become flex.
And then it will also take up most of the space. So then it will nicely push the user button into this corner right here, where you would usually expect your user settings to be. And if you want to make this clearer you can add the BG yellow 500 just so you can see exactly when this appears. Perhaps we need to give it some padding. I'm actually going to write search.
Maybe that will make it a bit clearer. There we go. Yes. So this is going to be our search bar and that will push this button right here to the end. This will be our organization sidebar from where we are going to choose either to look at the favorites or the recent boards and also to switch organizations and to modify their settings to add invites or accept invites to other organizations.
This main sidebar right here will be used for a quick switch and creation of new organizations and in here we're actually going to render our boards and then later we're going to create another route group which will just be used to render the whiteboard itself. Great! So you can see how this behaves on mobile it's responsive nicely and don't worry about this being here on mobile that's going to change later when we add some more elements. Great, great job! What we have to do next is we have to modify this sidebar to actually allow us to add new organizations.