So let's go ahead and let's continue developing our editor page. So just to recap, if you want to access the editor, your URL should be localhost 3000 slash editor and then a random ID. And the last thing we did is we played around with creating some auto zoom here But as you can see it is a little bit glitchy So we're gonna go ahead today and try and resolve this starting by creating a proper layout Inside of our features editor components editor dot VSX page Let's go ahead and do this first. So I want to go ahead and inside of this first div where we define the full height flex and flex hole Let's go ahead and let's create just an empty navbar component. So I'm gonna go ahead and create that in here.
Navbar.tsx. I'm going to mark this as use client and I'm going to export const navbar. We're going to give this a nav semantic HTML tag and let's just give it some default classes here. So I'm going to go ahead and give it a full width class flex items, the center padding of four, and I'm going to define the height to be 68 pixels. Let's also give it a gap x of 8, a border bottom and on large devices a padding left which is going to be 34 pixels and let's write navbar let's go back inside of the editor and now we can import that from .slash navbar or from features, editor, components, navbar depending on how you prefer it.
There we go. So now we should have this big navbar at the top right here And now we're gonna go ahead and continue developing so we create a proper layout for our, well, editor here. Now that we have the navbar, let's go ahead and do the following. So I wanna go ahead now and wrap my entire project here in another div. So everything below the navbar will be in another div.
And we're going to give this div a class name of absolute. And then we're going to create a dynamic height here. So we're going to calculate 100% minus 68 pixels here. We're gonna give it outside of the square brackets, we're gonna give it a full width and we're gonna go ahead and move from the top by 68 pixels and we're gonna define flex right here so basically we are offsetting for our navbar right here we have to offset because we've defined this as an absolute element in here so let's go ahead and see if anything has perhaps changed now and there we go I believe that now it is a bit more stable because I remember when we started this chapter, all I had to do was click on this rectangle and it did a very weird zoom. So now it seems to me like it's doing its best to stay centered, no matter what I do.
If I log in, if I log out, it seems pretty stable. We do have some other issues here, so we are slowly fixing it, right? Also make sure to also try, you know, with zooming in and zooming out, just so you yourself can track the progress. All right, so we have this defined now. And now what I wanna do is go inside this first new div which we've created, and I wanna create a sidebar component.
So for now it's also going to be just an empty sidebar so inside of the same folder or same level where we created the navbar we are now creating sidebar.vsx So we are working inside of the features folder here. Let's mark sidebar as use client as well. And we are very simply exporting the sidebar component. We're gonna use the aside semantic HTML tag. And we're gonna give this a bg-white, flex, flex-col.
We're gonna define the width to be 100 pixels. We're gonna give it a full height, a border R, and overflow Y auto. Now we can go back inside of the editor and we can import the sidebar from .slash sidebar or you can copy the components like this. Again, depending on what you prefer. There we go.
So now as you can see, we also have the sidebar here on the side. Perfect. And it looks like our Flexbox is handling that pretty well. This offset of the sidebar. Great.
And now let's go ahead and let's add one more element here which we are going to need which is going to be called the toolbar element. But before we do that I just want to quickly do the following. So I don't want to call this the main element actually I want to wrap my this element right here I want to wrap it inside of main that's what I wanted to say like this I want to wrap this inside of main and whoops my apologies now we're gonna go ahead and give this main element a class name of bg muted like this flex1 overflow auto like this we're gonna give it a relative class name flex and flex home like this And then inside of here, we're going to create another empty element called toolbar and let's create it on the same level as our navbar and sidebar. So toolbar.vsx and the toolbar is going to be quite simple as well so let's just go ahead and do xword const toolbar and we can use a div for this Let's just go ahead and save this. Now let's go back inside of the editor and let's import toolbar from .slash toolbar or again if you prefer this like I do you can do it like this.
I just like to know that my features are from the editor feature here that's why I'm not using the .slash and there we go now you should see that we now have this little toolbar here. So this toolbar is going to be empty unless we select an element. When we select an element right here, we're gonna have some options like to change the border width or to change the font, right? We are going to detect what kind of element has been selected. And depending on that, we're going to load different stuff inside of our toolbar.
So our navbar will have the generic undo, redo and the main, you know, select tool button. But our toolbar itself will have some different options. Let's go ahead and continue developing here. So we're going to go ahead now and do some changes, some last changes here. So now below the toolbar we have the container ref right here and let's go ahead and give it a different class name here.
So it is going to have flex1 but height is no longer going to be full. Height is going to be a calculation of 100% minus 124 pixels, which is basically a combination of this nav bar right here of 68 pixels and this 56 pixels right here. There we go. So now we have the proper layout for our editor here. And it seems like zoom has greatly improved now, but I can still detect some slight issues.
When I clicked somewhere, it kind of did a very weird zoom. I don't know if that was a mistake. Let me refresh again so we can see. All right, so some stuff is definitely still happening. And I believe that's because there is one more element which I want to add here.
So let's just add that before we debug because it's very hard to debug that use auto zoom hook if we don't even have the proper layout, right? We can only start doing that once we have the proper layout. So let's go ahead outside of this div, which is encapsulating our canvas, which is basically our container ref, right? So this is how it looks like zoomed out of it. Outside of here, I wanna go ahead and I wanna add a footer component, which again is just going to be an empty footer.
So let's go ahead inside of our existing features editor components and we're going to add a footer here. So let's export const footer and we can return a footer semantic element here and let's give it a class name height of 52 pixels a border top bg-white full width flex items-center overflow x-auto Z index of 49 adding off to gap X of 1 shrink 0 px 4 and let's do flex row reverse. And later in here we're gonna add zoom in and zoom out buttons. So I'm using flex row reverse so they start at the end all the way on the right rather on the left as it usually does. We can also do that with margin left auto but I just think this is a neat little trick we can do.
Let's go back inside of the editor and let's fix this error here so we can import the footer. There we go. So we should now have the navbar, footer, use editor, sidebar and toolbar in our imports here. And just make sure I'm gonna zoom out so you can pause and take a look at this code snippet to ensure that all of your elements are positioned correctly. Great, and I think this should improve our editor even further.
So let's go ahead. Okay, it seems like it's still having some weird... It loads in one way when it's here but when I select it kind of zooms in. So something is definitely still happening. We have this overflow right here but I think for this chapter it's enough for us to confirm that we have the proper layout here so we're gonna go ahead and start debugging this in the next chapter.
Great great job!