feat(menu): add usermenu component

jwplayer · Jul 22, 2021 · 101f4f9 · 101f4f9
1 parent a65552b
commit 101f4f9
Show file tree

Hide file tree

Showing 7 changed files with 228 additions and 1 deletion.
diff --git a/src/components/UserMenu/UserMenu.module.scss b/src/components/UserMenu/UserMenu.module.scss
@@ -0,0 +1,42 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+
+.panel {
+  width: 100%;
+  height: 100%;
+  padding: variables.$base-spacing 0;
+  font-weight: normal;
+  font-size: 16px;
+  font-style: normal;
+  line-height: 18px;
+  letter-spacing: 0.15px;
+  background: theme.$modal-bg;
+  box-shadow: theme.$panel-box-shadow;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+ul > li > a {
+  padding: 0 18px;
+  font-size: 16px;
+}
+
+.button {
+  margin-bottom: variables.$base-spacing;
+}
+
+.divider {
+  vertical-align: baseline;
+  background: transparent;
+  border: 0;
+  border-top: 1px solid rgba(variables.$white, 0.12);
+
+  &.inPopover {
+    margin: variables.$base-spacing;
+    border-top: 1px solid rgba(255, 255, 255, 0.32);
+  }
+}
diff --git a/src/components/UserMenu/UserMenu.test.tsx b/src/components/UserMenu/UserMenu.test.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { render } from '../../testUtils';
+
+import UserMenu from './UserMenu';
+
+describe('<UserMenu>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<UserMenu />);
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/UserMenu/UserMenu.tsx b/src/components/UserMenu/UserMenu.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+
+import AccountCircle from '../../icons/AccountCircle';
+import Favorite from '../../icons/Favorite';
+import BalanceWallet from '../../icons/BalanceWallet';
+import Exit from '../../icons/Exit';
+import MenuButton from '../MenuButton/MenuButton';
+
+import styles from './UserMenu.module.scss';
+
+type Props = {
+  inPopover?: boolean;
+};
+
+const UserMenu = ({ inPopover = false }: Props) => {
+  const { t } = useTranslation('user');
+
+  const menuItems = (
+    <ul>
+      <li>
+        <MenuButton small={inPopover} to="/u/my-account" label={t('nav.account')} startIcon={<AccountCircle />} />
+      </li>
+      <li>
+        <MenuButton small={inPopover} to="/u/favorites" label={t('nav.favorites')} startIcon={<Favorite />} />
+      </li>
+      <li>
+        <MenuButton small={inPopover} to="/u/payments" label={t('nav.payments')} startIcon={<BalanceWallet />} />
+      </li>
+      <hr className={classNames(styles.divider, { [styles.inPopover]: inPopover })} />
+      <li>
+        <MenuButton small={inPopover} to="/u/logout" label={t('nav.logout')} startIcon={<Exit />} />
+      </li>
+    </ul>
+  );
+
+  if (inPopover) {
+    return <nav className={styles.panel}>{menuItems}</nav>;
+  }
+
+  return menuItems;
+};
+
+export default UserMenu;
diff --git a/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap b/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap
@@ -0,0 +1,123 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<UserMenu> renders and matches snapshot 1`] = `
+<div>
+  <ul>
+    <li>
+      <a
+        class="menuButton"
+        href="/u/my-account"
+        tabindex="0"
+      >
+        <div
+          class="startIcon"
+        >
+          <svg
+            aria-hidden="true"
+            class="icon"
+            focusable="false"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g>
+              <path
+                d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"
+              />
+            </g>
+          </svg>
+        </div>
+        <span>
+          nav.account
+        </span>
+      </a>
+    </li>
+    <li>
+      <a
+        class="menuButton"
+        href="/u/favorites"
+        tabindex="0"
+      >
+        <div
+          class="startIcon"
+        >
+          <svg
+            aria-hidden="true"
+            class="icon"
+            focusable="false"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g>
+              <path
+                d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
+              />
+            </g>
+          </svg>
+        </div>
+        <span>
+          nav.favorites
+        </span>
+      </a>
+    </li>
+    <li>
+      <a
+        class="menuButton"
+        href="/u/payments"
+        tabindex="0"
+      >
+        <div
+          class="startIcon"
+        >
+          <svg
+            aria-hidden="true"
+            class="icon"
+            focusable="false"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g>
+              <path
+                d="M5,3C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V16.72C21.59,16.37 22,15.74 22,15V9C22,8.26 21.59,7.63 21,7.28V5A2,2 0 0,0 19,3H5M5,5H19V7H13A2,2 0 0,0 11,9V15A2,2 0 0,0 13,17H19V19H5V5M13,9H20V15H13V9M16,10.5A1.5,1.5 0 0,0 14.5,12A1.5,1.5 0 0,0 16,13.5A1.5,1.5 0 0,0 17.5,12A1.5,1.5 0 0,0 16,10.5Z"
+              />
+            </g>
+          </svg>
+        </div>
+        <span>
+          nav.payments
+        </span>
+      </a>
+    </li>
+    <hr
+      class="divider"
+    />
+    <li>
+      <a
+        class="menuButton"
+        href="/u/logout"
+        tabindex="0"
+      >
+        <div
+          class="startIcon"
+        >
+          <svg
+            aria-hidden="true"
+            class="icon"
+            focusable="false"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g>
+              <path
+                d="M19,3H5C3.89,3 3,3.89 3,5V9H5V5H19V19H5V15H3V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10.08,15.58L11.5,17L16.5,12L11.5,7L10.08,8.41L12.67,11H3V13H12.67L10.08,15.58Z"
+              />
+            </g>
+          </svg>
+        </div>
+        <span>
+          nav.logout
+        </span>
+      </a>
+    </li>
+  </ul>
+</div>
+`;
diff --git a/src/i18n/locales/en_US/menu.json b/src/i18n/locales/en_US/menu.json
@@ -1,4 +1,5 @@
 {
   "close_menu": "Close menu",
-  "open_menu": "Open menu"
+  "open_menu": "Open menu",
+  "open_user_menu": "Open user menu"
 }
diff --git a/src/screens/User/User.module.scss b/src/screens/User/User.module.scss
@@ -37,6 +37,7 @@ ul {
 .button {
   margin-bottom: variables.$base-spacing;
 }
+
 .logoutLi {
   margin-bottom: 0;
   padding-top: variables.$base-spacing;

diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts
@@ -4,10 +4,12 @@ type UIStore = {
   blurImage: string;
   searchQuery: string;
   searchActive: boolean;
+  userMenuOpen: boolean;
 };
 
 export const UIStore = new Store<UIStore>({
   blurImage: '',
   searchQuery: '',
   searchActive: false,
+  userMenuOpen: false,
 });