shaamilahmed/Htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement responsive mobile navigation header and wiki sidebar drawer

Browse Source 
- Refactored templates/base.html to hide navigation on mobile and expose a hamburger menu button.
- Built a right-aligned sliding mobile menu drawer sheet in base.html.
- Hidden the documentation sidebar in templates/docs/sidebar.html by default on mobile, placing it inside a left-aligned sliding drawer sheet.
- Added a floating 'Explore Guides' directory trigger bar at the top of doc pages on mobile.
- Updated static/js/components.js to apply active route highlighting globally to both desktop and mobile sidebars.
This commit is contained in:
Enciphered
2026-05-30 19:00:02 +05:00
parent bb35206fff
commit 478d5f3c17
5 changed files with 161 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/docs/index.html
+14
View File
@@ -125,6 +125,20 @@
</li>
</ul>
</div>
<div>
<span class="font-bold text-indigo-400 block mb-1">📱 Mobile-First Responsive Layout</span>
<p class="text-slate-400 leading-normal">
The navigation elements use responsive design classes to ensure compatibility across screen sizes:
</p>
<ul class="list-disc pl-5 mt-1.5 space-y-1.5 text-slate-400 leading-normal">
<li>
<strong class="text-slate-200">Responsive App Navbar:</strong> The master header navigation switches from a horizontal desktop layout (<code>hidden md:flex</code>) to a mobile hamburger menu button (<code>flex md:hidden</code>). The button targets a sliding navigation drawer (<code>#mobile-nav-sheet</code>) that transitions in from the right.
</li>
<li>
<strong class="text-slate-200">Collapsible Wiki Directory:</strong> On documentation views, the large guides sidebar is hidden on mobile devices (<code>hidden lg:block</code>) and replaced with an inline trigger bar (<code>Explore Guides</code>). Clicking this trigger transitions the guides directory drawer (<code>#wiki-sidebar-sheet</code>) from the left.
</li>
</ul>
</div>
</div>
</div>