In this chapter, we're going to develop the dashboard layout. And for that, we're going to need to do some architectural changes, but also add some design screenshots so that we can tag them into Cloud Code, Open Code or Codex so that we can instruct our agents exactly how we want our layout to look like. So let's go ahead and create a new folder called design and inside of that folder go ahead and add all of these screenshots of the UI which I've prepared for you. Using the link on the screen, you can access this project's open source repository. And once you are here, just make sure that you are either on the main branch or in chapter 05, which is the chapter that I'm recording right now, so obviously I don't have it yet.
And then once you're here, you will be able to find the designs folder which we are going to commit now. And while you are in the repository go ahead and do one more thing. This is also very important because it's going to dictate the look and feel of our application. Again, make sure that you are on the main branch or in chapter 05. And once you are there, go inside of app, go inside of globals.css and copy the entire file.
And then go inside of app, yourglobals.css and replace it entirely. So some of the differences you're going to notice immediately are things like these little snippets that enable the pointer cursor for the buttons when they are not disabled. Other things that are different are specific colors in the dark mode and also some general variables like radius have been changed. So just make sure that you update your globals.css according to my GitHub repository's globals.css file. Again, just make sure you are on the main branch or in chapter 0.5.
And then go inside of app, globals.css, copy the entire thing and replace your globals.css. And now you should have around 17 changes. Don't take my word for it because maybe I will add more design images if I find that some are missing throughout this tutorial. What's important is that right now the only uncommitted changes you have are globals.css and then just a bunch of images, right? I'm not sure what is the exact number that I'm going to leave here.
I might even remove some if we end up not using them, but just make sure it looks something like this. And using the diff viewer, you can actually see which differences you are supposed to have in your globals.css here. So it looks like I also added clerk-ui-themes-chat-cn.css I've replaced the radius and I've just replaced some of the colors in the dark mode and added this right here. So not too much, but just enough to make our app look and feel a little bit better. So I'm not really sure if we actually need this ClerkUI themes chat-cn.css because I think we already have it here but I think it won't hurt being here as well.
I don't know. I'm going to leave it as is and if it causes any problems I'm going to remove it so let's go ahead and actually do git add git commit and git push So we can continue developing this chapter without having a bunch of uncommitted changes confusing us so we don't know what is the code change and what is just some style change. So go ahead and run your app and then visit it on localhost 3000. What you should look out for is that clerk styling looks fine, so you should have the user button working, you should have the organization switcher working and pressing the letter D on your keyboard should still switch to light mode and Clark design should follow. So I'm pretty certain at this point that we actually no longer need this here because it's imported in globals.css so if we actually remove this I think everything will work just fine.
But it's not causing any problems either, so I will just leave it here and if I do notice any problems, I'm gonna remove it later or I will just clean up with AI later. Great, so now let's go ahead and let's actually take a look at what we've added in the design here. So what I've added here are mostly some atomic design screenshots about individual elements, about sidebars, full design looks, some empty states, logs, logs with different variants, some other empty states, specific node data looks, editor states, things like that which will help us instruct our agent into how we want our app to look like. This isn't necessarily required, it's just so we have some kind of reference. So you don't have to look through the web to find something that you like, but you have it all here.
Usually you can do this through Figma as well and the problem is if you want to use Figma MCP server and connect it to Cloud Code for example you unfortunately need a Figma paid plan and I didn't want to do that as the default in this tutorial because I understand not many of you want to update to Figma Premium just to follow a tutorial so because of that screenshots are the better choice here. So let's go ahead and actually try using this design right here. No workflow selected. So what I'm going to do is I'm going to open Cloud Code and I'm going to tell it the following modify page.tsx and make sure you pick the one in the app folder so the root page.tsx so that it uses empty components from components UI and it recreates the contents of no workflow selected PNG. And once again I'm in auto mode with high effort.
So let's see if it will be able to replicate that. It appears to have completed its task. Let's see if it actually looks as I've expected. There we go. No workflow selected.
Select a workflow from the sidebar or create a new one to get started. That is pretty close. Probably identical. Brilliant. Now let's go ahead and actually create a sidebar once again using Shazian components and let's prepare the following, Not the right sidebar, this is something else.
So make sure you choose the app sidebar. This is the one which we are going to recreate now. So as you can see, we are going to have an organization switcher at the top, then we're going to have workflows section with items inside and we're going to have a user button at the bottom. So some questions we have to answer here are how do we display, I mean how do we keep the data for these workflows because we don't yet have any database. So I'm going to instruct it to just keep a dummy array of things like this and this button right here should collapse the sidebar to icon variant.
So it will be interesting to see how we are going to develop this. The plus button can't do anything at the moment. Let's do one architectural change before we proceed and that is by creating a new route group called dashboard and then simply drag and drop the root page inside of that route group. This way the URL of our root hasn't changed but now we can maintain page within this folder right here And also we can create a layout file inside of that folder as well. This was a problem previously because we would override this layout.
But this layout is the root layout for the entire application. So we shouldn't actually add the sidebar here. Why not? Because in this root layout, there are other pages which are rendered, like choose organization, sign in, and sign up. None of those should have a sidebar.
So that's why we have to create a new route group. And when you drag and drop the page inside of dashboard, it can happen that you have this weird unsaved file coming from the .next folder. This is regenerated every time you run the app, so you don't have to worry about this file at all. You can just close it and save it and forget about it. So this is a .next folder.
Make sure you close it so it doesn't interfere with your work. So nothing changes now. Everything is exactly as it was before. We didn't change absolutely anything. But now we can create a layout file inside of here and then instruct the agent to develop that with the sidebar.
This is how our prompt is going to look like. Create a new layout file in the dashboard route group, which encapsulates the root page.tsx. We are first giving it instructions on where this is going to be developed. Inside, cascade a new sidebar from our components UI and everything it needs to render and function properly. So this will include things like sidebar provider and the entire semantic order it needs to actually work.
Develop the actual sidebar content inside a new component called AppSidebar and put it in the components folder. So there is a difference between this sidebar and the app sidebar. The app sidebar will be a new component which will have the UI which we expect, right? But what's going to be inside of the layout file in the dashboard is just going to be the sidebar chat-cn composition that will allow us to render this. And we're going to maintain this in the components folder.
I'm then telling it to utilize sidebar header to render clerk's organization switcher and utilize sidebar footer to render clerk's user button inside. In between, render a dummy list of workflows using sidebar items and buttons. And of course, I tell it use the app sidebar PNG as design reference. Once again, Opus 4.8, auto mode, effort high. Let's see what it comes up with.
Let's take a look at the summary and then let's take a look at the actual result. So it says done, two files created, no type errors. First layout.tsx which now wraps the route group in page.tsx. It adds a sidebar provider, it renders the app sidebar which is a new custom component and it uses sidebar inset. Perfect.
All of that is handled, so what it's saying here is basically describing how the sidebar component works so we don't have to do anything here. And then inside of the app sidebar it did exactly what I wanted. So it used Clerk Organization Switcher and it added it inside of Sidebar header alongside the Sidebar Trigger Collapse button. So this is something that I didn't tell it to do, I actually forgot that, but it saw the design and in the design there actually is a collapse button. The sidebar content are the workflows using sidebar group label and a sidebar group action and then a dummy workflow list.
So judging by this summary, this looks great. Let's take a look at the code now. So what we have here is that we deleted the original page.tsx, right? And we moved it here into the dashboard. And then inside of the layout here, we added sidebar inset and sidebar provider from components UI sidebar.
So very simple dashboard layout file. So that's the new file which was created. And then it renders the app sidebar. And this is the actual content. So use client.
Great. So import from React organization switcher user button plus icon, a bunch of imports from components UI sidebar, a demo list of our workflows, and then an export app sidebar. So in here we have active workflow and set active workflow. This isn't needed and we're going to change this later. So the reason it added this is because in the design here, in the app sidebar, you can see that I have one workflow selected.
So it obviously wanted to replicate that as well. Obviously we are going to maintain this using the URL but I guess for now it wants us to... If your app didn't do this, perfectly fine. Not needed. There will be no user state in our app sidebar, so don't worry.
Okay, let's take a look at the actual composition. So we have a sidebar, great, then we have sidebar header. In here we have a div which renders the organization switcher. It added the hide personal prop, which is great because we don't support personal accounts. It added the appearance prop where it modified the elements like root box, flex1 and organization switcher trigger with full and justify between.
We are going to see if this works for us or not. Next to it we have the sidebar trigger. So that's it for the sidebar header component. Then we have the sidebar content. In here we have sidebar group, sidebar group label, workflows and then a sidebar group action plus icon.
Perfect. So if you're not following, that is this right here. So this is a sidebar group label and this is a sidebar group action, a plus button. Let me keep this image open because I keep losing it. And let's see what else do we have.
So we now have sidebar group content, sidebar menu, and then using sidebar menu item and menu button, we basically have the workflow text rendered and a little is active here, which is maintained using that state, which I told you isn't really needed. If your AI didn't implement that, no worries, you don't need it here. And that's it for the sidebar content, so all of these are just closing tags and then we have sidebar footer which renders the user button once again with some appearance. I'm not sure about the show name prop, I think we're not gonna need that so let's go ahead and take a look. Wow!
This is incredible. This is so close to our picture here. Take a look. So the only thing as I said I'm not sure of is the fact that we are displaying the name here. I kind of don't think it looks good.
And also we have this next JS indicator here. So what we can do for that is we can quickly go, I mean, you can just ask AI to do it for you, but since it's pretty quick, just go inside of nextconfig.ts, dev indicators and set it to be false. There we go. And then it disappears. Perfect.
Wow. So this is pretty impressive. The only problem is, there we go, we have a bug. The sidebar collapse hides the entire sidebar. That's not what we want.
We want it to collapse to icon mode but we're going to have to do something about that. Great. So I'm pretty satisfied with this. Yep, this looks fine. Perhaps we can add maybe a little bit of a gap between these elements and I'm also going to remove this.
So let's go ahead and do some of those tiny little changes by hand so we can remove shown name. I think that's the first thing I can remove and let me take a look at how that looks like. There we go. So I'm not really sure if I really need these elements in that case, especially user button trigger, I don't think I need that, maybe the width full, so it takes the whole space, but yeah, the other one is definitely not needed. Brilliant!
Let's take a look at what else we have here. So sidebar menu, well perhaps we can add a class name and do something like gap-y 0.5 and then there's gonna be like the tiniest space between these two elements. I think that looks very, very good. Brilliant. So now I'm going to continue here and I'm going to tell it the following.
The sidebar collapse button should collapse to sidebars icon variant. Meaning that it should still be visible and it shouldn't disappear completely when collapsed. There we go. So this is my prompt and I'm just going to continue in the same conversation because it is relevant to what I want to change. Let's take a look at its changes.
So it imported the workflow icon because it assumes we're going to need to render icons now when the sidebar is collapsed. Next, it added the collapsible icon prop to our app sidebar. Then it added a tooltip and a workflow icon to every single workflow rendered in the workflow in the sidebar content because when collapsed and when you hover over it, it will show that tooltip. I'm going to show you that in a second. So it also told us one thing to be aware of.
In the header, the clerk organization switcher sits next to the trigger and won't shrink gracefully into the rail. Its trigger will get clipped when collapsed. The sidebar trigger itself stays visible and functional, so collapse expand works. If you want header to look clean while collapsed, the usual move is to swap the organization switcher for just the organization logo icon visibility classes. So let's take a look at what we currently have and then we're going to decide what to do with this.
So let me refresh to see if this is something broken. Oh, there we go. Let's take a look at what happened here now. So app sidebar, we have collapsible icon and then we have props. So I'm not really sure what is causing this error right here.
Let me maybe check this here. I see, this is one thing we forgot to do when we added a tool tip. So chances are, if you told your AI to do this as well, and if inside of app sidebar, you have imported, actually, you didn't have to import anything. The collapsible icon inside of sidebar uses tooltip. And the only way tooltip can work is if it's added to the layout file, to the root layout.
So, we are encountering an error now and honestly this exact error isn't that useful. This one is super weird but the second error is very clear. Tooltip cannot be used outside of Tooltip provider. So let's go ahead and actually add this right here and I'm just gonna go ahead and go back instead of Cloud Code and let's do a quick fix. So variant actually collapsible icon makes the sidebar component use or should I say render the tooltip component.
We never added the tooltip provider. So let's go ahead and tell it to fix that. It should be a pretty easy fix. It should just add the tooltip provider to our root layout the same way we have theme provider so we can already open this. Let's go ahead inside of our app folder layout.tsx so the same way we have theme provider and toaster.
Let's go ahead and see if it's going to add it here or maybe it will add it in this layout which technically works but I would prefer it actually does it somewhere else. So there we go. Sidebar provider now wraps its children in tooltip provider. Okay so that is not what we wanted to do. So what happens once an AI does something incorrectly?
Okay, what you can do here, whether you're using a plot code or open code codex, most of them have a rewind functionality which you can either use by invoking a command like this if you are in the CLI or you can click on the message like this. So let me try using the rewind here and let me go ahead and click this one which is basically the collapsible icon makes the sidebar component, makes the sidebar component use the tooltip. So I'm just going to say continue. So what happened now? Well what happened now is that I reverted the code that was generated in my last message okay so I am technically back to where I was a moment ago so let me go ahead and add something else Make sure to fix this in the root layout and let's select the layout in the app and nowhere else.
This time we are going to do it with more context and we are going to get a better result. So now we can confidently open the root layout file. So in here, layout.tsx, and there we go. You can see that now it has added the tool tip provider within the theme provider. So these things happen, right?
You technically didn't even have to rewind. You could just told it, hey, I wanted you to add this to the root layout and not modify the sidebar component. So just in case you are a bit overwhelmed now still nothing scary has happened so these are our current changes we disabled the dev indicators now we added the tooltip provider to the root layout file right here we move the page inside of the dashboard so this technically isn't a change but we did fill it with a very nice empty component we have a new layout within AppDashboard which renders the sidebar composition sidebar insets to render the children and our custom component app sidebar. And instead of app sidebar we added collapsible icon which broke the app because it used the tooltip component. So now that we've added that tooltip component we should be able to do this.
There we go. So, obviously not perfect, but we are getting to that point of making it look exactly how we want. So what sticks out the most at the moment is this broken organization switcher right here. I think it's easier for us to simply hide the organization switcher so the user will have to expand to full mode if they want to change organization. So let's go inside of app sidebar here and let's change the root box to have the following class name.
We are going to target if group data is collapsible icon and then we're going to set it to be hidden with an exclamation point like this. And once you collapse now, you can see that it is hidden. But I'm not sure if you notice but it's not perfectly aligned. There's like a little extra space here, which it shouldn't be. You can see that this isn't exactly centered as this is.
So let's go ahead and add a little class name here to fix that. What I'm going to do is I'm going to get rid of this div and just have the sidebar header directly render both the organization switcher and the sidebar trigger. And then I'm going to give the sidebar header this class name right here. So I'm basically adding the exact same class name it had before in a div and I'm also giving it if group data is collapsible icon then use justify center and then once again if group data is collapsible icon set the gap to zero And then you will notice that this is now perfectly centered below this. There we go.
So now we have a very, very smooth collapse and expand functionality. Great. One thing I'm still seeing is missing is a variant here and let's set it to inset. There we go. I'm not sure if you noticed the difference but now this has kind of like a encapsulating look.
Take a look at how it looks without this. You can see it's just like a very strict line here. But if you use variant inset, then it looks much nicer. But it does add this overflow, so let's see how we can fix that. Let's go ahead and open our dashboard layout.tsx and let's go inside of the sidebar provider and let's add a class name Height HSVH like this.
And then on the sidebar inset, let's go ahead and add the following class name. And this should completely eliminate the overflow. There we go. You can see how nice and encapsulated this sidebar inset looks now. Now, there is no overflow.
I cannot scroll up and down. As opposed to what we previously had, you can see it looks weird and you can scroll and there's no visible border so by adding these two classes, I mean class names, it looks much much better. Now let's also make sure that the user button correctly centers when collapsed because right now once again I'm not sure if you can see, but I can notice that there's too much space here and I'm just a sucker for these details and I have to fix them. So let's go instead of the app sidebar here, Let's find the sidebar footer and let's go ahead and give it the following class name. And then let's modify two more elements in the user button appearance prop.
So add this to user button trigger and this to user button outer identifier. So make sure you have these classes and then when collapsed you can see it's perfectly centered. Everything is aligned. Lovely. So, what I don't like right now is the fact that each of my workflow has an icon.
Obviously, this was added so that they can be displayed when in collapsed mode. But there are better ways of doing this. But to save the progress that we have, let's go ahead and actually commit this. So git add, git commit, feat, add, dashboard, layout and app sidebar and git push. So we have a checkpoint for what's currently working.
We have a working sidebar, we have a nice inset content here and we even have a nice empty state. So we created a checkpoint and now we're going to create a new prompt which is going to modify this so it looks a little bit nicer. Let's take a look at how we actually want the collapsed state to look like. So what we saw already is the expanded app sidebar. Obviously, we want to get rid of these icons.
But when the sidebar is collapsed, we actually want this to happen. We want just one workflow icon which when clicked on opens a popover which renders a bunch of workflows inside as well as a button to create a new workflow. And when closed it's just a normal icon beneath the sidebar collapse instead of being this, right? So it's actually going to look exactly like this without all the other options and when we click on it, it will open a popover component like that. So let's go ahead and prepare a prompt that's going to do that.
The first thing I'd like to review is how our app sidebar looks at the moment. So make sure that you are inside of this component. So right now app sidebar is a component which is responsible for maintaining the active workflow which we said we're going to remove anyway, but still, right now, at least my version is responsible for this. So let's think. So I will now instruct it to maintain two different states.
One, when sidebar is expanded like this, and then another when sidebar is collapsed like this. So it's going to need to have some kind of if clause to detect when the sidebar is in collapsed mode or it should use CSS for that, right? It's gonna have to handle something. So here's what I'm thinking. In my prompt, I actually wanna include the following as well.
I'm thinking of entirely getting rid of what's inside of sidebar content. So the entire sidebar group like this and instead just rendering something like workflow navigation. A new component and then developing that here. So a brand new function. And then this component is going to be responsible for rendering the workflows and for maintaining which workflow is active, right?
Because I could just have if state is expanded here, in that case let's return popover, right? This is just pseudocode, Right? But I think you're getting the idea of what I want to do. So let me just revert that state because None of this will be exactly like this. So we are back to where we were.
Let me just do this. There we go. And now let's go ahead and create a brand new prompt for this. This is the prompt that we are going to execute. Refactor the workflow list in components app sidebar so it adapts to whether the sidebar is expanded or collapsed.
Pull the whole thing into a new component called workflow nav, defined in the same file. It should own both states. Use the Use Sidebar hook from Components UI Sidebar to know which state you are in. When you are in Expanded, render the full list of workflows, just like now, but remove the icon from the workflow items, because right now every item has one and I don't want any of them. When in collapsed mode, don't render the list at all.
Instead, render a single button with the workflow icon. This is the only icon in the whole thing. Clicking it opens a popover containing the list of workflows plus a button to create a new one. Don't track the popover's open state yourself, let the popover trigger handle that. And don't build custom components or write custom CSS to match the design.
Just use the default popover and sidebar components that already exist. And then we pass along the design reference which we previously showed. So collapsed app sidebar and collapsed app sidebar workflow list. And I added this because I wanted to understand that I really don't like that every workflow has the icon but perhaps it will misunderstand this so I might remove this part actually. So I think this is a pretty solid plan for us to do.
Let's go ahead and implement this in Auto Mode, Effort High, Opus 4.8. Let's take a look at the summary of the result. So, The workflow list is now a contained workflow nav component, which is defined within the app sidebar, that reads the sidebar state via use sidebar and owns both layouts. The expanded, where the full list, well, the full workflow list is exactly as before, but with the per item workflow icon removed. Then we have a collapsed, no list, just one sidebar menu button with a workflow icon that acts as a popover trigger.
The popover holds a new workflow button, a separator and the workflow list. So it extracted that from the design which we gave it. Notes on the constraints you set. Popover open state is handled entirely by the trigger. No state tracked in the component.
Only existing popover and sidebar primitives are used and only a few class name tweaks to override spacing. I am good with that. The active workflow state and workflow items are shared between both branches. So selection is consistent with whichever layout renders. Type check passes with no errors for the file.
Brilliant! Let's take a look at the actual change. So inside of the app sidebar, it seems like we've now imported the popover components. We added sidebar separator, sidebar trigger and use sidebar here. And we have a brand new component called workflow nav.
And in here we are using a hook use sidebar and the react use state which maintains the currently active workflow. And in here we render differently depending if the state is collapsed, in which we simply render a popover with a popover trigger with a sidebar menu button, and then we render a list of sidebar menu items within the popover content. Brilliant. Otherwise, if it's expanded, we do exactly what we did before. Looks like we have workflow items set in a variable, so it's only defined once, and then we reuse it depending on state collapsed in the sidebar menu here within the popover content or inside of the sidebar menu right here.
Brilliant! Very clean solution. And now we have actually freed the app sidebar from having to maintain all of that and inside of the sidebar content we just render workflow nav. Beautiful! Exactly what we imagined.
So let's now go ahead and take a look at how the design looks like. Perfect! This is exactly what I wanted. So tooltip is here. That's fine.
We can work without it, but it might actually be useful. And when I click, we have a new workflow. We have a separator and we have a list of elements. One redundant thing is this tooltip right here. That's definitely not needed.
Let's take a look at the expanded mode. Beautiful. Perfect. So such a clean implementation of this. Let's go ahead inside of the app sidebar now and let's just clean things up a little bit.
So I can actually use the same session here and I can just tell it one thing. Remove the tool tip for the popover content. I think that should be clean enough. Remove the tool tip for the popover content. Basically, I don't want, let me go ahead and just expand a little bit more.
I don't want this to be having tool tips. So let me go ahead and maybe take a screenshot because I can't explain myself well. So now I didn't want you to remove the tooltip for the workflows button. I wanted you to remove the tooltip for workflows list which is rendered within the popover content. And then I'm going to attach a screenshot.
So let me go ahead and just expand this. There we go. So now it will see the redundancy because it is redundant. There we go. So I didn't want you to remove the tooltip for the workflows button because that's what it understood me it wants whether your agent did that or not it's not really important right but I'm just explaining that I didn't want that I wanted you to remove the tooltip for the workflow list which is rendered within the popover content because it is redundant So you don't have to obsess over this as much as I am.
I just want to get rid of these tooltips and let's see if it will be able to do that. Maybe we can detect it in real time. Let's see. Yes, the problem is that it has to keep it in the expanded list but it actually I'm not sure it needs it anywhere let me take a look at the workflow nav here It thinks it needs to have the tooltip here so it's overcomplicating now. This is the biggest problem when working on high thinking with agentic coding because it tends to overthink.
So here's what I'm just gonna tell it now. We don't need the tooltip in either state. So it completely over complicated what is a very simple change. And yes, these things happen with the gentic coding and they can actually be reduced by noticing patterns like this and then updating your clod or agents.md file So it can detect situations like this and just not give you so much opposition or such overcomplicating. And obviously different models behave differently.
Perhaps yours didn't do anything like this. Let's take a look now. There we go. This is something that I like. Brilliant.
This is exactly how I want this to look like. So now I'm going to go ahead and just do one more thing here. So instead of workflow items here, I think in this sidebar menu I have this gap but in this one I don't so I'm just going to add it here. So I've added the class name for the popover content so this one has the exact same tiny little gap between elements. Brilliant, I'm very very happy with this solution right here.
So now that we have this working I actually want to completely separate this workflow nav component which we've developed here using agentic coding into its own file. The reason I want to do this is because workflow nav is a client component whereas app sidebar, at least the plans that I have for it is going to be a server component. Meaning that we cannot develop both in the same file. Okay, it was easier for us to use a gentic coding to develop it here, but let's actually separate them now. So I'm going to tell it to move the workflow nav component to a new location, and that location is going to be the following.
So a brand new features folder and then workflows components and then workflow-nav.tsx. And then remove the use client from the app sidebar. Remember to add use client to the new separated workflow nav component. So that's what we are doing. We are now separating these two components.
We are putting workflow nav in a brand new location in features, workflows, components, workflow nav. And then we are removing the use client tag from components app sidebar. So the workflow nav is the one which is going to have use client because that's going to be the reactive component so let's go ahead and submit this as well and there we go created workflows my apologies features workflows components workflow nav with use client exporting the workflow nav and the workflows data that it owns. So I didn't ask for that because this is just dummy data, so it doesn't really matter. The components app sidebar no longer has use client.
It's now a server component that imports workflow nav and only keeps the sidebar shell. Perfect. Let's take a look at this new output. So first things first, let's take a look at the changes within the app sidebar. It's much simpler now as you can see.
We just import workflow nav from its new location and all we do is render it in the sidebar content. We no longer develop that component in here. So we got rid of a bunch of unused imports from the popover and other things. And now we should also have a brand new folder called Features, Workflows, Components, WorkflowNav. And in here we now have use client, that's important, and we now have the workflow nav component.
Beautiful! So visually, design-wise, nothing is going to change, but now the app sidebar is no longer a client component, meaning that we can use it as a server component and directly access the database and load the workflows when we actually have a database to load from. So just verify that everything still works in your project. The last problem we have before we can close this chapter is the fact that the sidebar is still being somewhat in mobile mode when fully collapsed. So it disappears entirely.
Workflow apps are really not possible to be developed for mobile. Technically they are, but they are never good. So in our solution, what we are just going to do is we're going to make sure that the sidebar never completely disappears. So Users will be able to do this, which is enough to enable work on tablets, but on mobile it's just not going to be as usable and it really makes no sense to completely hide the sidebar because that just makes the app completely unusable. In order to make the sidebar behave this way, let's go ahead directly inside of components UI and then go ahead and find the sidebar component.
So thanks to Shazia and UI we can actually take a look at the contents of our sidebar. In here find the function sidebar provider and when it comes to the variable isMobile simply set it to be false. Then you can also remove this unused import right here. So just make sure that the sidebar provider has been set to false. So this just by itself is not really enough.
You can see that it still collapses. That is because we need to change some CSS class names in the actual sidebar component. So go ahead and find sidebar. So scroll a bit down and after this big block is mobile, you're going to see this div which by default is hidden and only block on medium viewpoint. Now you can completely reverse that.
So make it block by default. And then if you scroll a bit down here, you will find the same thing in the sidebar container. So it's hidden by default and only on medium viewport does it become flex. So let's change that and let's replace hidden with flex. If it's easier for you, you can just go inside of my source code and copy the sidebar.tsx component.
But this should basically do it. Let me verify. There we go. No matter how small the device now, it is not going to collapse. So let's go ahead and do git add, git commit, and let's do git push.
Amazing job and see you in the next chapter.