From a80d3b060faad61f625776e23739f4b2837927c5 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sat, 19 Dec 2020 15:10:31 +0100
Subject: [PATCH] profile actions dropdown

---
 src/components/Dashboard.svelte | 44 +++++++++++++++++++--------------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/components/Dashboard.svelte b/src/components/Dashboard.svelte
index 078316ce..497087a1 100644
--- a/src/components/Dashboard.svelte
+++ b/src/components/Dashboard.svelte
@@ -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>