mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 11:11:10 -05:00
b9063ff4f8
- Implemented park detail page with dynamic content loading for rides and weather. - Created park list page with filters and search functionality. - Developed ride detail page showcasing ride stats, reviews, and similar rides. - Added ride list page with filtering options and dynamic loading. - Introduced search results page with tabs for parks, rides, and users. - Added HTMX tests for global search functionality.
183 lines
12 KiB
HTML
183 lines
12 KiB
HTML
{% load static %}
|
|
<nav class="bg-background border-b border-border sticky top-0 z-40 backdrop-blur supports-[backdrop-filter]:bg-background/60" x-data="{ mobileMenuOpen: false }">
|
|
<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-16">
|
|
<!-- Left Side: Logo & Desktop Menu -->
|
|
<div class="flex">
|
|
<!-- Logo -->
|
|
<div class="flex items-center flex-shrink-0">
|
|
<a href="{% url 'home' %}" class="flex items-center gap-2">
|
|
<!-- Replace with actual logo SVG/Image -->
|
|
<span class="text-xl font-bold tracking-tight text-foreground">ThrillWiki</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Desktop Menu -->
|
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
|
|
<!-- Current: "border-primary text-foreground", Default: "border-transparent text-muted-foreground hover:border-border hover:text-foreground" -->
|
|
<a href="{% url 'parks:park_list' %}"
|
|
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200
|
|
{% if '/parks/' in request.path %}border-primary text-foreground{% else %}border-transparent text-muted-foreground hover:border-border hover:text-foreground{% endif %}">
|
|
Parks
|
|
</a>
|
|
<a href="{% url 'rides:ride_list' %}"
|
|
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200
|
|
{% if '/rides/' in request.path %}border-primary text-foreground{% else %}border-transparent text-muted-foreground hover:border-border hover:text-foreground{% endif %}">
|
|
Rides
|
|
</a>
|
|
<!-- Add more links as needed -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Side: Search, Theme, User Menu, Mobile Toggle -->
|
|
<div class="flex items-center gap-4">
|
|
<!-- Search Trigger -->
|
|
<button type="button"
|
|
class="p-2 transition-colors duration-200 text-muted-foreground hover:text-foreground"
|
|
@click="$store.search.toggle()"
|
|
aria-label="Search">
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Theme Toggle -->
|
|
<button type="button"
|
|
class="p-2 transition-colors duration-200 text-muted-foreground hover:text-foreground"
|
|
@click="$store.theme.toggle()"
|
|
aria-label="Toggle theme">
|
|
<!-- Sun Icon -->
|
|
<svg x-show="!$store.theme.isDark" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
|
</svg>
|
|
<!-- Moon Icon -->
|
|
<svg x-show="$store.theme.isDark" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="display: none;">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- User Menu (Authenticated) -->
|
|
{% if user.is_authenticated %}
|
|
<div class="relative ml-3" x-data="{ open: false }">
|
|
<div>
|
|
<button type="button"
|
|
class="flex text-sm rounded-full bg-background focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
|
@click="open = !open"
|
|
@click.away="open = false"
|
|
aria-expanded="false"
|
|
aria-haspopup="true">
|
|
<span class="sr-only">Open user menu</span>
|
|
{% if user.profile.avatar %}
|
|
<img class="object-cover w-8 h-8 rounded-full" src="{{ user.profile.avatar.url }}" alt="{{ user.username }}">
|
|
{% else %}
|
|
<div class="flex items-center justify-center w-8 h-8 text-xs font-medium rounded-full bg-primary/10 text-primary">
|
|
{{ user.username|make_list|first|upper }}
|
|
</div>
|
|
{% endif %}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Dropdown menu -->
|
|
<div x-show="open"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="transform opacity-0 scale-95"
|
|
x-transition:enter-end="transform opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-75"
|
|
x-transition:leave-start="transform opacity-100 scale-100"
|
|
x-transition:leave-end="transform opacity-0 scale-95"
|
|
class="absolute right-0 z-10 w-48 py-1 mt-2 origin-top-right rounded-md shadow-lg bg-popover ring-1 ring-black ring-opacity-5 focus:outline-none"
|
|
role="menu"
|
|
aria-orientation="vertical"
|
|
aria-labelledby="user-menu-button"
|
|
tabindex="-1"
|
|
style="display: none;">
|
|
<a href="{% url 'accounts:profile' %}" class="block px-4 py-2 text-sm text-foreground hover:bg-muted" role="menuitem">Your Profile</a>
|
|
<a href="{% url 'accounts:settings' %}" class="block px-4 py-2 text-sm text-foreground hover:bg-muted" role="menuitem">Settings</a>
|
|
<div class="my-1 border-t border-border"></div>
|
|
<form method="post" action="{% url 'account_logout' %}">
|
|
{% csrf_token %}
|
|
<button type="submit" class="block w-full px-4 py-2 text-sm text-left text-destructive hover:bg-destructive/10" role="menuitem">Sign out</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<!-- Auth Buttons (Guest) -->
|
|
<div class="items-center hidden gap-3 sm:flex">
|
|
<a href="{% url 'account_login' %}" class="text-sm font-medium transition-colors text-muted-foreground hover:text-foreground">Log in</a>
|
|
<a href="{% url 'account_signup' %}" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors rounded-md ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9">Sign up</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Mobile menu button -->
|
|
<div class="flex items-center sm:hidden">
|
|
<button type="button"
|
|
class="inline-flex items-center justify-center p-2 rounded-md text-muted-foreground hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"
|
|
@click="mobileMenuOpen = !mobileMenuOpen"
|
|
aria-controls="mobile-menu"
|
|
aria-expanded="false">
|
|
<span class="sr-only">Open main menu</span>
|
|
<!-- Icon when menu is closed -->
|
|
<svg x-show="!mobileMenuOpen" class="block w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
|
</svg>
|
|
<!-- Icon when menu is open -->
|
|
<svg x-show="mobileMenuOpen" class="block w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" style="display: none;">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile menu -->
|
|
<div class="sm:hidden" id="mobile-menu" x-show="mobileMenuOpen" style="display: none;">
|
|
<div class="pt-2 pb-3 space-y-1">
|
|
<!-- Current: "bg-primary/10 border-primary text-primary", Default: "border-transparent text-muted-foreground hover:bg-muted hover:border-border hover:text-foreground" -->
|
|
<a href="{% url 'parks:park_list' %}"
|
|
class="block border-l-4 py-2 pl-3 pr-4 text-base font-medium {% if '/parks/' in request.path %}bg-primary/10 border-primary text-primary{% else %}border-transparent text-muted-foreground hover:bg-muted hover:border-border hover:text-foreground{% endif %}">
|
|
Parks
|
|
</a>
|
|
<a href="{% url 'rides:ride_list' %}"
|
|
class="block border-l-4 py-2 pl-3 pr-4 text-base font-medium {% if '/rides/' in request.path %}bg-primary/10 border-primary text-primary{% else %}border-transparent text-muted-foreground hover:bg-muted hover:border-border hover:text-foreground{% endif %}">
|
|
Rides
|
|
</a>
|
|
</div>
|
|
|
|
{% if not user.is_authenticated %}
|
|
<div class="pt-4 pb-3 border-t border-border">
|
|
<div class="space-y-1">
|
|
<a href="{% url 'account_login' %}" class="block py-2 pl-3 pr-4 text-base font-medium border-l-4 border-transparent text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground">Log in</a>
|
|
<a href="{% url 'account_signup' %}" class="block py-2 pl-3 pr-4 text-base font-medium border-l-4 border-transparent text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground">Sign up</a>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="pt-4 pb-3 border-t border-border">
|
|
<div class="flex items-center px-4">
|
|
<div class="flex-shrink-0">
|
|
{% if user.profile.avatar %}
|
|
<img class="object-cover w-10 h-10 rounded-full" src="{{ user.profile.avatar.url }}" alt="{{ user.username }}">
|
|
{% else %}
|
|
<div class="flex items-center justify-center w-10 h-10 text-sm font-medium rounded-full bg-primary/10 text-primary">
|
|
{{ user.username|make_list|first|upper }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="ml-3">
|
|
<div class="text-base font-medium text-foreground">{{ user.username }}</div>
|
|
<div class="text-sm font-medium text-muted-foreground">{{ user.email }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 space-y-1">
|
|
<a href="{% url 'accounts:profile' %}" class="block px-4 py-2 text-base font-medium text-muted-foreground hover:bg-muted hover:text-foreground">Your Profile</a>
|
|
<a href="{% url 'accounts:settings' %}" class="block px-4 py-2 text-base font-medium text-muted-foreground hover:bg-muted hover:text-foreground">Settings</a>
|
|
<form method="post" action="{% url 'account_logout' %}">
|
|
{% csrf_token %}
|
|
<button type="submit" class="block w-full px-4 py-2 text-base font-medium text-left text-destructive hover:bg-muted hover:text-destructive">Sign out</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</nav>
|