john-okeefe
12ea39986d
Add navigation menu in header to make Phase 9 features discoverable: - Library: Main bookshelf view - Collections: Collection management interface - Progress: Reading progress visualization across devices - Devices: Device management and configuration Navigation is hidden on mobile (responsive design) and visible on larger screens (md breakpoint and above). This improves UX by providing clear access to all major features.
135 lines
11 KiB
Templ
135 lines
11 KiB
Templ
package templates
|
|
|
|
templ Header(user User, currentPath string) {
|
|
<nav class="border-b header-nav" 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">
|
|
<!-- Left: App Title & Navigation -->
|
|
<div class="flex items-center space-x-6">
|
|
<a href="/bookshelf" class="text-xl font-bold hover:opacity-80 transition-opacity" style="color: var(--text-primary); text-decoration: none;">
|
|
📚 Bookmann
|
|
</a>
|
|
<div class="hidden md:flex items-center space-x-4">
|
|
<a href="/bookshelf" class="text-sm hover:opacity-80 transition-opacity" style="color: var(--text-secondary); text-decoration: none;">
|
|
Library
|
|
</a>
|
|
<a href="/collections" class="text-sm hover:opacity-80 transition-opacity" style="color: var(--text-secondary); text-decoration: none;">
|
|
Collections
|
|
</a>
|
|
<a href="/progress" class="text-sm hover:opacity-80 transition-opacity" style="color: var(--text-secondary); text-decoration: none;">
|
|
Progress
|
|
</a>
|
|
<a href="/devices" class="text-sm hover:opacity-80 transition-opacity" style="color: var(--text-secondary); text-decoration: none;">
|
|
Devices
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center: Search Box -->
|
|
<div class="flex-1 max-w-2xl mx-8">
|
|
<div class="relative">
|
|
<input type="text"
|
|
id="header-search"
|
|
placeholder="Search your library..."
|
|
class="w-full px-4 py-2 pl-10 border rounded-lg"
|
|
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
|
autocomplete="off"
|
|
>
|
|
<svg class="absolute left-3 top-2.5 h-5 w-5" style="color: var(--text-secondary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Theme Switcher & User Menu -->
|
|
<div class="flex items-center space-x-4">
|
|
<!-- Theme Switcher -->
|
|
<div class="relative">
|
|
<button onclick="toggleThemeDropdown()" class="p-2 rounded-lg hover:bg-gray-700 transition-colors" style="background-color: var(--bg-primary);">
|
|
<svg class="h-6 w-6" style="color: var(--text-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
|
|
</svg>
|
|
</button>
|
|
<div id="theme-dropdown" class="hidden absolute right-0 mt-2 w-64 rounded-lg shadow-lg z-50" style="background-color: var(--bg-secondary); border: 1px solid var(--border);">
|
|
<div class="p-4">
|
|
<h3 class="text-sm font-semibold mb-3" style="color: var(--text-primary)">Select Theme</h3>
|
|
<div class="space-y-2">
|
|
<button onclick="changeThemeTo('tokyo-night')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
|
|
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #7aa2f7;"></span>
|
|
Tokyo Night
|
|
</button>
|
|
<button onclick="changeThemeTo('dracula')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
|
|
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #bd93f9;"></span>
|
|
Dracula
|
|
</button>
|
|
<button onclick="changeThemeTo('nord')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
|
|
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #88c0d0;"></span>
|
|
Nord
|
|
</button>
|
|
<button onclick="changeThemeTo('solarized-dark')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
|
|
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #2aa198;"></span>
|
|
Solarized Dark
|
|
</button>
|
|
<button onclick="changeThemeTo('monokai')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
|
|
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #a6e22e;"></span>
|
|
Monokai
|
|
</button>
|
|
<button onclick="changeThemeTo('one-dark-pro')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
|
|
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #61dafb;"></span>
|
|
One Dark Pro
|
|
</button>
|
|
<button onclick="changeThemeTo('material-dark')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
|
|
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #80cbc4;"></span>
|
|
Material Dark
|
|
</button>
|
|
<div class="border-t pt-2 mt-2" style="border-color: var(--border);">
|
|
<p class="text-xs mb-2" style="color: var(--text-secondary)">Background Options</p>
|
|
<button onclick="changeThemeTo('wood-light')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
|
|
<span class="inline-block w-4 h-4 rounded mr-2" style="background: linear-gradient(135deg, #deb887 0%, #d2a679 100%);"></span>
|
|
Wood Light
|
|
</button>
|
|
<button onclick="changeThemeTo('wood-dark')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
|
|
<span class="inline-block w-4 h-4 rounded mr-2" style="background: linear-gradient(135deg, #8b7355 0%, #6b5344 100%);"></span>
|
|
Wood Dark
|
|
</button>
|
|
<button onclick="changeThemeTo('wood-mahogany')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
|
|
<span class="inline-block w-4 h-4 rounded mr-2" style="background: linear-gradient(135deg, #a0522d 0%, #8b4513 100%);"></span>
|
|
Wood Mahogany
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Icon with Dropdown -->
|
|
<div class="relative">
|
|
<button onclick="toggleUserMenu()" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700 transition-colors" style="background-color: var(--bg-primary);">
|
|
<svg class="h-6 w-6" style="color: var(--text-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
|
</svg>
|
|
<span class="text-sm hidden sm:block" style="color: var(--text-primary)">{ user.Username }</span>
|
|
</button>
|
|
<div id="user-menu" class="hidden absolute right-0 mt-2 w-48 rounded-lg shadow-lg z-50" style="background-color: var(--bg-secondary); border: 1px solid var(--border);">
|
|
<div class="py-1">
|
|
<a href="/settings" class="block px-4 py-2 text-sm hover:opacity-80" style="color: var(--text-primary); background-color: var(--bg-secondary); text-decoration: none;">
|
|
Settings
|
|
</a>
|
|
if user.Role == "admin" {
|
|
<a href="/admin" class="block px-4 py-2 text-sm hover:opacity-80" style="color: var(--text-primary); background-color: var(--bg-secondary); text-decoration: none;">
|
|
Admin Panel
|
|
</a>
|
|
}
|
|
<div class="border-t my-1" style="border-color: var(--border);"></div>
|
|
<button onclick="logout()" class="block w-full text-left px-4 py-2 text-sm hover:opacity-80" style="color: var(--text-primary); background-color: var(--bg-secondary);">
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
}
|