added monitor layout icon to waybar when external monitors are connected

waybar/.config/waybar/config.jsonc

@@ -2,7 +2,7 @@
   "position": "top",
   "modules-left": ["hyprland/workspaces", "mpris"],
   "modules-center": ["hyprland/window"],
-  "modules-right": ["cpu", "memory", "tray", "bluetooth", "network", "pulseaudio", "battery", "custom/weather", "clock", "power-profiles-daemon", "custom/power"],
+  "modules-right": ["cpu", "memory", "tray", "bluetooth", "network", "pulseaudio", "battery", "custom/external-monitors", "custom/weather", "clock", "power-profiles-daemon", "custom/power"],
   "clock": {
     "format": "<span foreground='#f5c2e7'>   </span>{:%a %d %H:%M}",
     "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>"
@@ -85,6 +85,13 @@
 	"tooltip-format-enumerate-connected-battery": "{device_alias}\t{device_address}\t{device_battery_percentage}%",
     "on-click-left": "blueman-manager"
 },
+  "custom/external-monitors": {
+    "format": "{}",
+    "exec": "~/.local/bin/monitor-status.sh",
+    "return-type": "json",
+    "tooltip": true,
+    "on-click": "monique"
+  },
   "custom/power": {
 "format" : "⏻ ",
         "tooltip": false,

waybar/.config/waybar/style.css

@@ -140,6 +140,27 @@ button:hover {
   color: #ec9974;
 }
 
+#custom-external-monitors {
+  color: @sky;
+  border-bottom: 2px solid @sky;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  margin-left: 4px;
+  margin-right: 4px;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+#custom-external-monitors.hidden {
+  border: none;
+  background: transparent;
+  color: transparent;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+  text-shadow: none;
+}
+
 /* If workspaces is the leftmost module, omit left margin */
 .modules-left>widget:first-child>#workspaces {
     margin-left: 0;