refactor: sidebar

src/components/Sidebar/index.tsx

@@ -1,6 +1,9 @@
 import Icon from '@/assets/Icon'
 import Logo from '@/assets/Logo'
+import { cn } from '@/lib/utils'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
+import { useUserPreferences } from '@/providers/UserPreferencesProvider'
+import { ChevronsLeft, ChevronsRight } from 'lucide-react'
 import AccountButton from './AccountButton'
 import RelaysButton from './ExploreButton'
 import HomeButton from './HomeButton'
@@ -12,24 +15,45 @@ import SettingsButton from './SettingsButton'
 
 export default function PrimaryPageSidebar() {
   const { isSmallScreen } = useScreenSize()
+  const { sidebarCollapse, updateSidebarCollapse } = useUserPreferences()
+
   if (isSmallScreen) return null
 
   return (
-    <div className="w-16 xl:w-52 flex flex-col pb-2 pt-4 px-2 xl:px-4 justify-between h-full shrink-0">
+    <div
+      className={cn(
+        'relative flex flex-col pb-2 pt-3 justify-between h-full shrink-0',
+        sidebarCollapse ? 'px-2 w-16' : 'px-4 w-52'
+      )}
+    >
       <div className="space-y-2">
-        <div className="px-3 xl:px-4 mb-6 w-full">
-          <Icon className="xl:hidden" />
-          <Logo className="max-xl:hidden" />
-        </div>
-        <HomeButton />
-        <RelaysButton />
-        <NotificationsButton />
-        <SearchButton />
-        <ProfileButton />
-        <SettingsButton />
-        <PostButton />
+        {sidebarCollapse ? (
+          <div className="px-3 py-1 mb-6 w-full">
+            <Icon />
+          </div>
+        ) : (
+          <div className="px-4 mb-6 w-full">
+            <Logo />
+          </div>
+        )}
+        <HomeButton collapse={sidebarCollapse} />
+        <RelaysButton collapse={sidebarCollapse} />
+        <NotificationsButton collapse={sidebarCollapse} />
+        <SearchButton collapse={sidebarCollapse} />
+        <ProfileButton collapse={sidebarCollapse} />
+        <SettingsButton collapse={sidebarCollapse} />
+        <PostButton collapse={sidebarCollapse} />
       </div>
-      <AccountButton />
+      <AccountButton collapse={sidebarCollapse} />
+      <button
+        className="absolute flex flex-col justify-center items-center top-5 right-0 w-5 h-6 p-0 rounded-l-md hover:shadow-md text-muted-foreground hover:text-foreground hover:bg-background transition-colors [&_svg]:size-4"
+        onClick={(e) => {
+          e.stopPropagation()
+          updateSidebarCollapse(!sidebarCollapse)
+        }}
+      >
+        {sidebarCollapse ? <ChevronsRight /> : <ChevronsLeft />}
+      </button>
     </div>
   )
 }