lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

profile actions dropdown

Browse Source
This commit is contained in:
Philipp Dormann 2020-12-19 15:10:31 +01:00
parent 5499669564
commit a80d3b060f
1 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/Dashboard.svelte
View File

@ -5,6 +5,8 @@
import FormLayout from "./FormLayout.svelte";
import Tracks from "./Tracks.svelte";
import BreadcrumbNav from "./BreadcrumbNav.svelte";
//
let isProfileActionsVisible = false;
</script>
<div>
@ -96,6 +98,9 @@
<div class="ml-3 relative">
<div>
<button
on:click={() => {
isProfileActionsVisible = !isProfileActionsVisible;
}}
class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
id="user-menu"
aria-haspopup="true">
@ -116,26 +121,29 @@
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div
class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5"
role="menu"
aria-orientation="vertical"
aria-labelledby="user-menu">
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">Your Profile</a>
{#if isProfileActionsVisible}
<!-- content here -->
<div
class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5"
role="menu"
aria-orientation="vertical"
aria-labelledby="user-menu">
<a
href="/profile"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">$_('your_profile')</a>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">Settings</a>
<a
href="/profile/settings"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">$_('settings')</a>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">Sign out</a>
</div>
<a
href="/logout"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">$_('sign-out')</a>
</div>
{/if}
</div>
</div>
</div>