mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 05:51:08 -05:00
Update user icon to open a menu with login or register options
Refactors the user icon component in `enhanced_header.html` to use Alpine.js for toggling a dropdown menu, displaying either user profile information or a login/register prompt. Replit-Commit-Author: Agent Replit-Commit-Session-Id: d2cd90dd-df0e-4a8a-b6ca-d9a6c16df62b Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/d2cd90dd-df0e-4a8a-b6ca-d9a6c16df62b/1S0572H
This commit is contained in:
pac7
pacnpal
@@ -179,58 +179,58 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
|
||||
</button>
|
||||
|
||||
<!-- User Icon -->
|
||||
<button
|
||||
{% if user.is_authenticated %}
|
||||
x-data="{ open: false }"
|
||||
<div class="relative" x-data="{ open: false }" @click.outside="open = false">
|
||||
<button
|
||||
@click="open = !open"
|
||||
@click.outside="open = false"
|
||||
{% else %}
|
||||
@click="window.authModal.show('login')"
|
||||
{% endif %}
|
||||
class="relative 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"
|
||||
>
|
||||
{% if user.is_authenticated %}
|
||||
{% if user.profile.avatar %}
|
||||
<img
|
||||
src="{{ user.profile.avatar.url }}"
|
||||
alt="{{ user.get_full_name|default:user.username }}"
|
||||
class="h-6 w-6 rounded-full object-cover"
|
||||
/>
|
||||
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"
|
||||
>
|
||||
{% if user.is_authenticated %}
|
||||
{% if user.profile.avatar %}
|
||||
<img
|
||||
src="{{ user.profile.avatar.url }}"
|
||||
alt="{{ user.get_full_name|default:user.username }}"
|
||||
class="h-6 w-6 rounded-full object-cover"
|
||||
/>
|
||||
{% else %}
|
||||
<div class="h-6 w-6 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-xs font-medium">
|
||||
{{ user.get_full_name.0|default:user.username.0|upper }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="h-6 w-6 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-xs font-medium">
|
||||
{{ user.get_full_name.0|default:user.username.0|upper }}
|
||||
</div>
|
||||
<i class="fas fa-user h-5 w-5"></i>
|
||||
{% endif %}
|
||||
|
||||
<!-- User Dropdown -->
|
||||
<div
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
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"
|
||||
x-cloak
|
||||
class="absolute right-0 top-full mt-2 w-56 bg-background border rounded-md shadow-lg z-50"
|
||||
>
|
||||
<div class="flex items-center justify-start gap-2 p-2">
|
||||
</button>
|
||||
|
||||
<!-- User Dropdown -->
|
||||
<div
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
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"
|
||||
x-cloak
|
||||
class="absolute right-0 top-full mt-2 w-48 bg-background border rounded-md shadow-lg z-50"
|
||||
>
|
||||
{% if user.is_authenticated %}
|
||||
<div class="flex items-center justify-start gap-2 p-3">
|
||||
<div class="flex flex-col space-y-1 leading-none">
|
||||
<p class="font-medium">{{ user.get_full_name|default:user.username }}</p>
|
||||
<p class="w-[200px] truncate text-sm text-muted-foreground">{{ user.email }}</p>
|
||||
<p class="w-[180px] truncate text-sm text-muted-foreground">{{ user.email }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t"></div>
|
||||
<a href="{% url 'profile' user.username %}" class="flex items-center px-2 py-2 text-sm hover:bg-accent">
|
||||
<a href="{% url 'profile' user.username %}" class="flex items-center px-3 py-2 text-sm hover:bg-accent" @click="open = false">
|
||||
<i class="fas fa-user mr-2 h-4 w-4"></i>
|
||||
Profile
|
||||
</a>
|
||||
<a href="{% url 'settings' %}" class="flex items-center px-2 py-2 text-sm hover:bg-accent">
|
||||
<a href="{% url 'settings' %}" class="flex items-center px-3 py-2 text-sm hover:bg-accent" @click="open = false">
|
||||
<i class="fas fa-cog mr-2 h-4 w-4"></i>
|
||||
Settings
|
||||
</a>
|
||||
{% if has_moderation_access %}
|
||||
<a href="{% url 'moderation:dashboard' %}" class="flex items-center px-2 py-2 text-sm hover:bg-accent">
|
||||
<a href="{% url 'moderation:dashboard' %}" class="flex items-center px-3 py-2 text-sm hover:bg-accent" @click="open = false">
|
||||
<i class="fas fa-shield-alt mr-2 h-4 w-4"></i>
|
||||
Moderation
|
||||
</a>
|
||||
@@ -238,16 +238,31 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
|
||||
<div class="border-t"></div>
|
||||
<form method="post" action="{% url 'account_logout' %}">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="flex items-center w-full px-2 py-2 text-sm text-red-600 hover:bg-accent">
|
||||
<button type="submit" class="flex items-center w-full px-3 py-2 text-sm text-red-600 hover:bg-accent">
|
||||
<i class="fas fa-sign-out-alt mr-2 h-4 w-4"></i>
|
||||
Log out
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{% else %}
|
||||
<i class="fas fa-user h-5 w-5"></i>
|
||||
{% endif %}
|
||||
</button>
|
||||
{% else %}
|
||||
<div class="p-2">
|
||||
<button
|
||||
@click="window.authModal.show('login'); open = false"
|
||||
class="flex items-center w-full px-3 py-2 text-sm hover:bg-accent rounded-md"
|
||||
>
|
||||
<i class="fas fa-sign-in-alt mr-2 h-4 w-4"></i>
|
||||
Login
|
||||
</button>
|
||||
<button
|
||||
@click="window.authModal.show('register'); open = false"
|
||||
class="flex items-center w-full px-3 py-2 text-sm hover:bg-accent rounded-md"
|
||||
>
|
||||
<i class="fas fa-user-plus mr-2 h-4 w-4"></i>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
|
||||
Reference in New Issue
Block a user