🎨 style: adjust sidebar for mobile

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { NavLink, useNavigate, useParams } from 'react-router-dom';
-import { Organization } from 'gql-client';
+import { Organization, User } from 'gql-client';
 
 import { Option } from '@material-tailwind/react';
 import { useDisconnect } from 'wagmi';
@@ -12,11 +12,16 @@ import {
   FolderIcon,
   GlobeIcon,
   LifeBuoyIcon,
+  LogoutIcon,
   QuestionMarkRoundIcon,
   SettingsSlidersIcon,
 } from 'components/shared/CustomIcon';
 import { Tabs } from 'components/shared/Tabs';
 import { Logo } from 'components/Logo';
+import { Avatar } from 'components/shared/Avatar';
+import { formatAddress } from 'utils/format';
+import { getInitials } from 'utils/geInitials';
+import { Button } from 'components/shared/Button';
 
 export const Sidebar = () => {
   const { orgSlug } = useParams();
@@ -24,6 +29,17 @@ export const Sidebar = () => {
   const client = useGQLClient();
   const { disconnect } = useDisconnect();
 
+  const [user, setUser] = useState<User>();
+
+  const fetchUser = useCallback(async () => {
+    const { user } = await client.getUser();
+    setUser(user);
+  }, []);
+
+  useEffect(() => {
+    fetchUser();
+  }, []);
+
   const [selectedOrgSlug, setSelectedOrgSlug] = useState(orgSlug);
   const [organizations, setOrganizations] = useState<Organization[]>([]);
 
@@ -43,7 +59,8 @@ export const Sidebar = () => {
   }, [disconnect, navigate]);
 
   return (
-    <nav className="lg:flex hidden flex-col h-full px-6 py-8 gap-9">
+    <nav className="h-full w-[320px] lg:flex hidden flex-col">
+      <div className="flex flex-col h-full pt-8 pb-0 px-6 lg:pb-8 gap-9">
         <Logo orgSlug={orgSlug} />
         {/* Switch organization */}
         <div className="flex flex-1 flex-col gap-4">
@@ -71,7 +88,9 @@ export const Sidebar = () => {
                 </div>
               </div>
             )}
-          arrow={<ChevronGrabberHorizontal className="h-4 w-4 text-gray-500" />}
+            arrow={
+              <ChevronGrabberHorizontal className="h-4 w-4 text-gray-500" />
+            }
           >
             {/* // TODO: Show label organization and manage in option */}
             {organizations.map((org) => (
@@ -93,7 +112,11 @@ export const Sidebar = () => {
           <Tabs defaultValue="Projects" orientation="vertical">
             <Tabs.List>
               {[
-              { title: 'Projects', url: `/${orgSlug}/`, icon: <FolderIcon /> },
+                {
+                  title: 'Projects',
+                  url: `/${orgSlug}/`,
+                  icon: <FolderIcon />,
+                },
                 {
                   title: 'Settings',
                   url: `/${orgSlug}/settings`,
@@ -110,11 +133,15 @@ export const Sidebar = () => {
           </Tabs>
         </div>
         {/* Bottom navigation */}
-      <div className="flex flex-col justify-end">
+        <div className="flex flex-col gap-5 justify-end">
           <Tabs defaultValue="Projects" orientation="vertical">
             {/* // TODO: use proper link buttons */}
             <Tabs.List>
-            <Tabs.Trigger icon={<GlobeIcon />} value="">
+              <Tabs.Trigger
+                icon={<GlobeIcon />}
+                value=""
+                className="hidden lg:flex"
+              >
                 <a className="cursor-pointer" onClick={handleLogOut}>
                   Log Out
                 </a>
@@ -128,6 +155,27 @@ export const Sidebar = () => {
             </Tabs.List>
           </Tabs>
         </div>
+      </div>
+      <div className="shadow-card-sm py-4 pl-4 pr-2 flex lg:hidden items-center border-t border-border-separator/[0.06]">
+        {user?.name && (
+          <div className="flex items-center flex-1 gap-3">
+            <Avatar
+              size={44}
+              initials={getInitials(formatAddress(user.name))}
+            />
+            <p className="text-sm tracking-[-0.006em] text-elements-high-em">
+              {formatAddress(user.name)}
+            </p>
+          </div>
+        )}
+        <Button
+          variant="ghost"
+          className="text-elements-low-em"
+          onClick={handleLogOut}
+        >
+          <LogoutIcon />
+        </Button>
+      </div>
     </nav>
   );
 };