refactor(bridge-ui-v2): menu changes (#14085)

taikoxyz · Jul 3, 2023 · c64ca93 · c64ca93
1 parent b39b328
commit c64ca93
Show file tree

Hide file tree

Showing 7 changed files with 207 additions and 110 deletions.
diff --git a/packages/bridge-ui-v2/package.json b/packages/bridge-ui-v2/package.json
@@ -25,7 +25,7 @@
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "autoprefixer": "^10.4.14",
-    "daisyui": "3.1.1",
+    "daisyui": "3.1.7",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",

diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte
@@ -12,7 +12,8 @@
   class="
     f-between-center
     py-[20px] 
-    px-4 border-b 
+    px-4 
+    border-b 
     border-b-divider-border 
     md:border-b-0 
     md:px-10 md:py-7 

diff --git a/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte b/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte
@@ -5,15 +5,14 @@
   export let href = '/';
   export let external = false;
 
-  $: activeClass = active ? 'bg-primary-interactive hover:bg-primary-interactive-hover' : '';
+  $: activeClass = active
+    ? 'body-bold bg-primary-interactive hover:bg-primary-interactive-hover'
+    : 'body-regular hover:bg-secondary-interactive-hover';
 </script>
 
 <a
   {href}
   target={external ? '_blank' : null}
-  class={classNames(
-    'btn btn-sm md:btn-md btn-ghost p-3 rounded-full body-bold flex justify-start content-center',
-    activeClass,
-  )}>
+  class={classNames('p-3 rounded-full flex justify-start content-center', activeClass)}>
   <slot />
 </a>
diff --git a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
@@ -12,66 +12,91 @@
   import { LinkButton } from '../LinkButton';
   import { LogoWithText } from '../Logo';
 
+  let drawerToggleElem: HTMLInputElement;
+
   $: isBridgePage = $page.route.id === '/';
   $: isFaucetPage = $page.route.id === '/faucet';
   $: isActivitiesPage = $page.route.id === '/activities';
+
+  function closeDrawer() {
+    drawerToggleElem.checked = false;
+  }
+
+  function onMenuKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape' || event.key === 'Enter') {
+      closeDrawer();
+    }
+  }
 </script>
 
-<div class="drawer md:drawer-open">
-  <input id={drawerToggleId} type="checkbox" class="drawer-toggle" />
+<div class="drawer md:drawer-open overflow-hidden">
+  <input id={drawerToggleId} type="checkbox" class="drawer-toggle" bind:this={drawerToggleElem} />
 
   <div class="drawer-content">
     <slot />
   </div>
 
-  <div class="drawer-side z-1 bg-primary-background">
-    <label for={drawerToggleId} class="drawer-overlay bg-overlay-background" />
+  <div class="drawer-side h-full">
+    <label for={drawerToggleId} class="drawer-overlay" />
+
+    <!--
+      Slow transitions can be pretty annoying after a while.
+      Let's reduce it to 100ms for a better experience.
+    -->
+    <div class="w-h-full !duration-100">
+      <header class="flex justify-end py-[20px] px-4 md:hidden">
+        <button on:click={closeDrawer} class="h-9">
+          <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
+        </button>
+      </header>
 
-    <aside
-      class="
-      p-2 
-      w-[226px] 
-      h-full
-      md:px-4 
-      md:py-8 
-      md:border-r 
-      md:border-r-divider-border">
-      <a href="/" class="hidden md:inline-block">
-        <LogoWithText />
-      </a>
+      <aside
+        class="
+        h-full
+        px-[20px]
+        md:mt-0
+        md:px-4
+        md:py-8
+        md:w-[226px]
+        md:border-r
+        md:border-r-divider-border">
+        <a href="/" class="hidden md:inline-block">
+          <LogoWithText />
+        </a>
 
-      <ul class="menu md:pt-10 space-y-2">
-        <li>
-          <LinkButton active={isBridgePage}>
-            <Icon type="bridge" fillClass="fill-white" />
-            <span>{$t('nav.bridge')}</span>
-          </LinkButton>
-        </li>
-        <li>
-          <LinkButton href="/faucet" active={isFaucetPage}>
-            <Icon type="faucet" />
-            <span>{$t('nav.faucet')}</span>
-          </LinkButton>
-        </li>
-        <li>
-          <LinkButton href="/activities" active={isActivitiesPage}>
-            <Icon type="activities" />
-            <span>{$t('nav.activities')}</span>
-          </LinkButton>
-        </li>
-        <li>
-          <LinkButton href={PUBLIC_L2_EXPLORER_URL} external>
-            <Icon type="explorer" />
-            <span>{$t('nav.explorer')}</span>
-          </LinkButton>
-        </li>
-        <li>
-          <LinkButton href={PUBLIC_GUIDE_URL} external>
-            <Icon type="guide" />
-            <span>{$t('nav.guide')}</span>
-          </LinkButton>
-        </li>
-      </ul>
-    </aside>
+        <ul class="menu p-0 md:pt-10 space-y-2" on:click={closeDrawer} on:keydown={onMenuKeydown}>
+          <li>
+            <LinkButton active={isBridgePage}>
+              <Icon type="bridge" fillClass="fill-white" />
+              <span>{$t('nav.bridge')}</span>
+            </LinkButton>
+          </li>
+          <li>
+            <LinkButton href="/faucet" active={isFaucetPage}>
+              <Icon type="faucet" />
+              <span>{$t('nav.faucet')}</span>
+            </LinkButton>
+          </li>
+          <li>
+            <LinkButton href="/activities" active={isActivitiesPage}>
+              <Icon type="activities" />
+              <span>{$t('nav.activities')}</span>
+            </LinkButton>
+          </li>
+          <li>
+            <LinkButton href={PUBLIC_L2_EXPLORER_URL} external>
+              <Icon type="explorer" />
+              <span>{$t('nav.explorer')}</span>
+            </LinkButton>
+          </li>
+          <li>
+            <LinkButton href={PUBLIC_GUIDE_URL} external>
+              <Icon type="guide" />
+              <span>{$t('nav.guide')}</span>
+            </LinkButton>
+          </li>
+        </ul>
+      </aside>
+    </div>
   </div>
 </div>
diff --git a/packages/bridge-ui-v2/src/styles/override.css b/packages/bridge-ui-v2/src/styles/override.css
@@ -12,3 +12,12 @@ input::-webkit-inner-spin-button {
 input[type='number'] {
   -moz-appearance: textfield;
 }
+
+/**
+ * Overrides the dafault color for the overlay component used 
+ * in DaisyUI's drawer. Unfortunately cannot be done via variables
+ */
+.drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
+  /* Primary background: '#0B101B' => grey-900 */
+  background-color: hsl(221, 42%, 7%);
+}
diff --git a/packages/bridge-ui-v2/src/styles/utilities.css b/packages/bridge-ui-v2/src/styles/utilities.css
@@ -13,6 +13,10 @@
     @apply hidden md:inline-block;
   }
 
+  .w-h-full {
+    @apply w-full h-full;
+  }
+
   /* Flex shortcuts */
   .f-between-center {
     @apply flex justify-between items-center;