My minimalist drop down bar

[berregon]

I was using a vertical bar since a long time with sway then with niri but I was trying to find a way to have a simple bar that hide for a minimalist look. It's still a work in progress but I like it so far.

[JakeStanger]

Very clean, thanks for sharing

[n3ptune-plan3t]

can you share the dotfiles, thank you

[berregon]

I've been using it for a while but it's still a work in progress and it's the last git version of ironbar with GTK4 so there's still some little issues, mostly with the autohide. I'm sure there's better way to achieve this and to match the hint_bar size to the main_bar than manually setting it up the in the style.css.

I can't attach the config.corn in a message so here it is:

config.corn

let {
	
	$app_menu = {
		type = "menu"
		name = "app_menu"
		label = "󰍜"
		start = [
			{
				type = "custom"
				label = "Alacritty"
				icon = "Alacritty"
				on_click = "alacritty | ironbar bar main_bar hide"
			}
			{
				type = "custom"
				label = "Discord"
				icon = "discord"
				on_click = "discord"
			}
			{
				type = "custom"
				label = "Firefox"
				icon = "firefox"
				on_click = "firefox | ironbar bar main_bar hide"
			}
			{
				type = "custom"
				label = "Geany"
				icon = "geany"
				on_click = "geany | ironbar bar main_bar hide"
			}
			{
				type = "custom"
				label = "KeepassXC"
				icon = "keepassxc"
				on_click = "keepassxc | ironbar bar main_bar hide"
			}
			{
				type = "custom"
				label = "LibreOffice"
				icon = "libreoffice"
				on_click = "libreoffice | ironbar bar main_bar hide"
			}
			{
				type = "custom"
				label = "Prism Launcher"
				icon = "org.prismlauncher.PrismLauncher"
				on_click = "prismlauncher | ironbar bar main_bar hide"
			}
			{
				type = "custom"
				label = "Steam"
				icon = "steam"
				on_click = "steam | ironbar bar main_bar hide"
			}
			{
				type = "custom"
				label = "Thunar"
				icon = "thunar"
				on_click = "thunar | ironbar bar main_bar hide"
			}
			{
				type = "custom"
				label = "Vivaldi" 
				icon = "vivaldi"
				on_click = "vivaldi | ironbar bar main_bar hide"
			}
		]
		center = []
		end = []
	}
	
	$clock = {
		type = "clock"
		format = "%H:%M"
		format_popup = ""
	}
	
	$hint_label = {
		type = "label"
		name = "hint_label"
		label = ""
		on_mouse_enter = "ironbar bar main_bar show"
	}
	
	$niri_language = {
		type = "label" 
		name = "niri_language"
		label = "{{300:~/.config/scripts/get-keyboardlayout}}"
		on_click_left = "niri msg action switch-layout next"
	}
	
	$power_menu = {
        type = "custom"
        name = "power_menu"
        class = "power_menu"

        bar = [ { type = "button" name="power_btn" label = "󰤆" on_click = "popup:toggle" } ]

        popup = [ {
            type = "box"
            name = "power_popup"
            orientation = "vertical"
            widgets = [
                { type = "label" name = "header" label = "UP - {{uptime -p | sed -e 's/up //g'}}" }
                {
                    type = "box"
                    name = "buttons"
                    widgets = [
						{ type = "button" class="power_btn" label = "<span></span>" tooltip = "Lock screen" on_click = "!~/.config/scripts/lockscreen" }
						{ type = "button" class="power_btn" label = "<span>󰍃</span>" tooltip = "Log out" on_click = "!~/.config/scripts/logout" }
						{ type = "button" class="power_btn" label = "<span>󰜉</span>" tooltip = "Restart" on_click = "!reboot" }
                        { type = "button" class="power_btn" label = "<span>󰤆</span>" tooltip = "Shutdown" on_click = "!shutdown now" }
                    ]
                }
            ]
        } ]
    }
	
	$tray_button = {
		type = "button"
		name = "tray_button"
		label = ""
		on_click = "popup:toggle"
		}
		
	$tray_popup = {
		type = "tray"
		name = "tray_popup"
		direction = "v"
	}
	
	$tray_menu = {
		type = "custom"
		name = "tray_menu"
		bar = [ $tray_button ]
		popup = [ $tray_popup ]
	}
	
    $volume = {
      type = "volume"
      format = "{icon} {percentage}%"
      max_volume = 150
      icons.volume_high = "󰕾"
      icons.volume_medium = "󰕾"
      icons.volume_low = "󰕾"
      icons.muted = "󰖁"
      on_click_left = "pamixer --toggle-mute"
      on_click_middle = "pavucontrol"
      on_click_right = "alacritty -e pulsemixer"
      on_scroll_up = "pamixer --allow-boost --set-limit 150 -i 5"
      on_scroll_down = "pamixer --allow-boost --set-limit 150 -d 5"
    }	
	
	$workspaces = {
		type = "workspaces"
		hidden = ["5" "6" "7" "8" "9"]
		icon_size = 28
		name_map = {
			1 = "icon:firefox"
			2 = "icon:Terminal"
			3 = "icon:games"
			4 = "icon:discord"
		}
	}
	
	$left = [ $app_menu $workspaces ]
	$middle = [ $clock ]
	$right = [ $volume $niri_language $tray_menu $power_menu ]
}

