193 lines
11 KiB
HTML
193 lines
11 KiB
HTML
<header class="bg-slate-800 text-white sticky top-0 z-40">
|
|
<nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" aria-label="Main navigation">
|
|
<div class="flex items-center justify-between h-16">
|
|
<!-- Logo -->
|
|
<div class="flex-shrink-0">
|
|
<a href="{{ url_for('web.index') }}" class="text-xl font-bold hover:text-indigo-400 transition-colors">
|
|
CmdForge
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Desktop navigation -->
|
|
<div class="hidden md:flex items-center space-x-1">
|
|
<a href="{{ url_for('web.docs') }}"
|
|
class="px-3 py-2 rounded-md text-sm font-medium hover:bg-slate-700 transition-colors {% if request.path.startswith('/docs') %}bg-slate-700{% endif %}">
|
|
Docs
|
|
</a>
|
|
<a href="{{ url_for('web.tutorials') }}"
|
|
class="px-3 py-2 rounded-md text-sm font-medium hover:bg-slate-700 transition-colors {% if request.path.startswith('/tutorials') %}bg-slate-700{% endif %}">
|
|
Tutorials
|
|
</a>
|
|
<a href="{{ url_for('web.tools_browse') }}"
|
|
class="px-3 py-2 rounded-md text-sm font-medium hover:bg-slate-700 transition-colors {% if request.path.startswith('/tools') %}bg-slate-700{% endif %}">
|
|
Registry
|
|
</a>
|
|
<a href="{{ url_for('forum.index') }}"
|
|
class="px-3 py-2 rounded-md text-sm font-medium hover:bg-slate-700 transition-colors {% if request.path.startswith('/forum') %}bg-slate-700{% endif %}">
|
|
Forum
|
|
</a>
|
|
<a href="{{ url_for('web.community') }}"
|
|
class="px-3 py-2 rounded-md text-sm font-medium hover:bg-slate-700 transition-colors {% if request.path.startswith('/community') %}bg-slate-700{% endif %}">
|
|
Community
|
|
</a>
|
|
<a href="{{ url_for('web.about') }}"
|
|
class="px-3 py-2 rounded-md text-sm font-medium hover:bg-slate-700 transition-colors {% if request.path == '/about' %}bg-slate-700{% endif %}">
|
|
About
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Right side: Search + Auth -->
|
|
<div class="hidden md:flex items-center space-x-4">
|
|
<!-- Search button -->
|
|
<button type="button"
|
|
onclick="openSearch()"
|
|
class="p-2 rounded-md hover:bg-slate-700 transition-colors"
|
|
aria-label="Search">
|
|
<svg class="w-5 h-5" 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>
|
|
</button>
|
|
|
|
<!-- Donate button -->
|
|
<a href="{{ url_for('web.donate') }}"
|
|
class="px-3 py-2 rounded-md text-sm font-medium bg-indigo-600 hover:bg-indigo-700 transition-colors">
|
|
Donate
|
|
</a>
|
|
|
|
<!-- Auth links -->
|
|
{% if session.get('user') %}
|
|
<div class="relative" x-data="{ open: false }">
|
|
<button @click="open = !open"
|
|
class="flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-slate-700 transition-colors">
|
|
<span class="text-sm font-medium">{{ session.user.display_name }}</span>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
</svg>
|
|
</button>
|
|
<div x-show="open"
|
|
@click.away="open = false"
|
|
class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
|
|
<a href="{{ url_for('web.dashboard') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Dashboard</a>
|
|
<a href="{{ url_for('web.dashboard_settings') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
|
|
<hr class="my-1">
|
|
<form action="{{ url_for('web.logout') }}" method="POST">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<button type="submit" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
|
Sign out
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<a href="{{ url_for('web.login') }}"
|
|
class="px-3 py-2 rounded-md text-sm font-medium hover:bg-slate-700 transition-colors">
|
|
Sign in
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Mobile menu button -->
|
|
<div class="md:hidden">
|
|
<button type="button"
|
|
onclick="toggleMobileMenu()"
|
|
class="p-2 rounded-md hover:bg-slate-700 transition-colors"
|
|
aria-expanded="false"
|
|
aria-controls="mobile-menu"
|
|
aria-label="Toggle menu">
|
|
<svg id="menu-icon-open" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
|
</svg>
|
|
<svg id="menu-icon-close" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile menu -->
|
|
<div id="mobile-menu" class="hidden md:hidden pb-4">
|
|
<div class="space-y-1">
|
|
<a href="{{ url_for('web.docs') }}"
|
|
class="block px-3 py-2 rounded-md text-base font-medium hover:bg-slate-700 {% if request.path.startswith('/docs') %}bg-slate-700{% endif %}">
|
|
Docs
|
|
</a>
|
|
<a href="{{ url_for('web.tutorials') }}"
|
|
class="block px-3 py-2 rounded-md text-base font-medium hover:bg-slate-700 {% if request.path.startswith('/tutorials') %}bg-slate-700{% endif %}">
|
|
Tutorials
|
|
</a>
|
|
<a href="{{ url_for('web.tools_browse') }}"
|
|
class="block px-3 py-2 rounded-md text-base font-medium hover:bg-slate-700 {% if request.path.startswith('/tools') %}bg-slate-700{% endif %}">
|
|
Registry
|
|
</a>
|
|
<a href="{{ url_for('forum.index') }}"
|
|
class="block px-3 py-2 rounded-md text-base font-medium hover:bg-slate-700 {% if request.path.startswith('/forum') %}bg-slate-700{% endif %}">
|
|
Forum
|
|
</a>
|
|
<a href="{{ url_for('web.community') }}"
|
|
class="block px-3 py-2 rounded-md text-base font-medium hover:bg-slate-700 {% if request.path.startswith('/community') %}bg-slate-700{% endif %}">
|
|
Community
|
|
</a>
|
|
<a href="{{ url_for('web.about') }}"
|
|
class="block px-3 py-2 rounded-md text-base font-medium hover:bg-slate-700 {% if request.path == '/about' %}bg-slate-700{% endif %}">
|
|
About
|
|
</a>
|
|
<hr class="border-slate-600 my-2">
|
|
<a href="{{ url_for('web.donate') }}"
|
|
class="block px-3 py-2 rounded-md text-base font-medium bg-indigo-600 hover:bg-indigo-700 mx-3">
|
|
Donate
|
|
</a>
|
|
{% if session.get('user') %}
|
|
<a href="{{ url_for('web.dashboard') }}"
|
|
class="block px-3 py-2 rounded-md text-base font-medium hover:bg-slate-700">
|
|
Dashboard
|
|
</a>
|
|
<form action="{{ url_for('web.logout') }}" method="POST" class="px-3 py-2">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<button type="submit" class="text-base font-medium hover:text-indigo-400">
|
|
Sign out
|
|
</button>
|
|
</form>
|
|
{% else %}
|
|
<a href="{{ url_for('web.login') }}"
|
|
class="block px-3 py-2 rounded-md text-base font-medium hover:bg-slate-700">
|
|
Sign in
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Search modal (hidden by default) -->
|
|
<div id="search-modal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-modal="true">
|
|
<div class="min-h-screen px-4 text-center">
|
|
<!-- Backdrop -->
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" onclick="closeSearch()"></div>
|
|
|
|
<!-- Modal content -->
|
|
<div class="inline-block w-full max-w-2xl my-8 text-left align-middle transition-all transform bg-white shadow-xl rounded-lg">
|
|
<div class="p-4">
|
|
<div class="relative">
|
|
<svg class="absolute left-3 top-3 w-5 h-5 text-gray-400" 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>
|
|
<input type="text"
|
|
id="search-input"
|
|
placeholder="Search tools, docs, tutorials..."
|
|
aria-label="Search tools, documentation, and tutorials"
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
|
autocomplete="off">
|
|
</div>
|
|
<div id="search-results" class="mt-4 max-h-96 overflow-y-auto">
|
|
<!-- Search results will be inserted here -->
|
|
<p class="text-sm text-gray-500 text-center py-8">Start typing to search...</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 px-4 py-3 rounded-b-lg flex justify-between items-center text-sm text-gray-500">
|
|
<span>Press <kbd class="px-2 py-1 bg-gray-200 rounded">ESC</kbd> to close</span>
|
|
<button onclick="closeSearch()" class="text-gray-500 hover:text-gray-700">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|