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.
153 lines
9.6 KiB
HTML
153 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="h-full" style="color-scheme: dark;">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="color-scheme" content="dark">
|
|
<title>{% block title %}Stick Template{% endblock %}</title>
|
|
<!-- Compiled Tailwind CSS stylesheet -->
|
|
<link rel="stylesheet" href="/static/tailwind.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<!-- HTMX & Hyperscript CDN -->
|
|
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
|
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
|
|
<!-- Consolidated Combobox Script -->
|
|
<script src="/static/js/combobox.js" defer></script>
|
|
<!-- Consolidated Components Script -->
|
|
<script src="/static/js/components.js" defer></script>
|
|
<!-- Style adjustments -->
|
|
<style>
|
|
body {
|
|
font-family: 'Outfit', sans-serif;
|
|
background-color: hsl(var(--background));
|
|
background-image:
|
|
radial-gradient(at 50% 0%, hsla(240, 5%, 26%, 0.04) 0%, transparent 60%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex flex-col min-h-screen text-foreground selection:bg-sky-500 selection:text-white">
|
|
<!-- Toast notifications container -->
|
|
<div id="toast-container" class="fixed bottom-4 right-4 z-50 flex flex-col gap-2"></div>
|
|
|
|
<!-- Header / Navbar -->
|
|
<header class="border-b border-border bg-background/80 backdrop-blur-md sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16 items-center">
|
|
<!-- Logo -->
|
|
<div class="flex items-center space-x-3">
|
|
<a href="/" class="flex items-center space-x-2.5 group">
|
|
<div class="w-9 h-9 rounded-xl bg-indigo-600 flex items-center justify-center shadow-lg shadow-indigo-600/10 group-hover:scale-105 transition-all duration-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-5 h-5 text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-xl font-bold tracking-tight text-slate-100 group-hover:text-white transition duration-300">
|
|
stick
|
|
</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Navigation Links -->
|
|
<nav class="hidden md:flex items-center space-x-4">
|
|
<a href="/docs" class="text-sm font-medium text-muted-foreground hover:text-white transition py-2 px-3 rounded-lg hover:bg-secondary">
|
|
Documentation
|
|
</a>
|
|
{% if authenticated %}
|
|
<a href="/tasks" class="text-sm font-medium text-muted-foreground hover:text-white transition py-2 px-3 rounded-lg hover:bg-secondary">
|
|
Dashboard
|
|
</a>
|
|
<a href="/developers" class="text-sm font-medium text-muted-foreground hover:text-white transition py-2 px-3 rounded-lg hover:bg-secondary">
|
|
Developers
|
|
</a>
|
|
<div class="h-4 w-px bg-secondary"></div>
|
|
<a href="/auth/password" class="text-xs font-semibold px-2.5 py-1.5 rounded-xl bg-secondary border border-border text-sky-400 hover:text-sky-300 hover:bg-secondary hover:border-sky-500/20 transition" title="Change Password">
|
|
{{ username }}
|
|
</a>
|
|
<form action="/auth/logout" method="post" class="inline">
|
|
<button type="submit" class="text-sm font-medium text-rose-400 hover:text-rose-300 transition py-2 px-3 rounded-lg hover:bg-rose-950/20">
|
|
Logout
|
|
</button>
|
|
</form>
|
|
{% else %}
|
|
<a href="/auth/login" class="text-sm font-medium text-muted-foreground hover:text-white transition py-2 px-3 rounded-lg hover:bg-secondary">
|
|
Log In
|
|
</a>
|
|
{% endif %}
|
|
</nav>
|
|
|
|
<!-- Hamburger Menu Button (Mobile) -->
|
|
<div class="flex items-center md:hidden">
|
|
<button data-sheet-target="mobile-nav-sheet" class="inline-flex items-center justify-center p-2 rounded-xl text-muted-foreground hover:text-white hover:bg-secondary transition focus:outline-none" aria-label="Open main menu">
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="grow flex flex-col">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="border-t border-slate-950 bg-card/50 py-6 text-center text-xs text-slate-500">
|
|
<div class="max-w-7xl mx-auto px-4">
|
|
<p>© 2026 Stick Template. Built with Axum, Askama, and MongoDB. Styled with Tailwind CSS.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Mobile Navigation Drawer (Sheet) -->
|
|
<div id="mobile-nav-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 (sliding in from the right) -->
|
|
<div class="sheet-content fixed inset-y-0 right-0 z-10 w-full max-w-xs translate-x-full transition-transform duration-300 border-l border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl flex flex-col">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between pb-6 border-b border-border">
|
|
<span class="text-lg font-bold text-slate-100">Menu</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>
|
|
<!-- Navigation Links -->
|
|
<nav class="flex flex-col gap-2 mt-6 grow">
|
|
<a href="/docs" class="flex items-center px-4 py-3 text-sm font-semibold text-muted-foreground hover:text-white rounded-xl hover:bg-secondary transition sheet-close">
|
|
Documentation
|
|
</a>
|
|
{% if authenticated %}
|
|
<a href="/tasks" class="flex items-center px-4 py-3 text-sm font-semibold text-muted-foreground hover:text-white rounded-xl hover:bg-secondary transition sheet-close">
|
|
Dashboard
|
|
</a>
|
|
<a href="/developers" class="flex items-center px-4 py-3 text-sm font-semibold text-muted-foreground hover:text-white rounded-xl hover:bg-secondary transition sheet-close">
|
|
Developers
|
|
</a>
|
|
<div class="h-px bg-border my-2"></div>
|
|
<a href="/auth/password" class="flex items-center justify-between px-4 py-3 text-sm font-semibold text-sky-400 hover:text-sky-300 rounded-xl hover:bg-secondary/40 border border-sky-500/10 transition sheet-close">
|
|
<span>Logged in as: {{ username }}</span>
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</a>
|
|
<form action="/auth/logout" method="post" class="mt-auto">
|
|
<button type="submit" class="flex w-full items-center justify-center px-4 py-3 text-sm font-semibold text-rose-400 hover:text-rose-300 rounded-xl hover:bg-rose-950/20 transition sheet-close">
|
|
Logout
|
|
</button>
|
|
</form>
|
|
{% else %}
|
|
<a href="/auth/login" class="flex items-center px-4 py-3 text-sm font-semibold text-muted-foreground hover:text-white rounded-xl hover:bg-secondary transition sheet-close">
|
|
Log In
|
|
</a>
|
|
{% endif %}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|