35 lines
1.7 KiB
Svelte
35 lines
1.7 KiB
Svelte
|
<script lang="ts">
|
||
|
|
let loggedIn = false
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="avatarButton" type="button" data-dropdown-toggle="userDropdown" data-dropdown-placement="bottom-start" class="relative w-10 h-10 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600">
|
||
|
|
{#if loggedIn}
|
||
|
|
<img class="w-10 h-10 rounded-full cursor-pointer" src="/docs/images/people/profile-picture-5.jpg" alt="User dropdown">
|
||
|
|
{:else}
|
||
|
|
<svg class="absolute w-12 h-12 text-gray-400 -left-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Dropdown menu -->
|
||
|
|
<div id="userDropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
|
||
|
|
<div class="px-4 py-3 text-sm text-gray-900 dark:text-white">
|
||
|
|
<div>Bonnie Green</div>
|
||
|
|
<div class="font-medium truncate">name@flowbite.com</div>
|
||
|
|
</div>
|
||
|
|
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="avatarButton">
|
||
|
|
<li>
|
||
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<div class="py-1">
|
||
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign out</a>
|
||
|
|
</div>
|
||
|
|
</div>
|