From 66277d6c3bf6ee1ff8329253983c2f1bf23c3c66 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Wed, 28 Feb 2024 08:30:20 +0700
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20move=20sidebar?=
 =?UTF-8?q?=20inside=20shared=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{ => shared/Sidebar}/Sidebar.tsx          | 48 +++++++++----------
 .../src/components/shared/Sidebar/index.ts    |  1 +
 2 files changed, 25 insertions(+), 24 deletions(-)
 rename packages/frontend/src/components/{ => shared/Sidebar}/Sidebar.tsx (80%)
 create mode 100644 packages/frontend/src/components/shared/Sidebar/index.ts

diff --git a/packages/frontend/src/components/Sidebar.tsx b/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx
similarity index 80%
rename from packages/frontend/src/components/Sidebar.tsx
rename to packages/frontend/src/components/shared/Sidebar/Sidebar.tsx
index 1c679971..91db3539 100644
--- a/packages/frontend/src/components/Sidebar.tsx
+++ b/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">
-        <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>
+    <div className="flex flex-col h-full px-6 py-8 gap-9">
+      {/* Logo */}
+      <Link to={`/${orgSlug}`}>
+        <div className="flex items-center gap-3 px-2">
+          <img
+            src="/logo.svg"
+            alt="Snowball Logo"
+            className="h-10 w-10 rounded-lg"
+          />
+          <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;
diff --git a/packages/frontend/src/components/shared/Sidebar/index.ts b/packages/frontend/src/components/shared/Sidebar/index.ts
new file mode 100644
index 00000000..c167c49f
--- /dev/null
+++ b/packages/frontend/src/components/shared/Sidebar/index.ts
@@ -0,0 +1 @@
+export * from './Sidebar';