Dropdown and Menu styling

MuckRock · Apr 3, 2024 · b2ad7ba · b2ad7ba
1 parent c3ca931
commit b2ad7ba
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 16 deletions.
diff --git a/src/common/Dropdown2.svelte b/src/common/Dropdown2.svelte
@@ -133,8 +133,9 @@
   .title {
     display: block;
     cursor: pointer;
-    padding: 0.5rem;
-    border-radius: var(--radius);
+    padding: 0.25rem;
+    color: var(--gray-5);
+    fill: var(--gray-4);
   }
   .title.border {
     border: 1px solid rgba(0, 0, 0, 0.1);

diff --git a/src/common/Menu.svelte b/src/common/Menu.svelte
@@ -2,18 +2,22 @@
   <slot>Define some menu items</slot>
 </div>
 
-<style lang="scss">
+<style>
   .menu {
-    @include menu;
-
-    border: 1px solid #cdcdcd;
-    padding: 7px 0;
-
-    :global(.small) {
-      color: $gray;
-      font-size: 11px;
-      text-transform: uppercase;
-      margin: 3px 0 0 0;
-    }
+    display: flex;
+    flex-direction: column;
+    margin-top: 0.25rem;
+    background: var(--white, #ffffff);
+    border-radius: 0.5rem;
+    border: 1px solid var(--gray-1);
+    box-shadow: var(--shadow);
+    padding: 0.5rem;
+    gap: 0.25rem;
+  }
+  :global(.menu.small) {
+    color: var(--gray-3);
+    font-size: 11px;
+    text-transform: uppercase;
+    margin: 3px 0 0 0;
   }
 </style>
diff --git a/src/lib/components/accounts/UserMenu.svelte b/src/lib/components/accounts/UserMenu.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { _ } from "svelte-i18n";
+  import Dropdown, { closeDropdown } from "@/common/Dropdown2.svelte";
+  import SidebarItem from "../sidebar/SidebarItem.svelte";
+  import type { User } from "@/api/types";
+  import {
+    ChevronDown16,
+    Gear16,
+    Paperclip16,
+    SignOut16,
+  } from "svelte-octicons";
+  import Menu from "@/common/Menu.svelte";
+
+  import {
+    DC_BASE,
+    DC_LOGIN,
+    SQUARELET_BASE,
+    SQUARELET_SIGNUP,
+    DC_LOGOUT,
+  } from "@/config/config.js";
+
+  export const SQUARELET_URL = SQUARELET_BASE;
+  export const SIGN_IN_URL = DC_BASE + DC_LOGIN;
+  export const SIGN_UP_URL =
+    SQUARELET_BASE +
+    SQUARELET_SIGNUP +
+    encodeURIComponent(window.location.href);
+  export const SIGN_OUT_URL = DC_BASE + DC_LOGOUT;
+
+  export let user: User;
+
+  const dropdownId = "user-menu";
+  function close() {
+    closeDropdown(dropdownId);
+  }
+</script>
+
+<Dropdown id={dropdownId} position="right">
+  <SidebarItem slot="title">
+    <img src={user.avatar_url} alt="Avatar" class="avatar" />
+    {user.name}
+    <div class="dropdownArrow"><ChevronDown16 /></div>
+  </SidebarItem>
+  <Menu>
+    <SidebarItem href={SQUARELET_URL} target="_blank" on:click={close}>
+      <Gear16 />
+      {$_("authSection.user.acctSettings")}
+    </SidebarItem>
+    <!-- TODO mailkey page -->
+    <SidebarItem hover on:click={close}>
+      <Paperclip16 />
+      {$_("authSection.user.uploadEmail")}
+    </SidebarItem>
+    <SidebarItem href={SIGN_OUT_URL} on:click={close}>
+      <SignOut16 />
+      {$_("authSection.user.signOut")}
+    </SidebarItem>
+  </Menu>
+</Dropdown>
+
+<style>
+  .avatar {
+    height: 1.5rem;
+    width: 1.5rem;
+    border-radius: 0.75rem;
+  }
+
+  .dropdownArrow {
+    display: flex;
+    align-items: center;
+  }
+</style>
diff --git a/src/lib/components/sidebar/SidebarItem.svelte b/src/lib/components/sidebar/SidebarItem.svelte
@@ -39,14 +39,16 @@
     border-radius: 0.25rem;
     border: none;
 
-    color: var(--gray-5, #233944);
-    fill: var(--gray-5, #233944);
+    color: inherit;
+    fill: inherit;
     background: transparent;
 
     font-family: var(--font-sans, "Source Sans Pro");
     font-size: var(--font-m, 1rem);
     font-weight: var(--font-semibold, 600);
     text-decoration: none;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   /* Hover */