Improve header navigation and user account access for mobile

Update `enhanced_header.html` to conditionally render mobile navigation links for login and signup based on user authentication status. Adjustments made to `.hidden md:flex` and `.md:hidden` classes for proper display. Additionally, modify `button.html` component to provide default empty strings for `x_data` and `x_on` attributes.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: eff39de1-3afa-446d-a965-acaf61837fc7
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/eff39de1-3afa-446d-a965-acaf61837fc7/W8ptmMg
This commit is contained in:
pac7
2025-09-21 13:56:18 +00:00
committed by pacnpal
parent 5eac88a5cd
commit a2501562a8
2 changed files with 33 additions and 4 deletions

View File

@@ -309,7 +309,7 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
</div> </div>
</div> </div>
{% else %} {% else %}
<div class="flex items-center space-x-1"> <div class="hidden md:flex items-center space-x-1">
<div <div
hx-get="{% url 'account_login' %}" hx-get="{% url 'account_login' %}"
hx-target="body" hx-target="body"
@@ -330,7 +330,7 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
{% endif %} {% endif %}
<!-- Mobile Menu Button --> <!-- Mobile Menu Button -->
<div x-data="{ open: false }"> <div class="md:hidden" x-data="{ open: false }">
<button <button
@click="open = !open" @click="open = !open"
class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10" class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10"
@@ -386,6 +386,35 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
Navigate through the ultimate theme park database Navigate through the ultimate theme park database
</p> </p>
<!-- Mobile Authentication -->
{% if not user.is_authenticated %}
<div>
<h3 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">
ACCOUNT
</h3>
<div class="space-y-2">
<div
hx-get="{% url 'account_login' %}"
hx-target="body"
hx-swap="beforeend"
class="cursor-pointer"
@click="open = false"
>
<c-ui.button variant="outline" size="default" text="Login" button_classes="w-full" />
</div>
<div
hx-get="{% url 'account_signup' %}"
hx-target="body"
hx-swap="beforeend"
class="cursor-pointer"
@click="open = false"
>
<c-ui.button variant="default" size="default" text="Join ThrillWiki" button_classes="w-full" />
</div>
</div>
</div>
{% endif %}
<!-- Navigation Section --> <!-- Navigation Section -->
<div> <div>
<h3 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3"> <h3 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">

View File

@@ -13,8 +13,8 @@ Converts existing button component to use Django Cotton's component system
type="type|default:'button'" type="type|default:'button'"
disabled="disabled|default:''" disabled="disabled|default:''"
onclick="onclick|default:''" onclick="onclick|default:''"
x_data="x_data" x_data="x_data|default:''"
x_on="x_on" x_on="x_on|default:''"
hx_get="hx_get|default:''" hx_get="hx_get|default:''"
hx_post="hx_post|default:''" hx_post="hx_post|default:''"
hx_target="hx_target|default:''" hx_target="hx_target|default:''"