How to toggle bar visibility and show submap name on hyprland?

[Kagukara]

On sway I had a bar that would only appear when I pressed a key bind and show the mode name. I would like to replicate this on hyprland but can't find a way to do so.

I can get the name of the submap to appear on an already opened bar if it has the "hyprland/submap" module, but you can't hide the bar with "start_hidden": true and make it reappear without changing "start_hidden": true back to false. This requires the bar to be killed and relaunched from my understanding.

Launching the bar with the same key bind as the submap doesn't work, as the name will not appear on the bar when its launched. If you don't have the submap reset to also kill the bar, pressing the key bind again will create an additional bar and the submap name will be displayed on the old bar.

The waybar bar I'm using:

{
	//"include": ["~/.config/waybar/modules"],
	"hyprland/submap": {
		"format": "{}",
		"tooltip": false
	},
	"layer": "top",
	"position": "bottom",
	"height": 20,
	"modules-center": [
		"hyprland/submap"
	],
	"name": "info",
	"mode": "overlay",
	//"start_hidden": true
}

Added the "hyprland/submap" module so you can add it for easier testing

The submap key bind:

$mode-system = (l) lock | (e) exit | (s) suspend | (r) reboot | (Shift+s) poweroff
bind = Control Shift, x, submap, $mode-system
submap = $mode-system
bind = , l, exec, $lock
bind = , l, submap, reset
bind = , e, exit
bind = , s, exec, $lock & systemctl suspend
bind = , s, submap, reset
bind = , r, exec, systemctl reboot
bind = Shift, s, exec, systemctl poweroff

Added the $mode-system variable/keyword so you can add it for easier testing

Is there any way to get this working?

Want:

• When the submap keybind is pressed a bar will appear with the submaps name on it.
• When exiting the submap the bar will disappear.

[alttabber]

You can make the bar transparent and the widget have background in your style.css, something like this:

window#waybar {
   background-color: rgba(0,0,0,0);
}
submap {
  background-color: @theme_bg_color;
}

[alttabber]

When you're not inside a submap, the submap widget doesn't draw at all, including the background, so, all you have is a completely transparent window, but when you are in a submap the submap widget will draw, together with its background.

[Kagukara]

Great, that's worked thank you.

Updated bar:

{
	//"include": ["~/.config/waybar/modules"],
	"hyprland/submap": {
		"format": "{}",
		"tooltip": false
	},
	"layer": "top",
	"position": "bottom",
	"height": 20,
	"modules-center": [
		"hyprland/submap"
	],
	"name": "info",
	"mode": "overlay",
	//"start_hidden": true
}

Updated style for bar:

#waybar.info {
  	background-color: rgba(10, 10, 10, 0.0);
	font-family: JetBrainsMonoNL Nerd Font Mono;
	font-size: 14px;
}

#submap {
  	background-color: rgba(10, 10, 10, 0.8);
  	color: rgba(152, 239, 106, 1);
}

The only problem now is that when I'm inside the submap the background colour doesn't span across the screen. Even if "width": 3840, is defined its still like this:

[alttabber]

Now it's just matter of fiddling with the widget's css. You can try adding `min-width: 100%' and stuff. Another way to make it wider is to use padding-left and padding-right.

Another trick, this one in the json, is to add padding spaces in the format. (ex. "format": " {} ")

[Kagukara]

Done it!

Had to make another bar because in the style config for #submap if I went more than padding: 0 677px; it would start to cut off the text on the 1080p screens. I needed it to go longer though as my main monitor is 2160p, and need padding: 0 1637px;.

The only solution was to make a new identical bar, add/change some settings, create style configs for both, and open the bars with the style path set. Many thanks to @alttabber for helping me.

Bar Configs

hyprland-mode-system_1080

{
	//"include": ["~/.config/waybar/modules"],
	"hyprland/submap": {
		"format": "{}",
		"tooltip": false,
	},
	"layer": "top",
	"output": "!Samsung Electric Company Odyssey G7 H1AK500000",
	"position": "bottom",
	"height": 20,
	"modules-center": [
		"hyprland/submap"
	],
	"name": "info_1080",
	"mode": "overlay",
}

hyprland-mode-system_2160

{
	//"include": ["~/.config/waybar/modules"],
	"hyprland/submap": {
		"format": "{}",
		"tooltip": false,
	},
	"layer": "top",
	"output": "Samsung Electric Company Odyssey G7 H1AK500000",
	"position": "bottom",
	"height": 20,
	"modules-center": [
		"hyprland/submap"
	],
	"name": "info_2160",
	"mode": "overlay",
}

Style Configs

style-hyprland-mode-system_1080.css

* {
	border: none;
	border-radius: 0;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 0;
}

#waybar.info_1080 {
	background: rgba(10, 10, 10, 0.0);
	font-family: JetBrainsMonoNL Nerd Font Mono;
	font-size: 14px;
}

#submap {
  	background: rgba(10, 10, 10, 0.8);
  	color: rgba(152, 239, 106, 1);
  	padding: 0 677px;
}

style-hyprland-mode-system_2160.css

* {
	border: none;
	border-radius: 0;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 0;
}

#waybar.info_2160 {
	background: rgba(10, 10, 10, 0.0);
	font-family: JetBrainsMonoNL Nerd Font Mono;
	font-size: 14px;
}

#submap {
  	background: rgba(10, 10, 10, 0.8);
  	color: rgba(152, 239, 106, 1);
  	padding: 0 1637px;
}

Start/Reload Waybar Script

Bound in hyprland.conf as a bind= and to exec-once= so the bars launch on startup.

#!/bin/bash

killall waybar

if [[ $USER = "richard" ]]
then
	waybar -c ~/.config/waybar/hyprland-main &
	waybar -c ~/.config/waybar/hyprland-mode-system_1080 -s ~/.config/waybar/style-hyprland-mode-system_1080.css &
	waybar -c ~/.config/waybar/hyprland-mode-system_2160 -s ~/.config/waybar/style-hyprland-mode-system_2160.css
fi