A ruby friend named Daniel emailed me a request for this feature:
Here’s my solution, Daniel:
- ✅ Collapsible sidebar
- ✅ Save state
- ✅ Elegant solution
First, create a stimulus controller to collapse sidebar. Write the current state to cookies
// app/javascript/controllers/sidebar_controller.js import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["sidebarContainer"]; toggle(e) { e.preventDefault(); this.switchCurrentState(); } switchCurrentState() { const newState = this.element.dataset.expanded === "true" ? "false" : "true"; this.element.dataset.expanded = newState; document.cookie = `sidebar_expanded=${newState}`; // document.cookie = `sidebar_expanded=${newState}; path=/`; } } The toggle can be triggered by a button like this:
<%= button_to "Toggle", nil, data: { action: "click->sidebar#toggle" } Toggling the button will update cookies[:sidebar_expanded].
This is accessible in CSS via [[data-expanded=false]_&]:. You can use it as a condition!
Here’s a sidebar that hides text like "Home" & "Buttons" when data-expanded=false:
<!-- app/views/layouts/_sidebar.html.erb --> <nav class="bg-slate-400 hidden md:flex flex-col text-center p-4 justify-between sticky top-20 h-[calc(100vh-80px)]" data-controller="sidebar" data-expanded="<%= (cookies[:sidebar_expanded] || true) %>"> <div class="flex flex-col text-left"> <%= link_to root_path do %> <span>🏠</span> <span class="[[data-expanded=false]_&]:hidden">Home</span> <% end %> <%= link_to buttons_path do %> <span>🔘</span> <span class="[[data-expanded=false]_&]:hidden">Buttons</span> <% end %> </div> <div class="text-left"> <%= button_to nil, data: { action: "click->sidebar#toggle" } do %> <span class="[[data-expanded=true]_&]:hidden">➡️</span> <span class="[[data-expanded=false]_&]:hidden">⬅️</span> <span class="[[data-expanded=false]_&]:hidden">Toggle</span> <% end %> </div> </nav> 🤠 Voila!
Top comments (2)
spammer reported