feat: integrate header component into dashboard page

- Replace navigation bar with Header() component
- Remove duplicate logout function (now in header.js)
- Maintain consistent header across pages
- Update generated template files

This provides consistent navigation and theme switching
functionality across all pages using the reusable header component.
This commit is contained in:
2026-01-29 15:56:18 -05:00
parent 703daeb32f
commit c3dcbad177
2 changed files with 3 additions and 40 deletions
+2 -26
View File
@@ -9,6 +9,7 @@ templ Dashboard(user User) {
<title>Dashboard - Bookmann</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/toast.js"></script>
<script src="/static/header.js"></script>
<link href="/static/style.css" rel="stylesheet">
<style>
:root {
@@ -72,26 +73,7 @@ templ Dashboard(user User) {
</style>
</head>
<body class="theme-tokyo-night">
<!-- Navigation Header -->
<nav class="border-b" style="border-color: var(--border); background-color: var(--bg-secondary)">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center">
<h1 class="text-xl font-bold" style="color: var(--text-primary)">📚 Bookmann</h1>
</div>
<div class="flex items-center space-x-4">
<a href="/" class="px-3 py-2 text-sm hover:opacity-80" style="color: var(--text-secondary)">Dashboard</a>
if user.Role == "admin" {
<a href="/admin" class="px-3 py-2 text-sm hover:opacity-80" style="color: var(--text-secondary)">Admin</a>
}
<span style="color: var(--text-secondary)">Welcome, { user.Username }!</span>
<button onclick="logout()" class="btn-primary px-4 py-2 rounded text-sm">
Logout
</button>
</div>
</div>
</div>
</nav>
Header(user, "/dashboard")
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Header Section -->
@@ -404,12 +386,6 @@ templ Dashboard(user User) {
alert('Media viewer coming soon!');
}
function logout() {
localStorage.removeItem('token');
localStorage.removeItem('user');
window.location.href = '/';
}
// Load libraries on page load
document.addEventListener('DOMContentLoaded', function() {
loadTheme();