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 FormLayout from "./FormLayout.svelte";
import Tracks from "./Tracks.svelte"; import Tracks from "./Tracks.svelte";
import BreadcrumbNav from "./BreadcrumbNav.svelte"; import BreadcrumbNav from "./BreadcrumbNav.svelte";
//
let isProfileActionsVisible = false;
</script> </script>
<div> <div>
@ -96,6 +98,9 @@
<div class="ml-3 relative"> <div class="ml-3 relative">
<div> <div>
<button <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" 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" id="user-menu"
aria-haspopup="true"> aria-haspopup="true">
@ -116,26 +121,29 @@
From: "transform opacity-100 scale-100" From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95" To: "transform opacity-0 scale-95"
--> -->
<div {#if isProfileActionsVisible}
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" <!-- content here -->
role="menu" <div
aria-orientation="vertical" 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"
aria-labelledby="user-menu"> role="menu"
<a aria-orientation="vertical"
href="#" aria-labelledby="user-menu">
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" <a
role="menuitem">Your Profile</a> href="/profile"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">$_('your_profile')</a>
<a <a
href="#" href="/profile/settings"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">Settings</a> role="menuitem">$_('settings')</a>
<a <a
href="#" href="/logout"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">Sign out</a> role="menuitem">$_('sign-out')</a>
</div> </div>
{/if}
</div> </div>
</div> </div>
</div> </div>