From bf17c1b4f1621e27e063ab1f486673cedace0520 Mon Sep 17 00:00:00 2001
From: burakibaoglu0 <b.ibaoglu@gmail.com>
Date: Tue, 28 Jul 2026 00:40:41 +0300
Subject: [PATCH] fix(theme): open primary navigation on mobile when no docs
 sidebar exists

The header's mobile drawer toggle only ever controlled #docs-sidebar,
which exists solely on the docs page template. On the homepage, posts,
archives, search, and 404 pages there is no sidebar to open, so tapping
the visible hamburger button did nothing and left the primary
navigation (Docs, Why DocsPress?, Kitchen Sink, GitHub) unreachable on
mobile.

The toggle now falls back to opening the primary navigation as a
slide-in drawer (reusing the docs sidebar's existing mobile treatment)
on pages without a docs sidebar, and the shared drawer-scrim close
button moved from the docs-sidebar block to the always-present menu
toggle so it works on every template. aria-controls is now set
dynamically to whichever element the button actually opens.
---
 theme/assets/js/docs.js |  5 +++++
 theme/inc/blocks.php    |  6 +++---
 theme/style.css         | 48 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/theme/assets/js/docs.js b/theme/assets/js/docs.js
index d7f31ad..305f3ee 100644
--- a/theme/assets/js/docs.js
+++ b/theme/assets/js/docs.js
@@ -6,6 +6,7 @@
 	const drawerToggle = document.querySelector('[data-drawer-toggle]');
 	const drawerClose = document.querySelector('[data-drawer-close]');
 	const sidebar = document.querySelector('#docs-sidebar, .docs-sidebar');
+	const primaryNavigation = document.querySelector('.primary-navigation');
 	const sidebarCollapseToggle = sidebar ? sidebar.querySelector('[data-sidebar-collapse-toggle]') : null;
 	const sidebarContent = sidebar ? sidebar.querySelector('[data-sidebar-content]') : null;
 	const docsShell = sidebar ? sidebar.closest('.docs-shell') : null;
@@ -220,6 +221,10 @@
 	}
 
 	if (drawerToggle) {
+		if (!sidebar && primaryNavigation) {
+			if (!primaryNavigation.id) primaryNavigation.id = 'primary-navigation';
+			drawerToggle.setAttribute('aria-controls', primaryNavigation.id);
+		}
 		drawerToggle.addEventListener('click', function () {
 			setDrawer(!body.classList.contains('drawer-open'));
 		});
diff --git a/theme/inc/blocks.php b/theme/inc/blocks.php
index 5dd8a13..771f6f4 100644
--- a/theme/inc/blocks.php
+++ b/theme/inc/blocks.php
@@ -229,7 +229,6 @@ class="sidebar-collapse-toggle"
 			<?php if ( $show_filter ) : ?><p class="sidebar-no-results" data-no-results><?php esc_html_e( 'No pages match that filter.', 'docspress' ); ?></p><?php endif; ?>
 		</div>
 	</aside>
-	<button class="drawer-scrim" type="button" data-drawer-close aria-label="<?php esc_attr_e( 'Close documentation menu', 'docspress' ); ?>"></button>
 	<?php
 	return ob_get_clean();
 }
@@ -623,10 +622,11 @@ function docspress_render_menu_toggle( $attributes ) {
 	$label = sanitize_text_field( docspress_component_attribute( $attributes, 'label', __( 'Open documentation menu', 'docspress' ) ) );
 	$wrapper = get_block_wrapper_attributes( array( 'class' => 'docspress-menu-toggle' ) );
 	return sprintf(
-		'<div %1$s><button class="menu-toggle" type="button" data-drawer-toggle aria-expanded="false" aria-controls="docs-sidebar" aria-label="%2$s">%3$s</button></div>',
+		'<div %1$s><button class="menu-toggle" type="button" data-drawer-toggle aria-expanded="false" aria-controls="docs-sidebar" aria-label="%2$s">%3$s</button></div><button class="drawer-scrim" type="button" data-drawer-close aria-label="%4$s"></button>',
 		$wrapper,
 		esc_attr( $label ),
-		docspress_icon( 'menu' )
+		docspress_icon( 'menu' ),
+		esc_attr__( 'Close documentation menu', 'docspress' )
 	);
 }
 
diff --git a/theme/style.css b/theme/style.css
index 32b6067..f2128ce 100644
--- a/theme/style.css
+++ b/theme/style.css
@@ -2973,6 +2973,54 @@ body.command-search-open {
 	.docspress-menu-toggle {
 		display: block;
 	}
+
+	/*
+	 * Pages without a docs sidebar (home, posts, archives, search, 404) have
+	 * nothing for the header drawer trigger to open. Let it reveal the
+	 * primary navigation instead, using the same slide-in drawer treatment
+	 * as the docs sidebar below.
+	 */
+	body:not(:has(.docs-sidebar)) .header-inner > .primary-navigation {
+		display: flex;
+		position: fixed;
+		top: var(--dp-header-height);
+		left: 0;
+		z-index: 90;
+		flex-direction: column;
+		align-items: stretch;
+		width: min(86vw, 320px);
+		height: calc(100vh - var(--dp-header-height));
+		margin-left: 0;
+		padding: 16px 12px;
+		overflow-y: auto;
+		background: var(--dp-canvas);
+		box-shadow: var(--dp-shadow);
+		transform: translateX(-105%);
+		transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+	}
+
+	body.admin-bar:not(:has(.docs-sidebar)) .header-inner > .primary-navigation {
+		top: calc(var(--dp-header-height) + 46px);
+		height: calc(100vh - var(--dp-header-height) - 46px);
+	}
+
+	body.drawer-open:not(:has(.docs-sidebar)) .header-inner > .primary-navigation {
+		transform: translateX(0);
+	}
+
+	body:not(:has(.docs-sidebar)) .primary-navigation ul {
+		flex-direction: column;
+		align-items: stretch;
+		width: 100%;
+	}
+
+	body:not(:has(.docs-sidebar)) .primary-navigation a {
+		width: 100%;
+	}
+
+	body.drawer-open:not(:has(.docs-sidebar)) .drawer-scrim {
+		display: block;
+	}
 }
 
 @media (max-width: 860px) {