72 lines
3.6 KiB
HTML
72 lines
3.6 KiB
HTML
<nav class="bg-primary shadow-lg">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-16">
|
|
<!-- Logo -->
|
|
<a href="/" class="flex items-center space-x-2">
|
|
<svg class="w-8 h-8 text-warm" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/>
|
|
</svg>
|
|
<span class="text-xl font-bold text-white tracking-tight">NexHome</span>
|
|
</a>
|
|
|
|
<!-- Desktop nav -->
|
|
<div class="hidden md:flex items-center space-x-6">
|
|
<a href="/" class="text-gray-200 hover:text-white transition">Home</a>
|
|
<a href="/properties" class="text-gray-200 hover:text-white transition">Buy</a>
|
|
<a href="/properties?type=rent" class="text-gray-200 hover:text-white transition">Rent</a>
|
|
<a href="/properties/new" class="text-gray-200 hover:text-white transition">Sell</a>
|
|
|
|
{% if user %}
|
|
<a href="/dashboard" class="text-gray-200 hover:text-white transition">Dashboard</a>
|
|
<div class="flex items-center space-x-3 ml-2">
|
|
<span class="text-warm font-medium text-sm">{{ user.username }}</span>
|
|
<a href="/auth/logout"
|
|
class="bg-warm hover:bg-warm-dark text-primary font-semibold text-sm px-4 py-2 rounded-lg transition">
|
|
Logout
|
|
</a>
|
|
</div>
|
|
{% else %}
|
|
<a href="/auth/login"
|
|
class="text-gray-200 hover:text-white transition font-medium text-sm">
|
|
Login
|
|
</a>
|
|
<a href="/auth/register"
|
|
class="bg-warm hover:bg-warm-dark text-primary font-semibold text-sm px-4 py-2 rounded-lg transition">
|
|
Register
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Mobile menu button -->
|
|
<button id="mobile-menu-btn" class="md:hidden text-gray-200 hover:text-white">
|
|
<svg 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>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mobile menu -->
|
|
<div id="mobile-menu" class="hidden md:hidden pb-4">
|
|
<div class="flex flex-col space-y-2">
|
|
<a href="/" class="text-gray-200 hover:text-white py-2">Home</a>
|
|
<a href="/properties" class="text-gray-200 hover:text-white py-2">Buy</a>
|
|
<a href="/properties?type=rent" class="text-gray-200 hover:text-white py-2">Rent</a>
|
|
<a href="/properties/new" class="text-gray-200 hover:text-white py-2">Sell</a>
|
|
{% if user %}
|
|
<a href="/dashboard" class="text-gray-200 hover:text-white py-2">Dashboard</a>
|
|
<a href="/auth/logout" class="text-warm hover:text-warm-dark py-2 font-medium">Logout ({{ user.username }})</a>
|
|
{% else %}
|
|
<a href="/auth/login" class="text-gray-200 hover:text-white py-2">Login</a>
|
|
<a href="/auth/register" class="text-warm hover:text-warm-dark py-2 font-medium">Register</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<script>
|
|
document.getElementById('mobile-menu-btn')?.addEventListener('click', () => {
|
|
document.getElementById('mobile-menu').classList.toggle('hidden');
|
|
});
|
|
</script>
|