partial sidebar style

packages/frontend/public/logo.svg

@@ -0,0 +1 @@
+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="500" height="500" fill="#0F86F5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M191.873 125.126C224.893 126.765 250.458 150.121 274.042 172.995C297.925 196.158 323.089 221.108 324.868 254.114C326.718 288.42 308.902 321.108 283.281 344.355C258.67 366.687 225.288 373.859 191.873 374.788C157.228 375.752 119.038 374.394 95.1648 349.588C71.6207 325.125 74.6696 287.843 75.7341 254.114C76.7518 221.865 79.2961 188.525 101.009 164.41C123.845 139.047 157.543 123.423 191.873 125.126Z" fill="#4BA4F7"/><path fill-rule="evenodd" clip-rule="evenodd" d="M229.373 125.126C262.393 126.765 287.958 150.121 311.542 172.995C335.425 196.158 360.589 221.108 362.368 254.114C364.218 288.42 346.402 321.108 320.781 344.355C296.17 366.687 262.788 373.859 229.373 374.788C194.728 375.752 156.538 374.394 132.665 349.588C109.121 325.125 112.17 287.843 113.234 254.114C114.252 221.865 116.796 188.525 138.509 164.41C161.345 139.047 195.043 123.423 229.373 125.126Z" fill="#8AC4FA"/><path fill-rule="evenodd" clip-rule="evenodd" d="M266.873 125.126C299.893 126.765 325.458 150.121 349.042 172.995C372.925 196.158 398.089 221.108 399.868 254.114C401.718 288.42 383.902 321.108 358.281 344.355C333.67 366.687 300.288 373.859 266.873 374.788C232.228 375.752 194.038 374.394 170.165 349.588C146.621 325.125 149.67 287.843 150.734 254.114C151.752 221.865 154.296 188.525 176.009 164.41C198.845 139.047 232.543 123.423 266.873 125.126Z" fill="#CAE4FD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M304.373 125.126C337.393 126.765 362.958 150.121 386.542 172.995C410.425 196.158 435.589 221.108 437.368 254.114C439.218 288.42 421.402 321.108 395.781 344.355C371.17 366.687 337.788 373.859 304.373 374.788C269.728 375.752 231.538 374.394 207.665 349.588C184.121 325.125 187.17 287.843 188.234 254.114C189.252 221.865 191.796 188.525 213.509 164.41C236.345 139.047 270.043 123.423 304.373 125.126Z" fill="white"/></svg>

packages/frontend/src/components/Sidebar.tsx

@@ -2,11 +2,13 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Link, NavLink, useNavigate, useParams } from 'react-router-dom';
 import { Organization } from 'gql-client';
 
-import { Typography, Option } from '@material-tailwind/react';
+import { Option } from '@material-tailwind/react';
 import { useDisconnect } from 'wagmi';
 
 import { useGQLClient } from '../context/GQLClientContext';
 import AsyncSelect from './shared/AsyncSelect';
