From 443e2ae98f0fbbb8b74a0674397650fa83ffa34b Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Sun, 28 Apr 2024 20:41:24 -0700
Subject: [PATCH] chore: move sidebar icons to only root level

---
 src/components/Navigation.module.css |  1 -
 src/components/Navigation.tsx        | 23 +++++---
 src/lib/navigation.ts                | 86 +++++-----------------------
 3 files changed, 29 insertions(+), 81 deletions(-)

diff --git a/src/components/Navigation.module.css b/src/components/Navigation.module.css
index 62f0625d..c735b468 100644
--- a/src/components/Navigation.module.css
+++ b/src/components/Navigation.module.css
@@ -2,7 +2,6 @@
   display: flex;
   width: 100%;
   align-items: center;
-  justify-content: space-between;
   border-radius: 0.375rem;
   text-align: left;
   line-height: 1.5;
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 2ad85aa1..09580a7a 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -35,12 +35,9 @@ function ItemLink({
       onClick={item.href ? onLinkClick : undefined}
       className={clsx(styles.item, className, isSelected && styles.selected)}
     >
-      <NavIcon
-        icon={item.icon}
-        aria-hidden="true"
-        className="ml-1 fill-inherit stroke-inherit text-inherit"
-      />
-      {item.title}
+      <span className="ml-6">
+        {item.title}
+      </span>
     </Link>
   )
 }
