mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2026-01-05 06:50:14 +00:00
first copies from portal
This commit is contained in:
fsociety
@@ -0,0 +1,22 @@
|
||||
<div>
|
||||
<input type="checkbox" name="light-switch" id="light-switch" class="light-switch sr-only"/>
|
||||
<label
|
||||
class="flex items-center justify-center cursor-pointer w-8 h-8 hover:bg-gray-100 lg:hover:bg-gray-200 dark:hover:bg-gray-700/50 dark:lg:hover:bg-gray-800 rounded-full"
|
||||
for="light-switch">
|
||||
<svg class="dark:hidden fill-current text-gray-500/80 dark:text-gray-400/80" width="16"
|
||||
height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 0a1 1 0 0 1 1 1v.5a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1Z"/>
|
||||
<path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm-4 2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
|
||||
<path
|
||||
d="M13.657 3.757a1 1 0 0 0-1.414-1.414l-.354.354a1 1 0 0 0 1.414 1.414l.354-.354ZM13.5 8a1 1 0 0 1 1-1h.5a1 1 0 1 1 0 2h-.5a1 1 0 0 1-1-1ZM13.303 11.889a1 1 0 0 0-1.414 1.414l.354.354a1 1 0 0 0 1.414-1.414l-.354-.354ZM8 13.5a1 1 0 0 1 1 1v.5a1 1 0 1 1-2 0v-.5a1 1 0 0 1 1-1ZM4.111 13.303a1 1 0 1 0-1.414-1.414l-.354.354a1 1 0 1 0 1.414 1.414l.354-.354ZM0 8a1 1 0 0 1 1-1h.5a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1ZM3.757 2.343a1 1 0 1 0-1.414 1.414l.354.354A1 1 0 1 0 4.11 2.697l-.354-.354Z"/>
|
||||
</svg>
|
||||
<svg class="hidden dark:block fill-current text-gray-500/80 dark:text-gray-400/80"
|
||||
width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M11.875 4.375a.625.625 0 1 0 1.25 0c.001-.69.56-1.249 1.25-1.25a.625.625 0 1 0 0-1.25 1.252 1.252 0 0 1-1.25-1.25.625.625 0 1 0-1.25 0 1.252 1.252 0 0 1-1.25 1.25.625.625 0 1 0 0 1.25c.69.001 1.249.56 1.25 1.25Z"/>
|
||||
<path
|
||||
d="M7.019 1.985a1.55 1.55 0 0 0-.483-1.36 1.44 1.44 0 0 0-1.53-.277C2.056 1.553 0 4.5 0 7.9 0 12.352 3.648 16 8.1 16c3.407 0 6.246-2.058 7.51-4.963a1.446 1.446 0 0 0-.25-1.55 1.554 1.554 0 0 0-1.372-.502c-4.01.552-7.539-2.987-6.97-7ZM2 7.9C2 5.64 3.193 3.664 4.961 2.6 4.82 7.245 8.72 11.158 13.36 11.04 12.265 12.822 10.341 14 8.1 14 4.752 14 2 11.248 2 7.9Z"/>
|
||||
</svg>
|
||||
<span class="sr-only">Switch to light / dark version</span>
|
||||
</label>
|
||||
</div>
|
||||
@@ -0,0 +1,64 @@
|
||||
<div class="relative inline-flex" x-data="{ open: false }">
|
||||
<button
|
||||
class="w-8 h-8 flex items-center justify-center hover:bg-gray-100 lg:hover:bg-gray-200 dark:hover:bg-gray-700/50 dark:lg:hover:bg-gray-800 rounded-full"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-800': open }"
|
||||
aria-haspopup="true"
|
||||
@click.prevent="open = !open"
|
||||
:aria-expanded="open"
|
||||
>
|
||||
<span class="sr-only">Notifications</span>
|
||||
<svg class="fill-current text-gray-500/80 dark:text-gray-400/80" width="16" height="16"
|
||||
viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M7 0a7 7 0 0 0-7 7c0 1.202.308 2.33.84 3.316l-.789 2.368a1 1 0 0 0 1.265 1.265l2.595-.865a1 1 0 0 0-.632-1.898l-.698.233.3-.9a1 1 0 0 0-.104-.85A4.97 4.97 0 0 1 2 7a5 5 0 0 1 5-5 4.99 4.99 0 0 1 4.093 2.135 1 1 0 1 0 1.638-1.148A6.99 6.99 0 0 0 7 0Z"/>
|
||||
<path
|
||||
d="M11 6a5 5 0 0 0 0 10c.807 0 1.567-.194 2.24-.533l1.444.482a1 1 0 0 0 1.265-1.265l-.482-1.444A4.962 4.962 0 0 0 16 11a5 5 0 0 0-5-5Zm-3 5a3 3 0 0 1 6 0c0 .588-.171 1.134-.466 1.6a1 1 0 0 0-.115.82 1 1 0 0 0-.82.114A2.973 2.973 0 0 1 11 14a3 3 0 0 1-3-3Z"/>
|
||||
</svg>
|
||||
<div
|
||||
class="absolute top-0 right-0 w-2.5 h-2.5 bg-red-500 border-2 border-gray-100 dark:border-gray-900 rounded-full"></div>
|
||||
</button>
|
||||
<div
|
||||
class="origin-top-right z-10 absolute top-full right-0 -mr-48 sm:mr-0 min-w-80 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700/60 py-1.5 rounded-lg shadow-lg overflow-hidden mt-1"
|
||||
@click.outside="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-200 transform"
|
||||
x-transition:enter-start="opacity-0 -translate-y-2"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
x-transition:leave="transition ease-out duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
x-cloak
|
||||
>
|
||||
<div
|
||||
class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase pt-1.5 pb-2 px-4">
|
||||
Notifications
|
||||
</div>
|
||||
<ul>
|
||||
<li class="border-b border-gray-200 dark:border-gray-700/60 last:border-0">
|
||||
<a class="block py-2 px-4 hover:bg-gray-50 dark:hover:bg-gray-700/20" href="#0"
|
||||
@click="open = false" @focus="open = true" @focusout="open = false">
|
||||
<span class="block text-sm mb-2">📣 <span
|
||||
class="font-medium text-gray-800 dark:text-gray-100">Edit your information in a swipe</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
|
||||
<span class="block text-xs font-medium text-gray-400 dark:text-gray-500">Feb 12, 2024</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="border-b border-gray-200 dark:border-gray-700/60 last:border-0">
|
||||
<a class="block py-2 px-4 hover:bg-gray-50 dark:hover:bg-gray-700/20" href="#0"
|
||||
@click="open = false" @focus="open = true" @focusout="open = false">
|
||||
<span class="block text-sm mb-2">📣 <span
|
||||
class="font-medium text-gray-800 dark:text-gray-100">Edit your information in a swipe</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
|
||||
<span class="block text-xs font-medium text-gray-400 dark:text-gray-500">Feb 9, 2024</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="border-b border-gray-200 dark:border-gray-700/60 last:border-0">
|
||||
<a class="block py-2 px-4 hover:bg-gray-50 dark:hover:bg-gray-700/20" href="#0"
|
||||
@click="open = false" @focus="open = true" @focusout="open = false">
|
||||
<span class="block text-sm mb-2">🚀<span
|
||||
class="font-medium text-gray-800 dark:text-gray-100">Say goodbye to paper receipts!</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
|
||||
<span class="block text-xs font-medium text-gray-400 dark:text-gray-500">Jan 24, 2024</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,201 @@
|
||||
<!-- Search button -->
|
||||
<div x-data="{ searchOpen: false }">
|
||||
<!-- Button -->
|
||||
<button
|
||||
class="w-8 h-8 flex items-center justify-center hover:bg-gray-100 lg:hover:bg-gray-200 dark:hover:bg-gray-700/50 dark:lg:hover:bg-gray-800 rounded-full"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-800': searchOpen }"
|
||||
@click.prevent="searchOpen = true;if (searchOpen) $nextTick(()=>{$refs.searchInput.focus();});"
|
||||
aria-controls="search-modal"
|
||||
>
|
||||
<span class="sr-only">Search</span>
|
||||
<svg class="fill-current text-gray-500/80 dark:text-gray-400/80" width="16" height="16"
|
||||
viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7ZM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Z"/>
|
||||
<path
|
||||
d="m13.314 11.9 2.393 2.393a.999.999 0 1 1-1.414 1.414L11.9 13.314a8.019 8.019 0 0 0 1.414-1.414Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Modal backdrop -->
|
||||
<div
|
||||
class="fixed inset-0 bg-gray-900 bg-opacity-30 z-50 transition-opacity"
|
||||
x-show="searchOpen"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-out duration-100"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
aria-hidden="true"
|
||||
x-cloak
|
||||
></div>
|
||||
<!-- Modal dialog -->
|
||||
<div
|
||||
id="search-modal"
|
||||
class="fixed inset-0 z-50 overflow-hidden flex items-start top-20 mb-4 justify-center px-4 sm:px-6"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
x-show="searchOpen"
|
||||
x-transition:enter="transition ease-in-out duration-200"
|
||||
x-transition:enter-start="opacity-0 translate-y-4"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
x-transition:leave="transition ease-in-out duration-200"
|
||||
x-transition:leave-start="opacity-100 translate-y-0"
|
||||
x-transition:leave-end="opacity-0 translate-y-4"
|
||||
x-cloak
|
||||
>
|
||||
<div
|
||||
class="bg-white dark:bg-gray-800 border border-transparent dark:border-gray-700/60 overflow-auto max-w-2xl w-full max-h-full rounded-lg shadow-lg"
|
||||
@click.outside="searchOpen = false"
|
||||
@keydown.escape.window="searchOpen = false"
|
||||
>
|
||||
<!-- Search form -->
|
||||
<form class="border-b border-gray-200 dark:border-gray-700/60">
|
||||
<div class="relative">
|
||||
<label for="modal-search" class="sr-only">Search</label>
|
||||
<input id="modal-search"
|
||||
class="w-full dark:text-gray-300 bg-white dark:bg-gray-800 border-0 focus:ring-transparent placeholder-gray-400 dark:placeholder-gray-500 appearance-none py-3 pl-10 pr-4"
|
||||
type="search" placeholder="Search Anything…" x-ref="searchInput"/>
|
||||
<button class="absolute inset-0 right-auto group" type="submit"
|
||||
aria-label="Search">
|
||||
<svg
|
||||
class="shrink-0 fill-current text-gray-400 dark:text-gray-500 group-hover:text-gray-500 dark:group-hover:text-gray-400 ml-4 mr-2"
|
||||
width="16" height="16" viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z"/>
|
||||
<path
|
||||
d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="py-4 px-2">
|
||||
<!-- Recent searches -->
|
||||
<div class="mb-3 last:mb-0">
|
||||
<div
|
||||
class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase px-2 mb-2">
|
||||
Recent searches
|
||||
</div>
|
||||
<ul class="text-sm">
|
||||
<li>
|
||||
<a class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg"
|
||||
href="#0" @click="searchOpen = false" @focus="searchOpen = true"
|
||||
@focusout="searchOpen = false">
|
||||
<svg
|
||||
class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3"
|
||||
width="16" height="16" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z"/>
|
||||
</svg>
|
||||
<span>Form Builder - 23 hours on-demand video</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg"
|
||||
href="#0" @click="searchOpen = false" @focus="searchOpen = true"
|
||||
@focusout="searchOpen = false">
|
||||
<svg
|
||||
class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3"
|
||||
width="16" height="16" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z"/>
|
||||
</svg>
|
||||
<span>Access Mosaic on mobile and TV</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg"
|
||||
href="#0" @click="searchOpen = false" @focus="searchOpen = true"
|
||||
@focusout="searchOpen = false">
|
||||
<svg
|
||||
class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3"
|
||||
width="16" height="16" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z"/>
|
||||
</svg>
|
||||
<span>Product Update - Q4 2024</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg"
|
||||
href="#0" @click="searchOpen = false" @focus="searchOpen = true"
|
||||
@focusout="searchOpen = false">
|
||||
<svg
|
||||
class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3"
|
||||
width="16" height="16" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z"/>
|
||||
</svg>
|
||||
<span>Master Digital Marketing Strategy course</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg"
|
||||
href="#0" @click="searchOpen = false" @focus="searchOpen = true"
|
||||
@focusout="searchOpen = false">
|
||||
<svg
|
||||
class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3"
|
||||
width="16" height="16" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z"/>
|
||||
</svg>
|
||||
<span>Dedicated forms for products</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg"
|
||||
href="#0" @click="searchOpen = false" @focus="searchOpen = true"
|
||||
@focusout="searchOpen = false">
|
||||
<svg
|
||||
class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3"
|
||||
width="16" height="16" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z"/>
|
||||
</svg>
|
||||
<span>Product Update - Q4 2024</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Recent pages -->
|
||||
<div class="mb-3 last:mb-0">
|
||||
<div
|
||||
class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase px-2 mb-2">
|
||||
Recent pages
|
||||
</div>
|
||||
<ul class="text-sm">
|
||||
<li>
|
||||
<a class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg"
|
||||
href="#0" @click="searchOpen = false" @focus="searchOpen = true"
|
||||
@focusout="searchOpen = false">
|
||||
<svg
|
||||
class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3"
|
||||
width="16" height="16" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z"/>
|
||||
</svg>
|
||||
<span><span class="font-medium">Messages</span> - <span
|
||||
class="text-gray-600 dark:text-gray-400">Conversation / … / Mike Mills</span></span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg"
|
||||
href="#0" @click="searchOpen = false" @focus="searchOpen = true"
|
||||
@focusout="searchOpen = false">
|
||||
<svg
|
||||
class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3"
|
||||
width="16" height="16" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z"/>
|
||||
</svg>
|
||||
<span><span class="font-medium">Messages</span> - <span
|
||||
class="text-gray-600 dark:text-gray-400">Conversation / … / Eva Patrick</span></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,49 @@
|
||||
<div class="relative inline-flex" x-data="{ open: false }">
|
||||
<button
|
||||
class="inline-flex justify-center items-center group"
|
||||
aria-haspopup="true"
|
||||
@click.prevent="open = !open"
|
||||
:aria-expanded="open"
|
||||
>
|
||||
<img class="w-8 h-8 rounded-full" src="./images/user-avatar-32.png" width="32"
|
||||
height="32" alt="User"/>
|
||||
<div class="flex items-center truncate">
|
||||
<span
|
||||
class="truncate ml-2 text-sm font-medium text-gray-600 dark:text-gray-100 group-hover:text-gray-800 dark:group-hover:text-white">Acme Inc.</span>
|
||||
<svg class="w-3 h-3 shrink-0 ml-1 fill-current text-gray-400 dark:text-gray-500"
|
||||
viewBox="0 0 12 12">
|
||||
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="origin-top-right z-10 absolute top-full right-0 min-w-44 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700/60 py-1.5 rounded-lg shadow-lg overflow-hidden mt-1"
|
||||
@click.outside="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-200 transform"
|
||||
x-transition:enter-start="opacity-0 -translate-y-2"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
x-transition:leave="transition ease-out duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
x-cloak
|
||||
>
|
||||
<div class="pt-0.5 pb-2 px-3 mb-1 border-b border-gray-200 dark:border-gray-700/60">
|
||||
<div class="font-medium text-gray-800 dark:text-gray-100">Acme Inc.</div>
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400 italic">Administrator</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<a class="font-medium text-sm text-violet-500 hover:text-violet-600 dark:hover:text-violet-400 flex items-center py-1 px-3"
|
||||
href="settings.html" @click="open = false" @focus="open = true"
|
||||
@focusout="open = false">Settings</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="font-medium text-sm text-violet-500 hover:text-violet-600 dark:hover:text-violet-400 flex items-center py-1 px-3"
|
||||
href="signin.html" @click="open = false" @focus="open = true"
|
||||
@focusout="open = false">Sign Out</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user