redesign sidebar

src/shared/navigation.tsx

@@ -1,62 +1,123 @@
-import { Disclosure } from '@headlessui/react';
-import { NavLink } from 'react-router-dom';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { useState } from 'react';
+import { NavLink, useNavigate } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
 import { ChatsList } from '@app/chats/components/list';
 
-import { AppHeader } from '@shared/appHeader';
 import { ComposerModal } from '@shared/composer/modal';
-import { NavArrowDownIcon, SpaceIcon, TrendingIcon } from '@shared/icons';
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  NavArrowDownIcon,
+  SpaceIcon,
+  TrendingIcon,
+} from '@shared/icons';
 import { LumeBar } from '@shared/lumeBar';
 
 export function Navigation() {
+  const navigate = useNavigate();
+
+  const [feeds, setFeeds] = useState(true);
+  const [chats, setChats] = useState(true);
+
   return (
-    <div className="relative flex w-[232px] flex-col gap-3 border-r border-zinc-900">
-      <AppHeader />
+    <div className="relative h-full w-[232px] bg-black/80">
       <div className="scrollbar-hide flex flex-col gap-5 overflow-y-auto pb-20">
-        <div className="inlin-lflex h-8 px-3.5">
+        <div className="inline-flex h-8 items-center justify-between px-2 pb-4 pt-14">
           <ComposerModal />
-        </div>
-        {/* Newsfeed */}
-        <div className="flex flex-col gap-0.5 px-1.5">
-          <div className="px-2.5">
-            <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">
-              Feeds
-            </h3>
-          </div>
-          <div className="flex flex-col">
-            <NavLink
-              to="/app/space"
-              preventScrollReset={true}
-              className={({ isActive }) =>
-                twMerge(
-                  'flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200',
-                  isActive ? 'bg-zinc-900/50' : ''
-                )
-              }
+          <div className="flex gap-2.5">
+            <button
+              type="button"
+              onClick={() => navigate(-1)}
+              className="group inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
             >
-              <span className="inline-flex h-6 w-6 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
-                <SpaceIcon width={12} height={12} className="text-zinc-100" />
-              </span>
-              <span className="font-medium">Spaces</span>
-            </NavLink>
-            <NavLink
-              to="/app/trending"
-              preventScrollReset={true}
-              className={({ isActive }) =>
-                twMerge(
-                  'flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200',
-                  isActive ? 'bg-zinc-900/50' : ''
-                )
-              }
+              <ArrowLeftIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
+            </button>
+            <button
+              type="button"
+              onClick={() => navigate(1)}
+              className="group inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
             >
-              <span className="inline-flex h-6 w-6 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
-                <TrendingIcon width={12} height={12} className="text-zinc-100" />
-              </span>
-              <span className="font-medium">Trending</span>
-            </NavLink>
+              <ArrowRightIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
+            </button>
           </div>
         </div>
+        <Collapsible.Root open={feeds} onOpenChange={setFeeds}>
+          <div className="flex flex-col gap-1 px-2">
+            <Collapsible.Trigger asChild>
+              <button className="flex items-center gap-1">
+                <div
+                  className={twMerge(
+                    'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
+                    open ? '' : 'rotate-180'
+                  )}
+                >
+                  <NavArrowDownIcon width={12} height={12} className="text-white/50" />
+                </div>
+                <h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
+                  Feeds
+                </h3>
+              </button>
+            </Collapsible.Trigger>
+            <Collapsible.Content>
+              <div className="flex flex-col">
+                <NavLink
+                  to="/app/space"
+                  preventScrollReset={true}
+                  className={({ isActive }) =>
+                    twMerge(
+                      'flex h-9 items-center gap-2.5 rounded-md px-2',
+                      isActive ? 'bg-white/10 text-white' : 'text-white/80'
+                    )
+                  }
+                >
+                  <span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
+                    <SpaceIcon className="h-3 w-3 text-white" />
+                  </span>
+                  <span className="font-medium">Spaces</span>
+                </NavLink>
+                <NavLink
+                  to="/app/trending"
+                  preventScrollReset={true}
+                  className={({ isActive }) =>
+                    twMerge(
+                      'flex h-9 items-center gap-2.5 rounded-md px-2 ',
+                      isActive ? 'bg-white/10 text-white' : 'text-white/80'
+                    )
+                  }
+                >
+                  <span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
+                    <TrendingIcon className="h-3 w-3 text-white" />
+                  </span>
+                  <span className="font-medium">Trending</span>
+                </NavLink>
+              </div>
+            </Collapsible.Content>
+          </div>
+        </Collapsible.Root>
+        <Collapsible.Root open={chats} onOpenChange={setChats}>
+          <div className="flex flex-col gap-1 px-2">
+            <Collapsible.Trigger asChild>
+              <button className="flex items-center gap-1">
+                <div
+                  className={twMerge(
+                    'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
+                    open ? '' : 'rotate-180'
+                  )}
+                >
+                  <NavArrowDownIcon width={12} height={12} className="text-white/50" />
+                </div>
+                <h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
+                  Chats
+                </h3>
+              </button>
+            </Collapsible.Trigger>
+            <Collapsible.Content>
+              <ChatsList />
+            </Collapsible.Content>
+          </div>
+        </Collapsible.Root>
         {/* Channels
 				<Disclosure defaultOpen={true}>
 					{({ open }) => (
@@ -84,28 +145,6 @@ export function Navigation() {
 					)}
 				</Disclosure>
 				 */}
-        {/* Chats */}
-        <Disclosure defaultOpen={true}>
-          {({ open }) => (
-            <div className="flex flex-col gap-0.5 px-1.5 pb-6">
-              <Disclosure.Button className="flex items-center gap-1 px-3">
-                <div
-                  className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
-                    open ? '' : 'rotate-180'
-                  }`}
-                >
-                  <NavArrowDownIcon width={12} height={12} className="text-zinc-700" />
-                </div>
-                <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">
-                  Chats
-                </h3>
-              </Disclosure.Button>
-              <Disclosure.Panel>
-                <ChatsList />
-              </Disclosure.Panel>
-            </div>
-          )}
-        </Disclosure>
       </div>
       <div className="absolute bottom-3 left-0 w-full px-10">
         <LumeBar />