# Tailwind on Rails #177 Responsive Collapsible Sidebar

- URL: https://superails.com/posts/tailwind-on-rails-177-responsive-collapsible-sidebar
- Published: 2024-06-30
- Duration: 09:57
- Access: free
- Topics: stimulusjs, tailwindcss, css
- Playlists: Tailwind on Rails

Let's add a button to minimise (collapse) the sidebar.

When the sidebar is minimised, only link icons (not labels) are visible.

We will also save the sidebar state across requests.

Based on this blogpost:
https://blog.corsego.com/tailwind-collapsible-sidebar

Episode source code:
https://github.com/corsego/138-tailwind-layout/commit/280d649360359de1c346741d130d7cd49c9745d2

## Transcript

Hello friends. This is going to be another video in the VIN on Rails series. And recently I received an email request from Aruba Friend to create a responsive sidebar that you can minimize. Uh, and, uh, if it is minimized, you would see only icons. If it is not minimized, you would also see, uh, text. And if you refresh the page, you, the sidebar keeps its minimized state, uh, uh, based on cookie, on something else. Actually, I have previously implemented the similar functionality as, uh, drawn here in a real application. Here it is. So, uh, I have this, uh, toggle button. Uh, here it is on the bottom of the sidebar. If I toggle it and refresh the page, it'll, uh, stay toggled. If I, uh, navigate anyway, it'll still stay toggled. If I un toggle, it'll also save the state. And you see, when it is un toggled, I see not only the icons, but the text. And when it's toggled, I see only the icons. And here is, uh, more as the final result that they're going to have today. So here's the application that we've been building in this Vin Angel series. Here we have a sidebar and I have a couple of links and a toggle button. If I click on the toggle, I don't see the text of the links. The sidebar is minimized and I see just the icons. If I click un toggle, you'll also see the texts. So let's build this kind of application. First of all, I'm going to navigate to a branch where I still do not have this, um, implemented. And, uh, here is the initial state of the application after these seven episodes. Okay, so we have a sidebar. Let's open our sidebar, uh, application. H tml. We have layout slash sidebar. Here it is. And let's first of all do the CSS. So first of all, I will have a data attribute. Data expanded equals true. And now we're going to have some conditional CSS. So let's say if data expanded equals through, let's change the background of this to green. So I will, uh, say, uh, uh, class equals, and now we're going to do some, uh, CSS, uh, magic. So, uh, we'll have data expanded equals true under score and, and will have background green, uh, 400. So if data expanded equals true, they will have a green background. Let's see if it works. So now it is green. I will set the data expanded to false, and now it is not green. And this is the principle based on which we're going to do all the CSS changes. Now we need a way to, uh, change the data expanded from true to false and vice versa. So we'll need to add a button. We're going to do this with stimulus js. Let's create a controller rails, generate ti sidebar. Let's run the server again, bin dev. And I will open sidebar controller. And uh, here I will, uh, uh, have A toggle action toggle. We'll have an event. And let's add the A button for this. I'll add it in the bottom. I will have equals button to, uh, Neil, I want to redirect anywhere, uh, data, uh, action, uh, stimulus controller name sidebar. And the action will be toggle, uh, do, and here I will have, uh, that text toggle. And next to it I will have an icon to minimize. Okay, let's see how it looks. So here I have this toggle button, and then I click the toggle button. I have a full page of direct each, uh, time. And I should be also hitting the sidebar toggle. So I don't want to have the full page of direct. I will say, uh, prevent default. So event prevent default. And now when I click on toggle, I don't have a full page. Uh, I shouldn't have a full page direct. Something is, uh, uh, not right. Sidebar, toggle. Okay, refresh. Let's see. Actually it is a rookie mistake. Uh, it does not, uh, listen to prevent default because I did not, uh, set data controller sidebar. So I'm going to set it here. I will say, um, data controller equals sidebar. Now let's, uh, refresh the page. And here, now I click on toggle and I don't have a full page refresh. Okay. And now I'm going to change the state of, uh, data expanded on the data controller element on this place where it is defined. So I will have, uh, uh, constant new state equals this element dataset do, uh, expanded. And, uh, if expanded equals through, they will set it to false. If it is, does not equal true, they'll set it true. And I will say document hook key equals side by expanded new state, I don't need to specify the path. Uh, yeah, this should, uh, work. Uh, and we can log it in the console, console log, uh, document cookie or better, just in new state. New state. Okay, let's click on toggle. And you see it changes from no, it only sets to true, uh, via that. Well, we actually want to also update, uh, the data expanded to be the new state. We should not only update the cookie. So I will say this element data set expanded equals new state. Let's try again. I will click on toggle. And now, yeah, it toggles from true to false, so looks good. And you see each time I toggle the color of the side, but topo changes. So looks good. I will refresh the page. And after the page refresh, you see it still goes back to the initial state that was, uh, set to true here. So instead of having this hot coded, I will have, uh, cookies. And in the cookies we have our sidebar expanded attribute. So we'll have this one or true. So it'll be either true false set from the cookies or true by default. Uh, let's clean this up to be multiline so that it's more readable. Okay, let's try once again. So now I will click on toggle. I refresh the page and it stays screen. I will click on toggle. Once again, I refresh the page and it stays, uh, uh, without a color. Okay. And based, uh, on the this, uh, based on conditional setting, the data expanded, uh, and updating the CSS based on this, we can, uh, hide or show elements. So let's, uh, start with the toggle button. If, um, uh, it is toggled, we will show only the arrow. If it is not toggled, we'll also show the text. So let's say, uh, uh, I put the text in span and I will add class. And let's cope with this. So if, uh, data expensive, expanded equals false, we will add the hidden class. Let's try again. So I have it as false. Now I have it as through now. And you see it's visible. Let's also have this, uh, icon conditional. So, uh, we'll have, uh, the icon and, uh, yeah, another icon for the un toggled state. Let's, uh, okay here, this fault. And, and here it should be true. So, uh, yeah, now it is not toggled and now it is toggled. And you see also the icon changes. Uh, let's, uh, clean it up. We don't need decide what bottom text. We don't want to set the fixed width on the side, but we want to actually make it smaller. Then there is less content. So I will remove this, uh, fixed width. And you see now this, uh, the biggest sidebar, I will, um, make it smaller. It doesn't become smaller because we have the sidebar top text. Let's, uh, hide it or we can add the, another link here. Now let's try to hide it. So yeah, here we have just the sidebar toggle button. I toggle, I see only the button. I un toggle. I see the button and the text. And when I refresh the page, the state is perceived. So looks good. And in the similar way, you can do it for all kinds of other links. For example, link to homepage, let's say the link to route, uh, path. We don't need any data attributes. I will have, uh, a house here And, uh, home here. Okay. Uh, I will remove this, uh, conditional coloring. Um, and yeah, I will have a home visible in both uh, cases, but here will also have the text. So here we have, uh, a house and home. I will click on toggle and I have only the house. And you see the sidebar takes as much space as it needs in both cases. But, so I'm hot code in the width, but, uh, I, uh, have text in the un toggle version and no text in the toggle version. So that's about it. Basically, we added a stimulus control that, uh, changes the data set, expanded from true to false. We tried it to the cookies. We have conditional CSS that based on the data expanded attribute, uh, shows or hides different elements. That's it. Thanks for being with me and see you in the next one.