TailwindCSS on Rails: Minimize Collapsible Sidebar

A ruby friend named Daniel emailed me a request for this feature:

Here’s my solution, Daniel:

GIF

• ✅ 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!

Comments

[Yaroslav Shmarov]

spammer reported