forked from tangled.org/core
Monorepo for Tangled

appview/layouts/fragments: use popopver api + semantic markdown for dropdown menu

besaid.zone e39c9af3 83453ec0

verified
Changed files
+49 -16
appview
pages
templates
layouts
fragments
+49 -16
appview/pages/templates/layouts/fragments/topbar.html
··· 47 47 {{ end }} 48 48 49 49 {{ define "profileDropdown" }} 50 - <details class="relative inline-block text-left nav-dropdown"> 51 - <summary class="cursor-pointer list-none flex items-center gap-1"> 52 - {{ $user := .Did }} 53 - <img 50 + {{ $user := .Did }} 51 + <button type="button" popovertarget="navigation-popover" class="site-navigation-dropdown-trigger" aria-label="Open site navigation dropdown" aria-controls="navigation-menu-popover"> 52 + <img 53 + src="{{ tinyAvatar $user }}" 54 + alt="" 55 + class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700" 56 + /> 57 + </button> 58 + <nav popover="auto" id="navigation-popover" class="site-navigation-popover shadow-md border border-gray-100 rounded-sm p-2"> 59 + <div class="flex gap-2 py-2"> 60 + <img 54 61 src="{{ tinyAvatar $user }}" 55 62 alt="" 56 63 class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700" 57 64 /> 58 - <span class="hidden md:inline">{{ $user | resolve | truncateAt30 }}</span> 59 - </summary> 60 - <div class="absolute flex flex-col right-0 mt-4 p-4 rounded w-48 bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700"> 61 - <a href="/{{ $user }}">profile</a> 62 - <a href="/{{ $user }}?tab=repos">repositories</a> 63 - <a href="/{{ $user }}?tab=strings">strings</a> 64 - <a href="/settings">settings</a> 65 - <a href="#" 65 + <p>{{ $user | resolve | truncateAt30 }}</p> 66 + </div> 67 + <hr class="h-1 w-full mb-1 mt-2" role="separator" aria-orientation="horizontal" /> 68 + <ul id="navigation-menu-popover"> 69 + <li> 70 + <a href="/{{ $user }}"> 71 + {{ i "user" "w-4 h-4" }} 72 + <span>profile</span> 73 + </a> 74 + </li> 75 + <li> 76 + <a href="/{{ $user }}?tab=repos"> 77 + {{ i "book-marked" "w-4 h-4" }} 78 + <span>repositories</span> 79 + </a> 80 + </li> 81 + <li> 82 + <a href="/{{ $user }}?tab=strings"> 83 + {{ i "spool" "w-4 h-4" }} 84 + <span>strings</span> 85 + </a> 86 + </li> 87 + <li> 88 + <a href="/settings"> 89 + {{ i "settings" "w-4 h-4" }} 90 + <span>settings</span> 91 + </a> 92 + </li> 93 + <hr class="h-1 w-full mb-1 mt-2" /> 94 + <li> 95 + <a href="#" 66 96 hx-post="/logout" 67 97 hx-swap="none" 68 - class="text-red-400 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"> 69 - logout 98 + class="text-red-600 flex gap-2 items-center hover:bg-red-50 hover:text-red-700 px-2 py-2 rounded-sm no-underline"> 99 + {{ i "arrow-right-from-line" "w-4 h-4" }} 100 + <span>logout</span> 70 101 </a> 71 - </div> 72 - </details> 102 + </li> 103 + </ul> 104 + </nav> 105 + {{ end }} 73 106 74 107 <script> 75 108 document.addEventListener('click', function(event) {