Skip to content

Commit

Permalink
feat: display user menu in topbar to authenticated users in marketing…
Browse files Browse the repository at this point in the history
… pages
  • Loading branch information
adrianmcphee committed Nov 18, 2024
1 parent 0f83309 commit 08d7782
Show file tree
Hide file tree
Showing 14 changed files with 707 additions and 198 deletions.
182 changes: 30 additions & 152 deletions apps/common/templates/navbar.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,162 +26,40 @@
</button>
</div>
<div class="hidden lg:flex lg:items-center lg:justify-end lg:gap-x-5 relative z-[2] ml-auto">
{% 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">&rarr;</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 %}
{% include "partials/user_menu.html" %}
</div>

<div id="mobile-menu-wrap" class="lg:hidden menu-wrap" role="dialog" aria-modal="true">
{% with person=request.user.person %}
<div class="fixed inset-y-0 w-full z-10 menu-overlay"></div>
<div
class="fixed inset-y-0 z-[11] overflow-y-auto bg-white px-4 py-6 sm:max-w-sm w-full sm:ring-1 sm:ring-gray-900/10 menu">
<div class="flex items-center justify-between">
<a href="{% url 'index' %}" class="-m-1.5 p-1.5">
<span class="sr-only">OpenUnited</span>
</a>
<button _="on click remove .menu-open from #mobile-menu-wrap" type="button"
class="appearance-none -m-2.5 rounded-md p-2.5 text-gray-700 focus-visible:outline-none btn-close-menu">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
type="button" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>

{% if request.user.is_authenticated %}
<div>
<div 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>

</span>
</div>
</div>

<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>

{% endif %}

<ul class="space-y-5 flex flex-col pt-4 sm:pt-[30%] pb-10">

<li class="flex">
<a href="{% url 'product_management:bounty-list' %}" class="text-sm font-semibold leading-6 text-gray-900">Claim a
Bounty</a>
</li>
<li class="flex">
<a href="{% url 'marketing:about' %}" class="text-sm font-semibold leading-6 text-gray-900">About</a>
</li>

<div class="fixed inset-y-0 w-full z-10 menu-overlay"></div>
<div class="fixed inset-y-0 z-[11] overflow-y-auto bg-white px-4 py-6 sm:max-w-sm w-full sm:ring-1 sm:ring-gray-900/10 menu">
<div class="flex items-center justify-between">
<a href="{% url 'index' %}" class="-m-1.5 p-1.5">
<span class="sr-only">OpenUnited</span>
</a>
<button _="on click remove .menu-open from #mobile-menu-wrap" type="button"
class="appearance-none -m-2.5 rounded-md p-2.5 text-gray-700 focus-visible:outline-none btn-close-menu">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
type="button" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>

{% if not request.user.is_authenticated %}
<li class="flex">
<a href="{% url 'security:sign_in' %}" class="text-sm font-semibold leading-6 text-gray-900">
Sign in <span aria-hidden="true">&rarr;</span>
</a>
</li>
<li class="flex">
<a href="{% url 'security:sign_up' %}"
class="text-sm font-semibold leading-6 text-gray-900 transition-all delay-600 rounded bg-indigo-600 px-4 py-2 text-sm font-semibold 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>
</li>
{% endif %}
{% include "partials/user_menu_mobile.html" %}

</ul>
</div>
{% endwith %}
<ul class="space-y-5 flex flex-col pt-4 sm:pt-[30%] pb-10">
<li class="flex">
<a href="{% url 'product_management:bounty-list' %}" class="text-sm font-semibold leading-6 text-gray-900">
Explore Bounties
</a>
</li>
<li class="flex">
<a href="{% url 'marketing:about' %}" class="text-sm font-semibold leading-6 text-gray-900">
About
</a>
</li>
</ul>
</div>
</div>
</nav>
84 changes: 84 additions & 0 deletions apps/common/templates/partials/user_menu.html
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">&rarr;</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 %}
56 changes: 56 additions & 0 deletions apps/common/templates/partials/user_menu_mobile.html
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">&rarr;</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 %}
Loading

0 comments on commit 08d7782

Please sign in to comment.