polish

src/shared/navigation.tsx

@@ -3,15 +3,13 @@ import { useState } from 'react';
 import { NavLink, useNavigate } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
-import { ChatsList } from '@app/chats/components/list';
-
+// import { ChatsList } from '@app/chats/components/list';
 import { ComposerModal } from '@shared/composer/modal';
 import {
   ArrowLeftIcon,
   ArrowRightIcon,
   NavArrowDownIcon,
   SpaceIcon,
-  TrendingIcon,
 } from '@shared/icons';
 import { LumeBar } from '@shared/lumeBar';
 
@@ -19,7 +17,7 @@ export function Navigation() {
   const navigate = useNavigate();
 
   const [feeds, setFeeds] = useState(true);
-  const [chats, setChats] = useState(true);
+  // const [chats, setChats] = useState(true);
 
   return (
     <div className="relative h-full w-[232px] bg-black/80">
@@ -54,10 +52,15 @@ export function Navigation() {
                     open ? '' : 'rotate-180'
                   )}
                 >
-                  <NavArrowDownIcon className="h-3 w-3 text-white/50" />
+                  <NavArrowDownIcon
+                    className={twMerge(
+                      'h-3 w-3 text-white/50',
+                      feeds ? '' : 'rotate-180'
+                    )}
+                  />
                 </div>
                 <h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
-                  Feeds
+                  Personal
                 </h3>
               </button>
             </Collapsible.Trigger>
@@ -76,54 +79,12 @@ export function Navigation() {
                   <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="/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>
+                  <span className="font-medium">Space</span>
                 </NavLink>
               </div>
             </Collapsible.Content>
           </div>
         </Collapsible.Root>
-        {/* Channels
-				<Disclosure defaultOpen={true}>
-					{({ open }) => (
-						<div className="flex flex-col gap-0.5 px-1.5">
-							<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">
-									Channels
-								</h3>
-							</Disclosure.Button>
-							<Disclosure.Panel>
-								<ChannelsList />
-							</Disclosure.Panel>
-						</div>
-					)}
-				</Disclosure>
-				 */}
       </div>
       <div className="absolute bottom-3 left-0 w-full px-10">
         <LumeBar />