@@ -59,12 +56,17 @@ export function Navigation({
         <Link
           href="/quickstart"
           className={clsx(
-            'flex w-full items-center justify-between rounded-md pb-1 text-left leading-6',
+            'flex w-full items-center rounded-md pb-1 text-left leading-6',
             pathname.includes('/quickstart')
               ? 'text-sky-500'
               : 'hover:text-gray-900 dark:hover:text-gray-300',
           )}
         >
+          <NavIcon
+            icon={"home"}
+            aria-hidden="true"
+            className="ml-1 fill-inherit stroke-inherit text-inherit"
+          />
           Quickstart Guide
         </Link>
         {navigation.map((section) => {
@@ -84,6 +86,11 @@ export function Navigation({
                         section.href !== '' && pathname.includes(section.href),
                       )}
                     >
+                      <NavIcon
+                        icon={section.icon}
+                        aria-hidden="true"
+                        className="ml-1 fill-inherit stroke-inherit text-inherit"
+                      />
                       {section.title}
                       <Icon
                         icon="chevron"
@@ -91,7 +98,7 @@ export function Navigation({
                           open
                             ? 'rotate-90 '
                             : 'text-gray-600 dark:text-gray-400',
-                          'w-5 shrink-0',
+                          'ml-auto w-5 shrink-0',
                           pathname.includes(section.href) &&
                             'text-gray-900 dark:text-gray-200',
                         )}
diff --git a/src/lib/navigation.ts b/src/lib/navigation.ts
index 4d8ceb34..a3870543 100644
--- a/src/lib/navigation.ts
+++ b/src/lib/navigation.ts
@@ -12,131 +12,114 @@ export const navigation: NavigationItem[] = [
   {
     title: 'Intro to time travel',
     href: '/time-travel-intro',
+    icon: "hourglass",
     links: [
       {
         title: 'Why time travel?',
         href: '/time-travel-intro/why-time-travel',
-        icon: 'hourglass',
       },
       {
         title: 'Add console logs on the fly',
         href: '/time-travel-intro/add-console-logs-on-the-fly',
-        icon: 'console',
       },
       {
         title: 'Visualize time. Inspect state.',
         href: '/time-travel-intro/visualize-time-inspect-state',
-        icon: 'inspect',
       },
       {
         title: 'Annotate the timeline',
         href: '/time-travel-intro/annotate-the-timeline',
-        icon: 'pencil',
       },
       {
         title: 'Bisect the problem',
         href: '/time-travel-intro/bisect-the-problem',
-        icon: 'razor',
       },
       {
         title: 'What is time travel?',
         href: '/time-travel-intro/what-is-time-travel',
-        icon: 'questionmark',
       },
     ],
   },
   {
     title: 'Browser DevTools',
     href: '/browser-devtools',
+    icon: "browserdevtools",
     links: [
       {
         title: 'Elements Panel',
         href: '/browser-devtools/elements-panel',
-        icon: 'inspect',
       },
       {
         title: 'Network Monitor',
         href: '/browser-devtools/network-monitor',
-        icon: 'rocket',
       },
       {
         title: 'Console Panel',
         href: '/browser-devtools/console',
-        icon: 'console',
       },
 
       {
         title: 'Source Viewer',
         href: '/browser-devtools/source-viewer',
-        icon: 'folder',
       },
 
       {
         title: 'Pause Panel',
         href: '/browser-devtools/pause-panel',
-        icon: 'pause',
       },
       {
         title: 'Replay Viewer',
         href: '/browser-devtools/replay-viewer',
-        icon: 'video',
       },
     ],
   },
   {
     title: 'Framework DevTools',
     href: '/devtools',
+    icon: "frameworks",
     links: [
       {
         title: 'React Panel',
         href: '/framework-devtools/react-panel',
-        icon: 'react',
       },
       {
         title: 'Redux Panel',
         href: '/framework-devtools/redux-panel',
-        icon: 'redux',
       },
       {
         title: 'Cypress Timeline',
         href: '/framework-devtools/cypress-timeline',
-        icon: 'cypress',
       },
       {
         title: 'Playwright Timeline',
         href: '/framework-devtools/playwright-timeline',
-        icon: 'playwright',
       },
     ],
   },
   {
     title: 'Replay Test Suites',
     href: '/test-suites',
+    icon: "replay",
     links: [
       {
         title: 'Recent runs ',
         href: '/test-suites/runs-view',
-        icon: 'runsview',
       },
       {
         title: 'Top Failing And Flaky Tests',
         href: '/test-suites/top-failing-and-flaky-tests',
-        icon: 'sort',
       },
       {
         title: 'PR Comments',
         href: '/test-suites/pr-comments',
-        icon: 'pullrequest',
       },
       // {
       //   title: 'Analytics',
       //   href: '/test-suites/analytics',
-      //   icon: 'analytics',
       // },
       // {
       //   title: 'Test Flake Detection',
       //   href: '/test-suites/test-flake-detection',
-      //   icon: 'flake',
       // },
     ],
   },
@@ -144,119 +127,100 @@ export const navigation: NavigationItem[] = [
     title: 'Test Runners',
     href: '/test-runners',
     omitFromDocumentTitle: true,
+    icon: "otherciproviders",
     links: [
-      { title: 'Overview', href: '/test-runners/overview', icon: 'overview' },
+      { title: 'Overview', href: '/test-runners/overview' },
       {
         title: 'Cypress.io',
         href: '/test-runners/cypress-io',
-        icon: 'cypress',
         links: [
           {
             title: 'Getting started',
             href: '/test-runners/cypress-io',
-            icon: 'rocket',
           },
           {
             title: 'Record your first replay',
             href: '/test-runners/cypress-io/record-your-first-replay',
-            icon: 'record',
           },
           {
             title: 'Debugging tests',
             href: '/test-runners/cypress-io/debugging-tests',
-            icon: 'debuggingtests',
           },
           {
             title: 'Recording options',
             href: '/test-runners/cypress-io/recording-options',
-            icon: 'settings',
           },
           {
             title: 'GitHub actions',
             href: '/test-runners/cypress-io/github-actions',
-            icon: 'githubembeds',
           },
           {
             title: 'Other CI providers',
             href: '/test-runners/cypress-io/other-ci-providers',
-            icon: 'otherciproviders',
           },
           {
             title: 'FAQ',
             href: '/test-runners/cypress-io/faq',
-            icon: 'faq',
           },
         ],
       },
       {
         title: 'Playwright',
         href: '/test-runners/playwright/record-your-first-replay',
-        icon: 'playwright',
         links: [
           {
             title: 'Record your first replay',
             href: '/test-runners/playwright/record-your-first-replay',
-            icon: 'record',
           },
           {
             title: 'Debugging tests',
             href: '/test-runners/playwright/debugging-tests',
-            icon: 'debuggingtests',
           },
           {
             title: 'GitHub actions',
             href: '/test-runners/playwright/github-actions',
-            icon: 'githubembeds',
           },
           {
             title: 'Other CI providers',
             href: '/test-runners/playwright/other-ci-providers',
-            icon: 'otherciproviders',
           },
           {
             title: 'FAQ',
             href: '/test-runners/playwright/faq',
-            icon: 'faq',
           },
         ],
       },
-      { title: 'Selenium', href: '/test-runners/selenium', icon: 'selenium' },
+      { title: 'Selenium', href: '/test-runners/selenium' },
       {
         title: 'WebdriverIO',
         href: '/test-runners/webdriver-io',
-        icon: 'webdriverio',
       },
       {
         title: 'Puppeteer',
         href: '/test-runners/puppeteer',
-        icon: 'puppeteer',
       },
     ],
   },
-
   {
     title: 'CI Workflows',
     href: '/ci-workflows',
+    icon: "settings",
     links: [
       // {
       //   title: 'Setting up',
       //   href: '/ci-workflows/setting-up',
-      //   icon: 'wrench',
       // },
       {
         title: 'Generate API key',
         href: '/ci-workflows/generate-api-key',
-        icon: 'key',
       },
       {
         title: 'Recording strategies',
         href: '/ci-workflows/recording-strategies',
-        icon: 'strategy',
       },
       {
         title: 'Upload strategies',
         href: '/ci-workflows/upload-strategies',
-        icon: 'upload',
       },
     ],
   },
@@ -264,178 +228,156 @@ export const navigation: NavigationItem[] = [
   {
     title: 'Replay Teams',
     href: '/replay-teams',
+    icon: "settingupateam",
     links: [
       {
         title: 'Setting up a team',
         href: '/replay-teams/setting-up-a-team',
-        icon: 'settingupateam',
       },
       {
         title: 'Okta integration',
         href: '/replay-teams/okta-integration',
-        icon: 'oktaintegration',
       },
       {
         title: 'Enterprise security controls',
         href: '/replay-teams/enterprise-security-controls',
-        icon: 'enterprisesecuritycontrols',
       },
       {
         title: 'Managing replays',
         href: '/replay-teams/managing-replays',
-        icon: 'managingreplays',
       },
       {
         title: 'Billing',
         href: '/replay-teams/billing',
-        icon: 'billing',
       },
     ],
   },
   {
     title: 'Replay Runtimes',
     href: '/replay-runtimes',
+    icon: "runsview",
     links: [
       {
         title: 'Replay Chrome',
         href: '/replay-runtimes/replay-chrome',
-        icon: 'replaychrome',
       },
       {
         title: 'Replay Firefox',
         href: '/replay-runtimes/replay-firefox',
-        icon: 'replayfirefox',
       },
       {
         title: 'Replay Node',
         href: '/replay-runtimes/replay-node',
-        icon: 'replaynode',
       },
     ],
   },
   {
     title: 'Replay CLI',
     href: '/replay-cli',
+    icon: "cli",
     links: [
       {
         title: 'Replay CLI',
         href: '/replay-cli/commands',
-        icon: 'commands',
       },
       {
         title: 'Uploading source maps',
         href: '/replay-cli/source-maps',
-        icon: 'uploadingsourcemaps',
       },
     ],
   },
   {
     title: 'Integrations',
     href: '/integrations',
+    icon: "integrations",
     links: [
       {
         title: 'Replay APIs',
         href: '/integrations/replay-apis/graphql-api',
-        icon: 'replayapis',
         links: [
           {
             title: 'GraphQL API',
             href: '/integrations/replay-apis/graphql-api',
-            icon: 'graphqlapi',
           },
           {
             title: 'Replay Protocol',
             href: '/integrations/replay-apis/replay-protocol',
-            icon: 'replayprotocol',
           },
           {
             title: 'Replay Driver',
             href: '/integrations/replay-apis/replay-driver',
-            icon: 'replaydriver',
           },
         ],
       },
       {
         title: 'Frameworks & libraries',
         href: '/integrations/frameworks-libraries/nextjs',
-        icon: 'frameworks',
         links: [
           {
             title: 'NextJS',
             href: '/integrations/frameworks-libraries/nextjs',
-            icon: 'nextjs',
           },
         ],
       },
       {
         title: '3rd Party integrations',
         href: '/integrations/3rd-party-integrations/github-embeds',
-        icon: 'integrations',
         links: [
           {
             title: 'GitHub Embeds',
             href: '/integrations/3rd-party-integrations/github-embeds',
-            icon: 'githubembeds',
           },
           {
             title: 'Loom Embeds',
             href: '/integrations/3rd-party-integrations/loom-embeds',
-            icon: 'loomembeds',
           },
         ],
       },
     ],
   },
-
   {
     title: 'Comparisons',
     href: '/comparison',
+    icon: "sort",
     links: [
       {
         title: 'Playwright',
         href: '/comparison/playwright',
-        icon: 'playwright',
       },
       {
         title: 'Cypress',
         href: '/comparison/cypress',
-        icon: 'cypress',
       },
       {
         title: `Chrome Recorder`,
         href: '/comparison/chrome',
-        icon: 'chromerecorder',
       },
       {
         title: 'Loom',
         href: '/comparison/loom',
-        icon: 'loom',
       },
       {
         title: 'Browser DevTools',
         href: '/comparison/devtools',
-        icon: 'browserdevtools',
       },
     ],
   },
   {
     title: 'Additional content',
     href: '/additional-content',
+    icon: "university",
     links: [
       {
         title: 'Privacy principles',
         href: '/additional-content/privacy-principles',
-        icon: 'privacy',
       },
       {
         title: 'Security practices',
         href: '/additional-content/security-practices',
-        icon: 'security',
       },
       {
         title: 'Crash course',
         href: '/additional-content/crash-course',
-        icon: 'university',
       },
     ],
   },