-
Notifications
You must be signed in to change notification settings - Fork 67
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: display user menu in topbar to authenticated users in marketing…
… pages
- Loading branch information
1 parent
0f83309
commit 08d7782
Showing
14 changed files
with
707 additions
and
198 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
{% if request.user.is_authenticated %} | ||
<div class="relative inline-block px-3 text-left"> | ||
{% with person=request.user.person %} | ||
<div> | ||
<button type="button" _="on click toggle .hidden on #navbar-dropdown-menu end" | ||
class="group w-full rounded-md px-3.5 py-2 text-left text-sm font-medium | ||
text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 | ||
focus:ring-offset-2 focus:ring-offset-gray-100" | ||
id="navbar-menu-button" | ||
aria-expanded="false" | ||
aria-haspopup="true"> | ||
<span class="flex w-full items-center justify-between"> | ||
<span class="flex min-w-0 items-center justify-between space-x-3"> | ||
<img class="h-10 w-10 flex-shrink-0 rounded-full bg-gray-300" | ||
src="{{ person.get_photo_url }}" | ||
alt="Profile Picture"> | ||
<span class="flex min-w-0 flex-1 flex-col"> | ||
<span class="truncate text-sm font-medium text-gray-900">{{ person.get_full_name }}</span> | ||
<span class="truncate text-sm text-gray-500">@{{ person.get_username }}</span> | ||
</span> | ||
</span> | ||
<svg class="h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500" viewBox="0 0 20 20" | ||
fill="currentColor" aria-hidden="true"> | ||
<path fill-rule="evenodd" | ||
d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" | ||
clip-rule="evenodd" /> | ||
</svg> | ||
</span> | ||
</button> | ||
</div> | ||
|
||
<div _="on mouseenter from <a/> in me | ||
remove .text-gray-700 from <a/> in me | ||
tell the target | ||
add .bg-gray-100 .text-gray-900 | ||
end | ||
on mouseleave from <a/> in me | ||
remove .bg-gray-100 .text-gray-900 from <a/> in me | ||
tell the target | ||
add .text-gray-700 | ||
end" | ||
id="navbar-dropdown-menu" | ||
class="hidden absolute left-0 right-0 z-10 mx-3 mt-1 origin-top | ||
divide-y divide-gray-200 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 | ||
focus:outline-none" | ||
role="menu" | ||
aria-orientation="vertical" | ||
aria-labelledby="navbar-menu-button" | ||
tabindex="-1"> | ||
<div class="py-1" role="none"> | ||
<a href="{% url 'portal:dashboard' %}" | ||
class="text-gray-700 block px-4 py-2 text-sm" | ||
role="menuitem" | ||
tabindex="-1" | ||
id="options-menu-item-0">Portal</a> | ||
<a href="{% url 'profile' request.user.person.pk %}" | ||
class="text-gray-700 block px-4 py-2 text-sm" | ||
role="menuitem" | ||
tabindex="-1" | ||
id="options-menu-item-1">Your Profile</a> | ||
<a href="{% url 'showcase' request.user.username %}" | ||
class="text-gray-700 block px-4 py-2 text-sm" | ||
role="menuitem" | ||
tabindex="-1" | ||
id="options-menu-item-2">Visit Showcase</a> | ||
</div> | ||
<div class="py-1" role="none"> | ||
<form id="logout-form" method="post" action="{% url 'security:logout' %}"> | ||
{% csrf_token %} | ||
<button type="submit" class="text-gray-700 block px-4 py-2 text-sm">Log out</button> | ||
</form> | ||
</div> | ||
</div> | ||
{% endwith %} | ||
</div> | ||
{% else %} | ||
<a href="{% url 'security:sign_in' %}" class="text-sm font-semibold leading-6 text-gray-900"> | ||
Sign in <span aria-hidden="true">→</span> | ||
</a> | ||
<a href="{% url 'security:sign_up' %}" | ||
class="text-sm font-semibold leading-6 transition-all delay-600 rounded bg-indigo-600 px-3.5 py-1.5 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"> | ||
Sign up | ||
</a> | ||
{% endif %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
{% if request.user.is_authenticated %} | ||
{% with person=request.user.person %} | ||
<div class="space-y-2"> | ||
<!-- User Info Section --> | ||
<div class="group w-full rounded-md px-3.5 py-2 text-left text-sm font-medium"> | ||
<span class="flex w-full items-center space-x-3"> | ||
<img class="h-10 w-10 flex-shrink-0 rounded-full bg-gray-300" | ||
src="{{ person.get_photo_url }}" | ||
alt="Profile Picture"> | ||
<span class="flex min-w-0 flex-1 flex-col"> | ||
<span class="truncate text-sm font-medium text-gray-900">{{ person.get_full_name }}</span> | ||
<span class="truncate text-sm text-gray-500">@{{ person.get_username }}</span> | ||
</span> | ||
</span> | ||
</div> | ||
|
||
<!-- Navigation Links --> | ||
<div class="border-t border-gray-200 pt-4"> | ||
<a href="{% url 'portal:dashboard' %}" | ||
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> | ||
Portal | ||
</a> | ||
<a href="{% url 'profile' request.user.person.pk %}" | ||
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> | ||
Your Profile | ||
</a> | ||
<a href="{% url 'showcase' request.user.username %}" | ||
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> | ||
Visit Showcase | ||
</a> | ||
</div> | ||
|
||
<!-- Logout Form --> | ||
<div class="border-t border-gray-200"> | ||
<form method="post" action="{% url 'security:logout' %}"> | ||
{% csrf_token %} | ||
<button type="submit" | ||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> | ||
Log out | ||
</button> | ||
</form> | ||
</div> | ||
</div> | ||
{% endwith %} | ||
{% else %} | ||
<div class="space-y-4 pt-4"> | ||
<a href="{% url 'security:sign_in' %}" | ||
class="block px-4 py-2 text-sm font-semibold text-gray-900"> | ||
Sign in <span aria-hidden="true">→</span> | ||
</a> | ||
<a href="{% url 'security:sign_up' %}" | ||
class="block px-4 py-2 text-sm font-semibold text-white bg-indigo-600 rounded hover:bg-indigo-500"> | ||
Sign up | ||
</a> | ||
</div> | ||
{% endif %} |
Oops, something went wrong.