steal tray-expander from Omarchy 🤓

waybar/config.jsonc

@@ -17,7 +17,7 @@
     "custom/mediaplayer"
   ],
   "modules-center": ["clock"],
-  "modules-right": ["group/monitors", "custom/separator", "tray", "custom/separator", "idle_inhibitor", "custom/power"],
+  "modules-right": ["group/monitors", "custom/separator", "group/tray-expander", "idle_inhibitor", "custom/power"],
   // -------------------------------------------------------------------------
   // Modules
   // -------------------------------------------------------------------------
@@ -226,6 +226,20 @@
     "on-scroll-up": "playerctl next",
     "on-scroll-down": "playerctl previous"
   },
+  "group/tray-expander": {
+    "orientation": "inherit",
+    "drawer": {
+      "transition-duration": 600,
+      "children-class": "tray-group-item"
+    },
+    "modules": ["custom/expand-icon", "tray", "custom/separator"]
+  },
+  "custom/expand-icon": {
+    "format": "",
+    "tooltip": false,
+    "min-length": 2,
+    "max-length": 2
+  },
   "tray": {
     "icon-size": 15,
     "spacing": 5

waybar/style.css

@@ -56,9 +56,9 @@ tooltip {
 
 #custom-rofi,
 #idle_inhibitor,
-#custom-power {
-  padding-left: 6px;
-  padding-right: 6px;
+#custom-power,
+#custom-expand-icon {
+  padding: 0px 6px;
   font-size: 18px;
 }
 
@@ -164,6 +164,10 @@ window#waybar.empty #window {
   background-color: alpha(@archlinux, 0.3);
 }
 
+#custom-expand-icon {
+  color: @green;
+}
+
 #idle_inhibitor {
   color: @yellow;
 }

waybar/style.css.template

@@ -56,9 +56,9 @@ tooltip {
 
 #custom-rofi,
 #idle_inhibitor,
-#custom-power {
-  padding-left: 6px;
-  padding-right: 6px;
+#custom-power,
+#custom-expand-icon {
+  padding: 0px 6px;
   font-size: 18px;
 }
 
@@ -164,6 +164,10 @@ window#waybar.empty #window {
   background-color: alpha(@archlinux, 0.3);
 }
 
+#custom-expand-icon {
+  color: @green;
+}
+
 #idle_inhibitor {
   color: @yellow;
 }