This commit is contained in:
+45
-29
@@ -1,4 +1,4 @@
|
||||
<header class="bg-zinc-800 shadow-md py-3 px-6 relative flex items-center justify-between lg:grid lg:grid-cols-[auto_minmax(18rem,1fr)_auto] lg:gap-6">
|
||||
<header class="bg-zinc-800 shadow-md py-3 px-6 flex items-center justify-between relative">
|
||||
<div class="flex items-center space-x-3 flex-shrink-0">
|
||||
<a href="/" class="flex items-center space-x-3">
|
||||
<img src="{{ LOGO_PNG }}" alt="Logo" class="h-8 rounded">
|
||||
@@ -6,19 +6,13 @@
|
||||
</a>
|
||||
<a href="https://git.jdbnet.co.uk/jamie/ipam/releases" target="_blank" rel="noopener noreferrer" class="text-sm font-normal text-gray-300 hover:text-gray-100 -ml-1 mt-3">{{ VERSION }}</a>
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:flex items-center min-w-0">
|
||||
<form action="/search" method="GET" class="flex items-center space-x-2 w-full max-w-2xl mx-auto">
|
||||
<input type="text" name="q" id="search-input" placeholder="Search..."
|
||||
class="bg-zinc-700 text-white placeholder-gray-400 px-4 py-2 rounded-md text-base focus:outline-none focus:ring-2 focus:ring-gray-500 w-full min-w-0"
|
||||
value="{{ request.args.get('q', '') }}">
|
||||
<button type="submit" class="text-gray-200 hover:text-gray-400 hover:cursor-pointer flex-shrink-0">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<nav class="hidden lg:flex items-center space-x-6 flex-shrink-0 whitespace-nowrap justify-self-end" id="main-nav">
|
||||
<nav class="hidden lg:flex items-center space-x-6 flex-shrink-0" id="main-nav">
|
||||
{% if current_user_name %}
|
||||
<button type="button" class="text-gray-200 hover:text-gray-400 font-medium flex items-center gap-2 hover:cursor-pointer" id="search-modal-open" aria-label="Open search modal">
|
||||
<i class="fas fa-search"></i>
|
||||
<span>Search</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
{% if has_permission('view_index') %}
|
||||
<a href="/" class="text-gray-200 hover:text-gray-400 font-medium flex items-center gap-2">
|
||||
<i class="fas fa-home"></i>
|
||||
@@ -60,22 +54,19 @@
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
<button class="lg:hidden flex items-center text-gray-200 hover:cursor-pointer focus:outline-none flex-shrink-0" id="nav-toggle" aria-label="Open navigation menu">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="lg:hidden flex items-center gap-3 flex-shrink-0">
|
||||
{% if current_user_name %}
|
||||
<button class="flex items-center text-gray-200 hover:cursor-pointer focus:outline-none" id="search-modal-open-mobile" aria-label="Open search modal">
|
||||
<i class="fas fa-search text-xl"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
<button class="flex items-center text-gray-200 hover:cursor-pointer focus:outline-none" id="nav-toggle" aria-label="Open navigation menu">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="lg:hidden fixed top-13 left-0 right-0 bg-zinc-800 shadow-lg z-50 w-full hidden flex-col py-2" id="mobile-nav">
|
||||
<form action="/search" method="GET" class="px-4 py-2 border-b border-zinc-700">
|
||||
<div class="flex items-center space-x-2">
|
||||
<input type="text" name="q" placeholder="Search..."
|
||||
class="bg-zinc-700 text-white placeholder-gray-400 px-3 py-2.5 rounded text-base focus:outline-none focus:ring-2 focus:ring-gray-500 flex-1"
|
||||
value="{{ request.args.get('q', '') }}">
|
||||
<button type="submit" class="text-gray-200 hover:text-gray-400 hover:cursor-pointer flex-shrink-0">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{% if has_permission('view_index') %}
|
||||
<a href="/" class="block px-6 py-2 text-gray-200 hover:text-gray-400 font-medium flex items-center gap-2">
|
||||
<i class="fas fa-home"></i>
|
||||
@@ -117,6 +108,31 @@
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if current_user_name %}
|
||||
<div id="search-modal" class="hidden fixed inset-0 z-50 items-center justify-center p-4">
|
||||
<div id="search-modal-backdrop" class="absolute inset-0 bg-black/60"></div>
|
||||
<div class="relative w-full max-w-2xl rounded-lg bg-zinc-800 border border-zinc-700 shadow-xl">
|
||||
<div class="flex items-center justify-between px-4 py-3 border-b border-zinc-700">
|
||||
<h3 class="text-white font-semibold text-lg">Search</h3>
|
||||
<button type="button" id="search-modal-close" class="text-gray-300 hover:text-white hover:cursor-pointer" aria-label="Close search modal">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<form action="/search" method="GET" class="p-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="text" name="q" id="search-modal-input" placeholder="Search..."
|
||||
class="bg-zinc-700 text-white placeholder-gray-400 px-4 py-2 rounded-md text-base focus:outline-none focus:ring-2 focus:ring-gray-500 w-full"
|
||||
value="{{ request.args.get('q', '') }}">
|
||||
<button type="submit" class="text-gray-200 hover:text-gray-400 hover:cursor-pointer flex-shrink-0" aria-label="Submit search">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<script src="/static/js/header.min.js"></script>
|
||||
|
||||
<!-- Update Available Toast -->
|
||||
|
||||
Reference in New Issue
Block a user