fix: hide mobile menu when sidebar disabled

kobaltedev · Nov 15, 2024 · 37a1b18 · 37a1b18
1 parent 06f1eea
commit 37a1b18
Showing 1 changed file with 30 additions and 18 deletions.
diff --git a/src/default-theme/components/Header.tsx b/src/default-theme/components/Header.tsx
@@ -70,25 +70,37 @@ export default function Header() {
 						<ThemeSelector />
 					</div>
 				</div>
-				<div class={styles["mobile-bar"]}>
-					<button
-						type="button"
-						class={styles["mobile-menu"]}
-						onClick={() => setSidebarOpen((p) => !p)}
-						aria-label="Open navigation"
-					>
-						<MenuLeftIcon /> Menu
-					</button>
-					<Show when={pageData().layout.toc !== false}>
-						<Dialog.Trigger
-							type="button"
-							class={styles["mobile-menu"]}
-							aria-label="Open table of contents"
+				<Show
+					when={
+						pageData().layout?.sidebar !== false ||
+						pageData().layout?.toc !== false
+					}
+				>
+					<div class={styles["mobile-bar"]}>
+						<Show
+							when={pageData().layout?.sidebar !== false}
+							fallback={<div />}
 						>
-							On this page <ArrowDownIcon />
-						</Dialog.Trigger>
-					</Show>
-				</div>
+							<button
+								type="button"
+								class={styles["mobile-menu"]}
+								onClick={() => setSidebarOpen((p) => !p)}
+								aria-label="Open navigation"
+							>
+								<MenuLeftIcon /> Menu
+							</button>
+						</Show>
+						<Show when={pageData().layout?.toc !== false}>
+							<Dialog.Trigger
+								type="button"
+								class={styles["mobile-menu"]}
+								aria-label="Open table of contents"
+							>
+								On this page <ArrowDownIcon />
+							</Dialog.Trigger>
+						</Show>
+					</div>
+				</Show>
 
 				<div ref={setTocRef} class={styles["toc-container"]} />
 			</header>