in {
	icon_theme = "Zafiro-Nord-Black-Blue"
	
	monitors.DP-2 = [
		{
			name = "hint_bar"
			position = "top"
			anchor_to_edges = false
			exclusive_zone = false
			height = 1 // Real height is the font-size for the #hint_label in the style.css
			
			start = []
			center = [ $hint_label]
			end = []
		}
		{
			name = "main_bar"
			position = "top"
			anchor_to_edges = false
			height = 42
			autohide = 200
			popup_gap = 4
			
			start = $left
			center = $middle
			end = $right
		}
	]
}

style.css

@define-color color_bg #2e3440;
@define-color color_bg_dark #81a1c1;
@define-color color_border #bbbbbb;
@define-color color_border_active #bbbbbb;
@define-color color_text #D8DEE9;
@define-color color_urgent #8f0a0a;

/* -- base  and bars styles  -- */

* {
    font-family: Fira Code Medium;
    font-size: 18px;
    border: none;
    border-radius: 0;
}

#hint_bar {
    border-radius: 0px 0px 12px 12px;
    border-left: 3px solid @color_border;
    border-right: 3px solid @color_border;
    border-bottom: 3px solid @color_border;
}

#hint_label {
	/** -- Adjust min-weight to match the main bar width and the font-size for the height of the hint bar -- */
	min-width: 585px;
	font-size: 4px;
}

#main_bar {
    border-radius: 0px 0px 12px 12px;
    border-left: 3px solid @color_border;
    border-right: 3px solid @color_border;
    border-bottom: 3px solid @color_border;
}

box, menubar, button {
    background-color: @color_bg;
    background-image: none;
    box-shadow: none;
}

button, label {
    color: @color_text;
}

popover contents {
	background-color: @color_bg;
	font-size: 18px;
	border-radius: 12px;
    border: 3px solid @color_border;
}


/* -- Apps menu -- */

#app_menu label {
	font-size: 32px;
	margin-left: 12px;
	margin-right: 10px;
}

#app_menu .popup-menu .main-start button box label {
	font-size: 18px;
}

#app_menu .popup-menu .main-start button:hover {
	background-color: @color_text;
	border-radius: 12px;
}

#app_menu .popup-menu .main-start button:hover > box {
	background-color: @color_text;
}

#app_menu .popup-menu .main-start button:hover > box box {
	background-color: @color_text;
}

#app_menu .popup-menu .main-start button:hover > box label {
	color: #000000;
}


/* -- clock and calendar -- */

.clock {
	margin-left: 14px;
	margin-right: -7px;
}

.popup-menu label {
	font-size: 18px;
}

.popup-clock .calendar {
	background-color: @color_bg;
}

.popup-clock .calendar-clock {
	font-size: 0px;
}


/* -- Volume -- */

.volume {
	min-width: 70px;
}


/* -- Language -- */

#niri_language {
	min-width: 40px;
	margin-left: -8px;
}


/* -- Tray -- */

#tray_popup {
	min-width: 34px;
	min-height: 32px;
}

/* -- Power menu -- */

#power_menu label {
	font-size: 32px;
	margin-right: 5px;
}

#power_menu button box label {
	font-size: 18px;
}

#power_popup {
	padding-left: 5px;
	min-width: 280px;
}

#buttons {
	padding-left: 27px;
}

.power_btn label {
	padding-left: 5px;
}

.power_btn:hover {
	background-color: @color_text;
	border-radius: 12px;
}

.power_btn:hover > label {
	color: #000000;
}

tooltip {
	background-color: @color_bg;
	border-radius: 12px;
	padding: 5px;
	border: 1px solid @color_border;
}

tooltip label {
	font-size: 18px;
	padding-left: 5px;
}

[n3ptune-plan3t]

Thank you for sharing. 👍