Merge pull request #113 from snowball-tools/ericlewis/sidebar-tabs

feat: side bar tabs + icons

packages/frontend/src/components/Sidebar.tsx

@@ -7,7 +7,14 @@ import { useDisconnect } from 'wagmi';
 
 import { useGQLClient } from '../context/GQLClientContext';
 import AsyncSelect from './shared/AsyncSelect';
-import { ChevronGrabberHorizontal, GlobeIcon } from './shared/CustomIcon';
+import {
+  ChevronGrabberHorizontal,
+  FolderIcon,
+  GlobeIcon,
+  LifeBuoyIcon,
+  QuestionMarkRoundIcon,
+  SettingsSlidersIcon,
+} from './shared/CustomIcon';
 import { Tabs } from 'components/shared/Tabs';
 
 const Sidebar = () => {
@@ -35,7 +42,7 @@ const Sidebar = () => {
   }, [disconnect, navigate]);
 
   return (
-    <div className="flex flex-col h-full p-4 mt-5">
+    <div className="flex flex-col h-full p-4 pt-5">
       <div className="grow">
         <Link to={`/${orgSlug}`}>
           <div className="flex items-center space-x-3 mb-10 ml-2">
@@ -90,11 +97,14 @@ const Sidebar = () => {
             </Option>
           ))}
         </AsyncSelect>
-        <Tabs defaultValue="Projects" orientation="vertical" className="mt-5">
+        <Tabs defaultValue="Projects" orientation="vertical" className="mt-10">
           <Tabs.List>
