From 2f32588222c4829ca3fad8009d9093949f48360d Mon Sep 17 00:00:00 2001
From: Marc Anton Dahmen <mail@marcdahmen.de>
Date: Sun, 15 Sep 2024 19:28:10 +0200
Subject: [PATCH] fix(ui): fix visibility of navbar items on medium size
 screens

---
 .../Pages/Templates/DashboardLayoutTemplate.ts     | 10 +++++-----
 automad/src/client/admin/core/css.ts               |  2 ++
 automad/src/client/admin/styles/utils/display.less | 14 +++++++++++++-
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/automad/src/client/admin/components/Pages/Templates/DashboardLayoutTemplate.ts b/automad/src/client/admin/components/Pages/Templates/DashboardLayoutTemplate.ts
index 578eb625..9ef7570b 100644
--- a/automad/src/client/admin/components/Pages/Templates/DashboardLayoutTemplate.ts
+++ b/automad/src/client/admin/components/Pages/Templates/DashboardLayoutTemplate.ts
@@ -77,12 +77,12 @@ export const dashboardLayout = ({ main }: Partials) => {
 				<div class="${CSS.navbar}">
 					<am-link
 						${Attr.target}="${Route.home}"
-						class="${CSS.displaySmall} ${CSS.navbarItem}"
+						class="${CSS.displayMedium} ${CSS.navbarItem}"
 					>
 						<am-logo></am-logo>
 					</am-link>
 					<am-modal-toggle
-						class="${CSS.navbarItem} ${CSS.displaySmallNone}"
+						class="${CSS.navbarItem} ${CSS.displayMediumNone}"
 						${Attr.modal}="#am-jumpbar-modal"
 					>
 						<span> ${App.text('jumpbarButtonText')} </span>
@@ -105,18 +105,18 @@ export const dashboardLayout = ({ main }: Partials) => {
 						></am-undo-buttons>
 						<am-publish-form></am-publish-form>
 						<am-modal-toggle
-							class="${CSS.navbarItem} ${CSS.displaySmall}"
+							class="${CSS.navbarItem} ${CSS.displayMedium}"
 							${Attr.modal}="#am-jumpbar-modal"
 						>
 							<i class="bi bi-menu-button-wide"></i>
 						</am-modal-toggle>
 						<am-sidebar-toggle
-							class="${CSS.navbarItem} ${CSS.displaySmall}"
+							class="${CSS.navbarItem} ${CSS.displayMedium}"
 						>
 							<i class="bi bi-list"></i>
 						</am-sidebar-toggle>
 						<am-dropdown
-							class="${CSS.displaySmallNone}"
+							class="${CSS.displayMediumNone}"
 							${Attr.right}
 						>
 							<span class="${CSS.navbarItem}">
diff --git a/automad/src/client/admin/core/css.ts b/automad/src/client/admin/core/css.ts
index 2e597c19..4beb29f2 100644
--- a/automad/src/client/admin/core/css.ts
+++ b/automad/src/client/admin/core/css.ts
@@ -96,6 +96,8 @@ export const enum CSS {
 	displayNone = 'am-u-display-none',
 	displaySmall = 'am-u-display-small',
 	displaySmallNone = 'am-u-display-small-none',
+	displayMedium = 'am-u-display-medium',
+	displayMediumNone = 'am-u-display-medium-none',
 
 	dropdown = 'am-c-dropdown',
 	dropdownOpen = 'am-c-dropdown--open',
diff --git a/automad/src/client/admin/styles/utils/display.less b/automad/src/client/admin/styles/utils/display.less
index 40142467..73e8a84d 100644
--- a/automad/src/client/admin/styles/utils/display.less
+++ b/automad/src/client/admin/styles/utils/display.less
@@ -38,12 +38,24 @@
 	}
 
 	&-small {
-		@media (min-width: @am-breakpoint-medium) {
+		@media (min-width: @am-breakpoint-small) {
 			display: none !important;
 		}
 	}
 
 	&-small-none {
+		@media (max-width: @am-breakpoint-small-max) {
+			display: none !important;
+		}
+	}
+
+	&-medium {
+		@media (min-width: @am-breakpoint-medium) {
+			display: none !important;
+		}
+	}
+
+	&-medium-none {
 		@media (max-width: @am-breakpoint-medium-max) {
 			display: none !important;
 		}