Merge pull request #125 from replayio/change-sidebar-icons

chore: move sidebar icons to only root level

Author: crutchcorn

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;

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,14 +86,19 @@ 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"
                         className={clsx(
                           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',
                         )}