+import { ChevronGrabberHorizontal, GlobeIcon } from './shared/CustomIcon';
+import { Tabs } from 'components/shared/Tabs';
 
 const Sidebar = () => {
   const { orgSlug } = useParams();
@@ -33,61 +35,90 @@ const Sidebar = () => {
   }, [disconnect, navigate]);
 
   return (
-    <div className="flex flex-col h-full p-4">
+    <div className="flex flex-col h-full p-4 mt-5">
       <div className="grow">
-        <div>
-          <Link to={`/${orgSlug}`}>
-            <h3 className="text-black text-2xl">Snowball</h3>
-          </Link>
-        </div>
+        <Link to={`/${orgSlug}`}>
+          <div className="flex items-center space-x-3 mb-10 ml-2">
+            <img
+              src="/logo.svg"
+              alt="Snowball Logo"
+              className="h-8 w-8 rounded-lg"
+            />
+            <span className="text-2xl font-bold text-snowball-900">
+              Snowball
+            </span>
+          </div>
+        </Link>
         <AsyncSelect
-          className="bg-white py-2"
+          className="bg-white rounded-lg shadow"
           value={selectedOrgSlug}
           onChange={(value) => {
             setSelectedOrgSlug(value!);
             navigate(`/${value}`);
           }}
           selected={(_, index) => (
-            <div className="flex gap-2">
-              <div>^</div>
+            <div className="flex items-center space-x-3">
+              <img
+                src="/logo.svg"
+                alt="Application Logo"
+                className="h-8 w-8 rounded-lg"
+              />
               <div>
-                <span>{organizations[index!]?.name}</span>
-                <Typography placeholder={''}>Organization</Typography>
+                <div className="text-sm font-semibold">
+                  {organizations[index!]?.name}
+                </div>
+                <div className="text-xs text-gray-500">Organization</div>
               </div>
             </div>
           )}
+          arrow={<ChevronGrabberHorizontal className="h-4 w-4 text-gray-500" />}
         >
           {/* TODO: Show label organization and manage in option */}
           {organizations.map((org) => (
             <Option key={org.id} value={org.slug}>
-              ^ {org.name}
-              {org.slug === selectedOrgSlug && <p className="float-right">^</p>}
+              <div className="flex items-center space-x-3">
+                <img
+                  src="/logo.svg"
+                  alt="Application Logo"
+                  className="h-8 w-8 rounded-lg"
+                />
+                <div>
+                  <div className="text-sm font-semibold">{org.name}</div>
+                  <div className="text-xs text-gray-500">Organization</div>
+                </div>
+              </div>
             </Option>
           ))}
         </AsyncSelect>
-        <div>
-          <NavLink
-            to={`/${orgSlug}`}
-            className={({ isActive }) => (isActive ? 'text-blue-500' : '')}
-          >
-            <Typography placeholder={''}>Projects</Typography>
-          </NavLink>
-        </div>
-        <div>
-          <NavLink
-            to={`/${orgSlug}/settings`}
-            className={({ isActive }) => (isActive ? 'text-blue-500' : '')}
-          >
-            <Typography placeholder={''}>Settings</Typography>
-          </NavLink>
-        </div>
+        <Tabs defaultValue="Projects" orientation="vertical" className="mt-5">
+          <Tabs.List>
+            {['Projects', 'Settings'].slice(0, 2).map((title, index) => (
+              <NavLink to={`/${orgSlug}/${title}`} key={index}>
+                <Tabs.Trigger icon={<GlobeIcon />} value={title}>
+                  {title}
+                </Tabs.Trigger>
+              </NavLink>
+            ))}
+          </Tabs.List>
+        </Tabs>
       </div>
-      <div className="grow flex flex-col justify-end">
-        <a className="cursor-pointer" onClick={handleLogOut}>
-          Log Out
-        </a>
-        <a className="cursor-pointer">Documentation</a>
-        <a className="cursor-pointer">Support</a>
+      <div className="grow flex flex-col justify-end mb-10">
+        <Tabs defaultValue="Projects" orientation="vertical">
+          {/* TODO: use proper link buttons */}
+          <Tabs.List>
+            <Tabs.Trigger icon={<GlobeIcon />} value="">
+              <a className="cursor-pointer" onClick={handleLogOut}>
+                Log Out
+              </a>
+            </Tabs.Trigger>
+            <Tabs.Trigger icon={<GlobeIcon />} value="">
+              <a className="cursor-pointer">Documentation</a>
+            </Tabs.Trigger>
+            <Tabs.Trigger icon={<GlobeIcon />} value="">
+              <a className="cursor-pointer">Support</a>
+            </Tabs.Trigger>
+          </Tabs.List>
+        </Tabs>
       </div>
     </div>
   );

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

@@ -38,6 +38,12 @@ export const tabsTheme = tv({
       'data-[orientation=vertical]:data-[state=active]:border-transparent',
       'data-[orientation=vertical]:data-[state=active]:hover:text-elements-high-em',
       'data-[orientation=vertical]:data-[state=active]:focus-visible:text-elements-high-em',
+      // TODO: demo additions
+      'data-[orientation=vertical]:data-[state=active]:bg-snowball-200',
+      'data-[orientation=vertical]:data-[state=active]:hover:bg-snowball-200',
+      'data-[orientation=vertical]:data-[state=active]:text-snowball-800',
+      'data-[orientation=vertical]:data-[state=active]:hover:text-snowball-800',
+      'data-[orientation=vertical]:data-[state=active]:shadow-[0px_1px_0px_0px_rgba(8,47,86,0.06)_inset]',
     ],
     trigger: [
       'flex',