♻️ refactor: move sidebar inside shared components

packages/frontend/src/components/shared/Sidebar/Sidebar.tsx

@@ -5,8 +5,8 @@ import { Organization } from 'gql-client';
 import { Option } from '@material-tailwind/react';
 import { useDisconnect } from 'wagmi';
 
-import { useGQLClient } from '../context/GQLClientContext';
-import AsyncSelect from './shared/AsyncSelect';
+import { useGQLClient } from 'context/GQLClientContext';
+import AsyncSelect from 'components/shared/AsyncSelect';
 import {
   ChevronGrabberHorizontal,
   FolderIcon,
@@ -14,10 +14,11 @@ import {
   LifeBuoyIcon,
   QuestionMarkRoundIcon,
   SettingsSlidersIcon,
-} from './shared/CustomIcon';
+} from 'components/shared/CustomIcon';
 import { Tabs } from 'components/shared/Tabs';
+import { Heading } from 'components/shared/Heading';
 
-const Sidebar = () => {
+export const Sidebar = () => {
   const { orgSlug } = useParams();
   const navigate = useNavigate();
   const client = useGQLClient();
@@ -42,20 +43,20 @@ const Sidebar = () => {
   }, [disconnect, navigate]);
 
   return (
-    <div className="flex flex-col h-full p-4 pt-10">
-      <div className="grow">
+    <div className="flex flex-col h-full px-6 py-8 gap-9">
+      {/* Logo */}
       <Link to={`/${orgSlug}`}>
-          <div className="flex items-center space-x-3 mb-10 ml-2">
+        <div className="flex items-center gap-3 px-2">
           <img
             src="/logo.svg"
             alt="Snowball Logo"
-              className="h-8 w-8 rounded-lg"
+            className="h-10 w-10 rounded-lg"
           />
-            <span className="text-2xl font-bold text-snowball-900">
-              Snowball
-            </span>
+          <Heading className="text-[24px]">Snowball</Heading>
         </div>
       </Link>
+      {/* Switch organization */}
+      <div className="flex flex-1 flex-col gap-4">
         <AsyncSelect
           containerProps={{ className: 'h-14 border-none' }}
           labelProps={{ className: 'before:border-none after:border-none' }}
@@ -82,7 +83,7 @@ const Sidebar = () => {
           )}
           arrow={<ChevronGrabberHorizontal className="h-4 w-4 text-gray-500" />}
         >
-          {/* TODO: Show label organization and manage in option */}
+          {/* // TODO: Show label organization and manage in option */}
           {organizations.map((org) => (
             <Option key={org.id} value={org.slug}>
               <div className="flex items-center space-x-3">
@@ -99,7 +100,7 @@ const Sidebar = () => {
             </Option>
           ))}
         </AsyncSelect>
-        <Tabs defaultValue="Projects" orientation="vertical" className="mt-10">
+        <Tabs defaultValue="Projects" orientation="vertical">
           <Tabs.List>
             {[
               { title: 'Projects', url: `/${orgSlug}/`, icon: <FolderIcon /> },
@@ -118,9 +119,10 @@ const Sidebar = () => {
           </Tabs.List>
         </Tabs>
       </div>
-      <div className="grow flex flex-col justify-end mb-8">
+      {/* Bottom navigation */}
+      <div className="flex flex-col justify-end">
         <Tabs defaultValue="Projects" orientation="vertical">
-          {/* TODO: use proper link buttons */}
+          {/* // TODO: use proper link buttons */}
           <Tabs.List>
             <Tabs.Trigger icon={<GlobeIcon />} value="">
               <a className="cursor-pointer" onClick={handleLogOut}>
@@ -139,5 +141,3 @@ const Sidebar = () => {
     </div>
   );
 };
-
-export default Sidebar;

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

@@ -0,0 +1 @@
+export * from './Sidebar';