Simplify side navigation; add dark mode support (#1846)

* Minifiy logo, inherit color - Inherit the current color for the logo - Run logo through svgo * Add currentColor as a supported color * Add additional transition properties, inverse surface * Simplify nav-container and nav-row * Simplify side-nav * Remove externalLink prop * Use CSS grid for navigation Animate caret, make minor tweaks and improvements * Rename files * Adjust borders for side and top navigation Based on @tigernaut's designs * Minifiy logo, inherit color - Inherit the current color for the logo - Run logo through svgo * Add currentColor as a supported color * Add additional transition properties, inverse surface * Simplify nav-container and nav-row * Simplify side-nav * Remove externalLink prop * Use CSS grid for navigation Animate caret, make minor tweaks and improvements * Rename files * Adjust borders for side and top navigation Based on @tigernaut's designs * Allow passing in a `external` prop, support animated batch icon * Update navigation-container.svelte * Remove duplicate key from a merge conflict * Update navigation-container.svelte * Center the version number
temporalio · Apr 4, 2024 · 3f48960 · 3f48960
1 parent f5488bb
commit 3f48960
Show file tree

Hide file tree

Showing 9 changed files with 144 additions and 351 deletions.
diff --git a/src/lib/components/side-nav.svelte b/src/lib/components/side-nav.svelte
@@ -2,145 +2,85 @@
   import FeatureGuard from '$lib/components/feature-guard.svelte';
   import IsCloudGuard from '$lib/components/is-cloud-guard.svelte';
   import IsLegacyCloudGuard from '$lib/components/is-legacy-cloud-guard.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
-  import NavContainer from '$lib/holocene/navigation/nav-container.svelte';
-  import NavRow from '$lib/holocene/navigation/nav-row.svelte';
-  import NavTooltip from '$lib/holocene/navigation/nav-tooltip.svelte';
+  import Navigation from '$lib/holocene/navigation/navigation-container.svelte';
+  import NavigationItem from '$lib/holocene/navigation/navigation-item.svelte';
   import { translate } from '$lib/i18n/translate';
   import { inProgressBatchOperation } from '$lib/stores/batch-operations';
-  // import { labsMode } from '$lib/stores/labs-mode';
 
   import type { DescribeNamespaceResponse as Namespace } from '$types';
 
   export let isCloud = false;
   export let activeNamespace: Namespace;
   export let linkList: Partial<Record<string, string>>;
-
-  // $: labsHoverText = `${translate('common.labs')} ${
-  //   $labsMode
-  //     ? `${translate('common.on')} - ${translate('common.experimental')}`
-  //     : translate('common.off')
-  // }`;
-  // $: labsText = `${translate('common.labs')} ${
-  //   $labsMode ? translate('common.on') : translate('common.off')
-  // }`;
 </script>
 
-<NavContainer {isCloud} {linkList} aria-label={translate('common.primary')}>
+<Navigation {isCloud} {linkList} aria-label={translate('common.primary')}>
   <svelte:fragment slot="top">
-    <NavRow link={linkList.workflows} {isCloud} data-testid="workflows-button">
-      <NavTooltip text={translate('common.workflows')}>
-        <div class="nav-icon">
-          <Icon name="workflow" />
-        </div>
-      </NavTooltip>
-      <div class="nav-title">{translate('common.workflows')}</div>
-    </NavRow>
+    <NavigationItem
+      link={linkList.workflows}
+      data-testid="workflows-button"
+      label={translate('common.workflows')}
+      icon="workflow"
+    />
     <IsCloudGuard {isCloud}>
       <FeatureGuard
         enabled={Boolean(activeNamespace?.namespaceInfo?.supportsSchedules)}
       >
-        <NavRow
+        <NavigationItem
           link={linkList.schedules}
-          {isCloud}
           data-testid="schedules-button"
-        >
-          <NavTooltip text={translate('common.schedules')}>
-            <div class="nav-icon">
-              <Icon name="schedules" height={25} width={24} />
-            </div>
-          </NavTooltip>
-          <div class="nav-title">{translate('common.schedules')}</div>
-        </NavRow>
+          label={translate('common.schedules')}
+          icon="schedules"
+        />
       </FeatureGuard>
     </IsCloudGuard>
     <slot name="top" />
     <IsCloudGuard {isCloud}>
-      <NavRow link={linkList.archive} {isCloud} data-testid="archive-button">
-        <NavTooltip text={translate('common.archive')}>
-          <div class="nav-icon">
-            <Icon name="archives" />
-          </div>
-        </NavTooltip>
-        <div class="nav-title">{translate('common.archive')}</div>
-      </NavRow>
+      <NavigationItem
+        link={linkList.archive}
+        data-testid="archive-button"
+        label={translate('common.archive')}
+        icon="archives"
+      />
     </IsCloudGuard>
-    <NavRow link={linkList.batchOperations} {isCloud}>
-      <NavTooltip text={translate('batch.list-page-title')}>
-        <div class="nav-icon">
-          <Icon name="batch-operation" animate={$inProgressBatchOperation} />
-        </div>
-      </NavTooltip>
-      <div class="nav-title">{translate('batch.nav-title')}</div>
-    </NavRow>
+    <NavigationItem
+      link={linkList.batchOperations}
+      label={translate('batch.nav-title')}
+      tooltip={translate('batch.list-page-title')}
+      icon="batch-operation"
+      animate={!!$inProgressBatchOperation}
+    />
   </svelte:fragment>
   <svelte:fragment slot="middle">
     <IsLegacyCloudGuard {isCloud}>
-      <NavRow
+      <NavigationItem
         link={linkList.namespaces}
-        {isCloud}
         data-testid="namespaces-button"
-      >
-        <NavTooltip text={translate('common.namespaces')}>
-          <div class="nav-icon">
-            <Icon name="namespace" />
-          </div>
-        </NavTooltip>
-        <div class="nav-title">{translate('common.namespaces')}</div>
-      </NavRow>
+        label={translate('common.namespaces')}
+        icon="namespace"
+      />
     </IsLegacyCloudGuard>
     <slot name="middle" />
   </svelte:fragment>
   <svelte:fragment slot="bottom">
     <slot name="bottom" />
     <slot name="import">
       <IsCloudGuard {isCloud}>
-        <NavRow link={linkList.import} {isCloud} data-testid="import-button">
-          <NavTooltip text={translate('common.import')}>
-            <div class="nav-icon">
-              <Icon name="import" />
-            </div>
-          </NavTooltip>
-          <div class="nav-title">{translate('common.import')}</div>
-        </NavRow>
+        <NavigationItem
+          link={linkList.import}
+          data-testid="import-button"
+          label={translate('common.import')}
+          icon="import"
+        />
       </IsCloudGuard>
     </slot>
     <slot name="feedback">
-      <NavRow link={linkList.feedback} {isCloud} externalLink>
-        <NavTooltip text={translate('common.feedback')}>
-          <div class="nav-icon">
-            <Icon name="feedback" />
-          </div>
-        </NavTooltip>
-        <div class="nav-title">{translate('common.feedback')}</div>
-      </NavRow>
+      <NavigationItem
+        link={linkList.feedback}
+        label={translate('common.feedback')}
+        icon="feedback"
+        external
+      />
     </slot>
-    <!-- <NavRow {isCloud} handleClick={() => ($labsMode = !$labsMode)}>
-      <NavTooltip right text={labsHoverText}>
-        <div class="nav-icon">
-          <Icon name="labs" active={$labsMode} />
-        </div>
-      </NavTooltip>
-      <div class="nav-title flex flex-col leading-3">
-        <div>{labsText}</div>
-        {#if $labsMode}
-          <p class="text-[12px]">
-            {translate('common.experimental')}
-          </p>
-        {/if}
-      </div>
-    </NavRow> -->
   </svelte:fragment>
-</NavContainer>
-
-<style lang="postcss">
-  .nav-icon {
-    @apply ml-2 mr-2 mt-0 h-6 cursor-pointer;
-  }
-
-  .nav-title {
-    width: 100px;
-    overflow: hidden;
-    transition: width 0.15s linear;
-  }
-</style>
+</Navigation>
diff --git a/src/lib/holocene/logo.svelte b/src/lib/holocene/logo.svelte
@@ -1,35 +1,25 @@
 <script lang="ts">
   import type { SVGAttributes } from 'svelte/elements';
 
+  import { twMerge as merge } from 'tailwind-merge';
+
   interface $$Props extends SVGAttributes<SVGElement> {
     width?: string;
     height?: string;
-    isCloud: boolean;
-    title?: string;
   }
+
   export let width = '100px';
   export let height = '100px';
-  export let isCloud: boolean;
-  export let title = '';
-
-  let stroke = isCloud ? 'black' : 'white';
 </script>
 
 <svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 100 100"
   {width}
   {height}
-  viewBox="0 0 100 100"
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  version="1.1"
-  role="img"
+  class={merge('fill-current stroke-current', $$restProps.class)}
 >
-  <title>{title}</title>
-  <!-- Generated by Pixelmator Pro 2.1.3 -->
   <path
-    id="Path"
-    d="M65.816 34.224 C63.684 18.251 58.288 4.917 49.999 4.917 41.711 4.917 36.314 18.251 34.182 34.224 18.208 36.357 4.874 41.753 4.874 50.042 4.874 58.33 18.211 63.727 34.182 65.859 36.314 81.83 41.711 95.167 49.999 95.167 58.288 95.167 63.684 81.83 65.816 65.859 81.79 63.727 95.124 58.33 95.124 50.042 95.124 41.753 81.788 36.357 65.816 34.224 Z M33.661 61.206 C18.363 58.997 9.44 53.939 9.44 50.042 9.44 46.144 18.363 41.087 33.661 38.877 33.324 42.56 33.149 46.319 33.149 50.042 33.149 53.764 33.324 57.526 33.661 61.206 Z M49.999 9.483 C53.897 9.483 58.954 18.405 61.164 33.703 57.483 33.367 53.721 33.191 49.999 33.191 46.277 33.191 42.515 33.367 38.835 33.703 41.044 18.405 46.102 9.483 49.999 9.483 Z M66.338 61.206 C65.585 61.316 62.496 61.678 61.715 61.755 61.638 62.539 61.273 65.625 61.166 66.378 58.956 81.676 53.899 90.598 50.001 90.598 46.104 90.598 41.047 81.676 38.837 66.378 38.73 65.625 38.365 62.536 38.288 61.755 37.932 58.129 37.717 54.234 37.717 50.042 37.717 45.85 37.932 41.954 38.288 38.326 41.914 37.97 45.809 37.755 50.001 37.755 54.194 37.755 58.089 37.97 61.715 38.326 62.499 38.403 65.585 38.767 66.338 38.875 81.636 41.085 90.56 46.144 90.56 50.039 90.56 53.935 81.636 58.997 66.338 61.206 Z"
-    {stroke}
-    fill={stroke}
+    d="M66 34C64 18 58 5 50 5S36 18 34 34C18 36 5 42 5 50s13 14 29 16c2 16 8 29 16 29s14-13 16-29c16-2 29-8 29-16S82 36 66 34ZM34 61C18 59 9 54 9 50s9-9 25-11a123 123 0 0 0 0 22ZM50 9c4 0 9 9 11 25a123 123 0 0 0-22 0c2-16 7-25 11-25Zm16 52-4 1-1 4c-2 16-7 25-11 25s-9-9-11-25a218 218 0 0 1-1-16V38a120 120 0 0 1 28 1c16 2 25 7 25 11s-9 9-25 11Z"
   />
 </svg>
diff --git a/src/lib/holocene/navigation/nav-container.svelte b/src/lib/holocene/navigation/nav-container.svelte