-            {['Projects', 'Settings'].slice(0, 2).map((title, index) => (
+            {[
+              { title: 'Projects', icon: <FolderIcon /> },
+              { title: 'Settings', icon: <SettingsSlidersIcon /> },
+            ].map(({ title, icon }, index) => (
               <NavLink to={`/${orgSlug}/${title}`} key={index}>
-                <Tabs.Trigger icon={<GlobeIcon />} value={title}>
+                <Tabs.Trigger icon={icon} value={title}>
                   {title}
                 </Tabs.Trigger>
               </NavLink>
@@ -102,7 +112,7 @@ const Sidebar = () => {
           </Tabs.List>
         </Tabs>
       </div>
-      <div className="grow flex flex-col justify-end mb-10">
+      <div className="grow flex flex-col justify-end mb-8">
         <Tabs defaultValue="Projects" orientation="vertical">
           {/* TODO: use proper link buttons */}
           <Tabs.List>
@@ -111,10 +121,10 @@ const Sidebar = () => {
                 Log Out
               </a>
             </Tabs.Trigger>
-            <Tabs.Trigger icon={<GlobeIcon />} value="">
+            <Tabs.Trigger icon={<QuestionMarkRoundIcon />} value="">
               <a className="cursor-pointer">Documentation</a>
             </Tabs.Trigger>
-            <Tabs.Trigger icon={<GlobeIcon />} value="">
+            <Tabs.Trigger icon={<LifeBuoyIcon />} value="">
               <a className="cursor-pointer">Support</a>
             </Tabs.Trigger>
           </Tabs.List>

packages/frontend/src/components/shared/CustomIcon/FolderIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const FolderIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        id="Icon"
+        d="M2.0835 4.58341V14.5834C2.0835 15.5039 2.82969 16.2501 3.75016 16.2501H16.2502C17.1706 16.2501 17.9168 15.5039 17.9168 14.5834V7.08341C17.9168 6.16294 17.1706 5.41675 16.2502 5.41675H10.8921C10.3349 5.41675 9.81449 5.13825 9.50539 4.67458L8.82827 3.65891C8.51916 3.19525 7.99878 2.91675 7.44152 2.91675H3.75016C2.82969 2.91675 2.0835 3.66294 2.0835 4.58341Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </CustomIcon>
+  );
+};

packages/frontend/src/components/shared/CustomIcon/LifeBuoyIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const LifeBuoyIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        id="Icon"
+        d="M4.5835 4.58325L7.35092 7.35068M7.35092 12.6492L4.5835 15.4166M12.6494 12.6492L15.4168 15.4166M15.4168 4.58325L12.6494 7.35068M17.9168 9.99992C17.9168 14.3722 14.3724 17.9166 10.0002 17.9166C5.62791 17.9166 2.0835 14.3722 2.0835 9.99992C2.0835 5.62766 5.62791 2.08325 10.0002 2.08325C14.3724 2.08325 17.9168 5.62766 17.9168 9.99992ZM13.7502 9.99992C13.7502 12.071 12.0712 13.7499 10.0002 13.7499C7.92909 13.7499 6.25016 12.071 6.25016 9.99992C6.25016 7.92885 7.92909 6.24992 10.0002 6.24992C12.0712 6.24992 13.7502 7.92885 13.7502 9.99992Z"
+        stroke="currentColor"
+      />
+    </CustomIcon>
+  );
+};

packages/frontend/src/components/shared/CustomIcon/QuestionMarkRoundIcon.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const QuestionMarkRoundIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <g>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.99984 2.50008C5.8577 2.50008 2.49984 5.85795 2.49984 10.0001C2.49984 14.1422 5.8577 17.5001 9.99984 17.5001C14.142 17.5001 17.4998 14.1422 17.4998 10.0001C17.4998 5.85795 14.142 2.50008 9.99984 2.50008ZM1.6665 10.0001C1.6665 5.39771 5.39746 1.66675 9.99984 1.66675C14.6022 1.66675 18.3332 5.39771 18.3332 10.0001C18.3332 14.6025 14.6022 18.3334 9.99984 18.3334C5.39746 18.3334 1.6665 14.6025 1.6665 10.0001Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.58317 6.66675C8.89281 6.66675 8.33317 7.22639 8.33317 7.91675C8.33317 8.14687 8.14662 8.33342 7.9165 8.33342C7.68639 8.33342 7.49984 8.14687 7.49984 7.91675C7.49984 6.76616 8.43258 5.83342 9.58317 5.83342H10.4869C11.5986 5.83342 12.4998 6.73462 12.4998 7.84631C12.4998 8.55337 12.1289 9.20858 11.5226 9.57236L11.0234 9.87187C10.6469 10.0978 10.4165 10.5047 10.4165 10.9437V12.0834C10.4165 12.3135 10.23 12.5001 9.99984 12.5001C9.76972 12.5001 9.58317 12.3135 9.58317 12.0834V10.9437C9.58317 10.2119 9.96713 9.5338 10.5946 9.15729L11.0938 8.85778C11.4491 8.6446 11.6665 8.26065 11.6665 7.84631C11.6665 7.19486 11.1384 6.66675 10.4869 6.66675H9.58317Z"
+          fill="currentColor"
+        />
+        <path
+          d="M9.58317 13.7501C9.58317 13.52 9.76972 13.3334 9.99984 13.3334C10.23 13.3334 10.4165 13.52 10.4165 13.7501C10.4165 13.9802 10.23 14.1667 9.99984 14.1667C9.76972 14.1667 9.58317 13.9802 9.58317 13.7501Z"
+          fill="currentColor"
+        />
+      </g>
+    </CustomIcon>
+  );
+};

packages/frontend/src/components/shared/CustomIcon/SettingsSlidersIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const SettingsSlidersIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        id="Icon"
+        d="M11.2498 5.83341H2.9165M11.2498 5.83341C11.2498 4.22196 12.555 2.91675 14.1665 2.91675C15.778 2.91675 17.0832 4.22196 17.0832 5.83341C17.0832 7.44487 15.778 8.75008 14.1665 8.75008C12.555 8.75008 11.2498 7.44487 11.2498 5.83341ZM17.0832 14.1667H10.4165M10.4165 14.1667C10.4165 15.7782 9.1113 17.0834 7.49984 17.0834C5.88838 17.0834 4.58317 15.7782 4.58317 14.1667M10.4165 14.1667C10.4165 12.5553 9.1113 11.2501 7.49984 11.2501C5.88838 11.2501 4.58317 12.5553 4.58317 14.1667M4.58317 14.1667H2.9165"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </CustomIcon>
+  );
+};

packages/frontend/src/components/shared/CustomIcon/index.ts

@@ -13,3 +13,7 @@ export * from './CalendarIcon';
 export * from './CheckRoundFilledIcon';
 export * from './InfoRoundFilledIcon';
 export * from './LoadingIcon';
+export * from './FolderIcon';
+export * from './SettingsSlidersIcon';
+export * from './LifeBuoyIcon';
+export * from './QuestionMarkRoundIcon';

packages/frontend/src/components/shared/Tabs/Tabs.theme.ts

@@ -24,6 +24,7 @@ export const tabsTheme = tv({
       'data-[orientation=vertical]:px-3',
       'data-[orientation=vertical]:py-3',
       'data-[orientation=vertical]:min-w-[240px]',
+      'data-[orientation=vertical]:w-full',
       'data-[orientation=vertical]:focus-ring',
       'data-[orientation=vertical]:rounded-xl',
       'data-[orientation=vertical]:border-transparent',
@@ -72,6 +73,7 @@ export const tabsTheme = tv({
       // Vertical
       'data-[orientation=vertical]:flex-col',
       'data-[orientation=vertical]:gap-0.5',
+      'data-[orientation=vertical]:w-full',
     ],
     content: ['text-elements-high-em', 'grow', 'outline-none', 'tab-content'],
   },