116 lines
5.5 KiB
Plaintext
116 lines
5.5 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>$$Title$$</title>
|
|
<link href="/css/output.css" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-background text-foreground antialiased">
|
|
|
|
<!-- Overlay for mobile sidebar -->
|
|
<div id="sidebar-overlay"
|
|
class="fixed inset-0 z-20 bg-black/50 opacity-0 pointer-events-none transition-opacity duration-300"
|
|
_="on click remove .open from #sidebar
|
|
then add .opacity-0 to me
|
|
then add .pointer-events-none to me"></div>
|
|
|
|
<div id="layout-container" class="flex min-h-dvh">
|
|
|
|
<!-- ── Sidebar ── -->
|
|
<aside id="sidebar"
|
|
class="fixed inset-y-0 left-0 z-30 flex w-64 -translate-x-full flex-col border-r border-border bg-card shadow-lg
|
|
transition-transform duration-300 ease-in-out
|
|
[&.open]:translate-x-0
|
|
md:relative md:translate-x-0 md:shadow-none">
|
|
|
|
<!-- Sidebar header -->
|
|
<div class="flex h-16 items-center gap-3 border-b border-border px-5">
|
|
<span class="flex h-8 w-8 items-center justify-center rounded-md bg-primary text-primary-foreground text-sm font-bold">A</span>
|
|
<span class="text-base font-semibold tracking-tight">$$AppName$$</span>
|
|
</div>
|
|
|
|
<!-- Nav items -->
|
|
<nav class="flex-1 overflow-y-auto px-3 py-4 space-y-1">
|
|
<a href="/"
|
|
hx-get="/" hx-target="#main-view" hx-push-url="true"
|
|
class="sidebar-link group flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium
|
|
text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground">
|
|
<svg class="h-4 w-4 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 9.75L12 3l9 6.75V21a.75.75 0 01-.75.75H15v-6H9v6H3.75A.75.75 0 013 21V9.75z"/>
|
|
</svg>
|
|
Home
|
|
</a>
|
|
<a href="/ui-demo"
|
|
hx-get="/ui-demo" hx-target="#main-view" hx-push-url="true"
|
|
class="sidebar-link group flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium
|
|
text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground">
|
|
<svg class="h-4 w-4 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7"/>
|
|
</svg>
|
|
UI Demo
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- Sidebar footer -->
|
|
<div class="border-t border-border px-5 py-3 text-xs text-muted-foreground">
|
|
© 2026 $$AppName$$
|
|
</div>
|
|
</aside>
|
|
<!-- ── /Sidebar ── -->
|
|
|
|
<!-- ── Main area ── -->
|
|
<div class="flex flex-1 flex-col overflow-hidden">
|
|
|
|
<!-- Top navbar -->
|
|
<header class="flex h-16 shrink-0 items-center gap-4 border-b border-border bg-card/80 px-4 backdrop-blur md:px-6">
|
|
|
|
<!-- Mobile hamburger -->
|
|
<button class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-input
|
|
bg-transparent text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground
|
|
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:hidden"
|
|
aria-label="Toggle sidebar"
|
|
_="on click toggle .open on #sidebar
|
|
then toggle .opacity-0 on #sidebar-overlay
|
|
then toggle .pointer-events-none on #sidebar-overlay">
|
|
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" 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>
|
|
|
|
<!-- Breadcrumb / title -->
|
|
<div class="flex-1 text-sm font-medium text-foreground">$$PageTitle$$</div>
|
|
|
|
<!-- Right-side actions -->
|
|
<div class="flex items-center gap-2">
|
|
<!-- Theme toggle -->
|
|
<button class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-input
|
|
bg-transparent transition-colors hover:bg-accent hover:text-accent-foreground
|
|
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
aria-label="Toggle theme"
|
|
_="on click toggle .dark on <html/>">
|
|
<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707M17.657 17.657l-.707-.707M6.343 6.343l-.707-.707M12 7a5 5 0 100 10A5 5 0 0012 7z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
$$UserSection$$
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Page content -->
|
|
<main id="main-view" class="flex-1 overflow-y-auto p-6">
|
|
$$Body$$
|
|
</main>
|
|
|
|
</div>
|
|
<!-- ── /Main area ── -->
|
|
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/hyperscript.org@0.9.91/dist/_hyperscript.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.10/dist/htmx.min.js"></script>
|
|
<script src="/js/components.js"></script>
|
|
</body>
|
|
</html> |