shaamilahmed
478d5f3c17
- 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.
93 lines
10 KiB
HTML
93 lines
10 KiB
HTML
<!-- Mobile Wiki Sidebar Trigger (Visible on small screens only) -->
|
|
<div class="lg:hidden w-full mb-6 bg-card/30 backdrop-blur border border-border p-4 rounded-3xl flex items-center justify-between shadow-sm">
|
|
<div class="flex flex-col gap-0.5">
|
|
<span class="text-xs font-bold text-slate-100 uppercase tracking-wider">Documentation</span>
|
|
<span class="text-[10px] text-muted-foreground">Select a guide to read</span>
|
|
</div>
|
|
<button data-sheet-target="wiki-sidebar-sheet" class="inline-flex items-center justify-center gap-1.5 px-4 py-2.5 rounded-xl text-xs font-bold bg-indigo-600 hover:bg-indigo-500 text-white shadow-md shadow-indigo-600/10 transition">
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7" />
|
|
</svg>
|
|
Explore Guides
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Desktop Navigation Sidebar (Hidden on mobile) -->
|
|
<aside class="hidden lg:block lg:w-64 shrink-0">
|
|
<div class="sticky top-24 space-y-1.5 p-4 rounded-3xl border border-border bg-card/50 backdrop-blur-xl" id="wiki-sidebar">
|
|
<span class="px-3 text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-2">Wiki Navigation</span>
|
|
<a href="/docs" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs">Introduction</a>
|
|
<div class="h-px bg-secondary my-1 mx-2"></div>
|
|
|
|
<span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Architecture</span>
|
|
<a href="/docs/logging" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/logging">Audit Logging</a>
|
|
|
|
<span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Actions</span>
|
|
<a href="/docs/buttons" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/buttons">Buttons</a>
|
|
|
|
<span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Forms & Inputs</span>
|
|
<a href="/docs/inputs" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/inputs">Form Fields & Select</a>
|
|
<a href="/docs/date-time" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/date-time">Date & Time Pickers</a>
|
|
<a href="/docs/combobox" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/combobox">Autocomplete (Combobox)</a>
|
|
<a href="/docs/toggles" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/toggles">Switches & Checkboxes</a>
|
|
|
|
<span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Overlays</span>
|
|
<a href="/docs/modals" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/modals">Dialog Modals</a>
|
|
<a href="/docs/sheets" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/sheets">Slide-over Drawers</a>
|
|
|
|
<span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Layout & Navigation</span>
|
|
<a href="/docs/tabs-accordion" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/tabs-accordion">Tabs & Accordions</a>
|
|
<a href="/docs/scrollbars" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/scrollbars">Custom Scrollbars</a>
|
|
|
|
<span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Visuals & Feedback</span>
|
|
<a href="/docs/visuals" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/visuals">Avatars & Badges</a>
|
|
<a href="/docs/feedback" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/feedback">Toasts & Alerts</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Mobile Navigation Sidebar (Sheet - sliding in from left) -->
|
|
<div id="wiki-sidebar-sheet" class="sheet-dialog fixed inset-0 z-50 hidden" role="dialog" aria-modal="true">
|
|
<!-- Backdrop -->
|
|
<div class="sheet-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm transition-opacity duration-300"></div>
|
|
<!-- Content Container -->
|
|
<div class="sheet-content fixed inset-y-0 left-0 z-10 w-full max-w-xs -translate-x-full transition-transform duration-300 border-r border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl flex flex-col overflow-y-auto">
|
|
<div class="flex items-center justify-between pb-4 border-b border-border mb-4">
|
|
<span class="text-sm font-bold text-slate-100 uppercase tracking-wider">Wiki Navigation</span>
|
|
<button class="sheet-close p-2 rounded-xl text-muted-foreground hover:text-white hover:bg-secondary transition">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<!-- Mobile Sidebar Links -->
|
|
<nav class="flex flex-col gap-1.5">
|
|
<a href="/docs" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs">Introduction</a>
|
|
<div class="h-px bg-secondary my-1"></div>
|
|
|
|
<span class="px-3 text-[9px] font-bold text-slate-650 uppercase tracking-wider block mt-2 mb-1">Architecture</span>
|
|
<a href="/docs/logging" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/logging">Audit Logging</a>
|
|
|
|
<span class="px-3 text-[9px] font-bold text-slate-650 uppercase tracking-wider block mt-2 mb-1">Actions</span>
|
|
<a href="/docs/buttons" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/buttons">Buttons</a>
|
|
|
|
<span class="px-3 text-[9px] font-bold text-slate-650 uppercase tracking-wider block mt-2 mb-1">Forms & Inputs</span>
|
|
<a href="/docs/inputs" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/inputs">Form Fields & Select</a>
|
|
<a href="/docs/date-time" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/date-time">Date & Time Pickers</a>
|
|
<a href="/docs/combobox" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/combobox">Autocomplete (Combobox)</a>
|
|
<a href="/docs/toggles" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/toggles">Switches & Checkboxes</a>
|
|
|
|
<span class="px-3 text-[9px] font-bold text-slate-650 uppercase tracking-wider block mt-2 mb-1">Overlays</span>
|
|
<a href="/docs/modals" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/modals">Dialog Modals</a>
|
|
<a href="/docs/sheets" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/sheets">Slide-over Drawers</a>
|
|
|
|
<span class="px-3 text-[9px] font-bold text-slate-650 uppercase tracking-wider block mt-2 mb-1">Layout & Navigation</span>
|
|
<a href="/docs/tabs-accordion" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/tabs-accordion">Tabs & Accordions</a>
|
|
<a href="/docs/scrollbars" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/scrollbars">Custom Scrollbars</a>
|
|
|
|
<span class="px-3 text-[9px] font-bold text-slate-650 uppercase tracking-wider block mt-2 mb-1">Visuals & Feedback</span>
|
|
<a href="/docs/visuals" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/visuals">Avatars & Badges</a>
|
|
<a href="/docs/feedback" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/feedback">Toasts & Alerts</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|