Replace menu icon with panel-left and add toggle controller

Author: lazaronixon

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [Unreleased]
 - Fix default icon size from 1em to 1rem
 - Add CSS variables for separator color and size
+- Replace menu icon with panel-left icon
+- Add toggle class controller in layouts
 
 ## 3.0.1 - 2025-11-15
 - Remove debounce from filter method in command controller

lib/generators/css_zero/add/resources.yml

@@ -117,7 +117,8 @@ inputmask:
 layouts:
   - app/assets/stylesheets/layouts.css
   - app/assets/stylesheets/sidebar_menu.css
-  - app/assets/images/chevron-right.svg
+  - app/javascript/controllers/toggle_class_controller.js
+  - app/assets/images/panel-left.svg
 lightbox:
   - app/assets/stylesheets/lightbox.css
   - app/javascript/controllers/lightbox_controller.js

…add/templates/app/assets/images/menu.svg …mplates/app/assets/images/panel-left.svglib/generators/css_zero/add/templates/app/assets/images/menu.svg renamed to lib/generators/css_zero/add/templates/app/assets/images/panel-left.svg lib/generators/css_zero/add/templates/app/assets/images/menu.svg renamed to lib/generators/css_zero/add/templates/app/assets/images/panel-left.svg

@@ -35,9 +35,9 @@ img.icon {
 .icon--copy { --svg: url("copy.svg"); }
 .icon--download { --svg: url("download.svg"); }
 .icon--ellipsis { --svg: url("ellipsis.svg"); }
-.icon--menu { --svg: url("menu.svg"); }
 .icon--minus { --svg: url("minus.svg"); }
 .icon--moon { --svg: url("moon.svg"); }
+.icon--panel-left { --svg: url("panel-left.svg"); }
 .icon--search { --svg: url("search.svg"); }
 .icon--share { --svg: url("share.svg"); }
 .icon--sun { --svg: url("sun.svg"); }

lib/generators/css_zero/add/templates/app/assets/stylesheets/icons.css

@@ -5,6 +5,12 @@
   grid-template-columns: var(--sidebar-width, 0) 1fr;
   grid-template-rows: auto 1fr;
 
+  &:is(.closed) {
+    --sidebar-border-width: 0;
+    --sidebar-padding: 0;
+    --sidebar-width: 0;
+  }
+
   @media (width >= 48rem) {
     --sidebar-border-width: var(--border);
     --sidebar-padding: var(--size-2);

lib/generators/css_zero/add/templates/app/assets/stylesheets/layouts.css

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static classes = [ "toggle" ]
+
+  toggle() {
+    this.element.classList.toggle(this.toggleClass)
+  }
+
+  add() {
+    this.element.classList.add(this.toggleClass)
+  }
+
+  remove() {
+    this.element.classList.remove(this.toggleClass)
+  }
+}