fix(ui): fix visibility of navbar items on medium size screens

marcantondahmen · Sep 15, 2024 · 2f32588 · 2f32588
1 parent 7fbb813
commit 2f32588
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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;
 		}