From 27082acf5c7bf03ee1380dfd8edde358cdeb85c8 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sat, 1 Apr 2023 15:46:08 +0700
Subject: [PATCH] updated navigation

---
 .../multiAccounts/activeAccount.tsx           |  4 +--
 .../multiAccounts/inactiveAccount.tsx         |  4 +--
 src/components/multiAccounts/index.tsx        |  6 ++---
 src/components/navigation/channels.tsx        | 25 +++++++++++++++++++
 src/components/navigation/chats.tsx           | 12 ++++-----
 src/components/navigation/index.tsx           |  5 +++-
 src/components/navigation/newsfeed.tsx        | 18 ++++++-------
 7 files changed, 49 insertions(+), 25 deletions(-)
 create mode 100644 src/components/navigation/channels.tsx

diff --git a/src/components/multiAccounts/activeAccount.tsx b/src/components/multiAccounts/activeAccount.tsx
index 3b7fb1de..fb244fde 100644
--- a/src/components/multiAccounts/activeAccount.tsx
+++ b/src/components/multiAccounts/activeAccount.tsx
@@ -56,12 +56,12 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
-        <button className="relative h-11 w-11 rounded-md">
+        <button className="relative h-11 w-11 rounded-lg">
           <Image
             src={userData.picture || DEFAULT_AVATAR}
             alt="user's avatar"
             fill={true}
-            className="rounded-md object-cover"
+            className="rounded-lg object-cover"
             priority
           />
         </button>
diff --git a/src/components/multiAccounts/inactiveAccount.tsx b/src/components/multiAccounts/inactiveAccount.tsx
index 1aa710b3..b2d42c6e 100644
--- a/src/components/multiAccounts/inactiveAccount.tsx
+++ b/src/components/multiAccounts/inactiveAccount.tsx
@@ -11,12 +11,12 @@ export const InactiveAccount = memo(function InactiveAccount({ user }: { user: a
   };
 
   return (
-    <button onClick={() => setCurrentUser()} className="relative h-11 w-11 shrink rounded-md">
+    <button onClick={() => setCurrentUser()} className="relative h-11 w-11 shrink rounded-lg">
       <Image
         src={userData.picture || DEFAULT_AVATAR}
         alt="user's avatar"
         fill={true}
-        className="rounded-md object-cover"
+        className="rounded-lg object-cover"
         priority
       />
     </button>
diff --git a/src/components/multiAccounts/index.tsx b/src/components/multiAccounts/index.tsx
index fa66b1f1..6e7fdc71 100644
--- a/src/components/multiAccounts/index.tsx
+++ b/src/components/multiAccounts/index.tsx
@@ -38,18 +38,18 @@ export default function MultiAccounts() {
   }, []);
 
   return (
-    <div className="flex h-full flex-col items-center justify-between px-2 pb-4 pt-4">
+    <div className="flex h-full flex-col items-center justify-between px-2 pb-4 pt-3">
       <div className="flex flex-col gap-4">
         <Link
           href="/explore"
-          className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-md bg-zinc-900 hover:bg-zinc-800"
+          className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg bg-zinc-900 hover:bg-zinc-800"
         >
           <LumeSymbol className="h-6 w-auto text-zinc-400 group-hover:text-zinc-200" />
         </Link>
         <div>{users.map((user) => renderAccount(user))}</div>
         <Link
           href="/onboarding"
-          className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-md border-2 border-dashed border-zinc-600 hover:border-zinc-400"
+          className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-zinc-600 hover:border-zinc-400"
         >
           <PlusIcon className="h-4 w-4 text-zinc-400 group-hover:text-zinc-200" />
         </Link>
diff --git a/src/components/navigation/channels.tsx b/src/components/navigation/channels.tsx
new file mode 100644
index 00000000..23ce19b9
--- /dev/null
+++ b/src/components/navigation/channels.tsx
@@ -0,0 +1,25 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { TriangleUpIcon } from '@radix-ui/react-icons';
+import { useState } from 'react';
+
+export default function Channels() {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <Collapsible.Root open={open} onOpenChange={setOpen}>
+      <div className="flex flex-col gap-1 px-2">
+        <Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1">
+          <div
+            className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
+              open ? 'rotate-180' : ''
+            }`}
+          >
+            <TriangleUpIcon className="h-4 w-4 text-zinc-700" />
+          </div>
+          <h3 className="text-xs font-bold uppercase tracking-wide text-zinc-600">Channels</h3>
+        </Collapsible.Trigger>
+        <Collapsible.Content></Collapsible.Content>
+      </div>
+    </Collapsible.Root>
+  );
+}
diff --git a/src/components/navigation/chats.tsx b/src/components/navigation/chats.tsx
index f9169731..aa2a947d 100644
--- a/src/components/navigation/chats.tsx
+++ b/src/components/navigation/chats.tsx
@@ -6,21 +6,19 @@ export default function Chats() {
   const [open, setOpen] = useState(true);
 
   return (
-    <Collapsible.Root open={open} onOpenChange={setOpen} className="h-full shrink-0">
-      <div className="flex h-full flex-col gap-1 px-2 pb-8">
+    <Collapsible.Root open={open} onOpenChange={setOpen}>
+      <div className="flex flex-col gap-1 px-2">
         <Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1">
           <div
             className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
               open ? 'rotate-180' : ''
             }`}
           >
-            <TriangleUpIcon className="h-4 w-4 text-zinc-500" />
+            <TriangleUpIcon className="h-4 w-4 text-zinc-700" />
           </div>
-          <h3 className="bg-gradient-to-r from-red-300 via-pink-100 to-blue-300 bg-clip-text text-xs font-bold uppercase tracking-wide text-transparent">
-            Chats
-          </h3>
+          <h3 className="text-xs font-bold uppercase tracking-wide text-zinc-600">Chats</h3>
         </Collapsible.Trigger>
-        <Collapsible.Content className="h-full"></Collapsible.Content>
+        <Collapsible.Content></Collapsible.Content>
       </div>
     </Collapsible.Root>
   );
diff --git a/src/components/navigation/index.tsx b/src/components/navigation/index.tsx
index a10d3c55..fdfbbab9 100644
--- a/src/components/navigation/index.tsx
+++ b/src/components/navigation/index.tsx
@@ -1,11 +1,14 @@
+import Channels from '@components/navigation/channels';
 import Chats from '@components/navigation/chats';
 import Newsfeed from '@components/navigation/newsfeed';
 
 export default function Navigation() {
   return (
-    <div className="relative flex h-full flex-col gap-1 overflow-hidden pt-4">
+    <div className="relative flex h-full flex-col gap-1 overflow-hidden pt-3">
       {/* Newsfeed */}
       <Newsfeed />
+      {/* Channels */}
+      <Channels />
       {/* Chats */}
       <Chats />
     </div>
diff --git a/src/components/navigation/newsfeed.tsx b/src/components/navigation/newsfeed.tsx
index 9a1318c7..aa46ff43 100644
--- a/src/components/navigation/newsfeed.tsx
+++ b/src/components/navigation/newsfeed.tsx
@@ -12,21 +12,19 @@ export default function Newsfeed() {
       <div className="flex flex-col gap-1 px-2">
         <Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1">
           <div
-            className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
+            className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
               open ? 'rotate-180' : ''
             }`}
           >
-            <TriangleUpIcon className="h-4 w-4 text-zinc-500" />
+            <TriangleUpIcon className="h-4 w-4 text-zinc-700" />
           </div>
-          <h3 className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-xs font-bold uppercase tracking-wide text-transparent">
-            Newsfeed
-          </h3>
+          <h3 className="text-xs font-bold uppercase tracking-wide text-zinc-600">Newsfeed</h3>
         </Collapsible.Trigger>
-        <Collapsible.Content className="flex flex-col gap-1 text-zinc-400">
+        <Collapsible.Content className="flex flex-col text-zinc-400">
           <ActiveLink
             href={`/newsfeed/following`}
-            activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
-            className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:bg-zinc-900"
+            activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
+            className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
           >
             <div className="inline-flex h-5 w-5 items-center justify-center">
               <span className="h-4 w-3 rounded-sm bg-gradient-to-br from-fuchsia-500 via-purple-300 to-pink-300"></span>
@@ -35,8 +33,8 @@ export default function Newsfeed() {
           </ActiveLink>
           <ActiveLink
             href={`/newsfeed/circle`}
-            activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
-            className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:bg-zinc-900"
+            activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
+            className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
           >
             <div className="inline-flex h-5 w-5 items-center justify-center">
               <span className="h-4 w-3 rounded-sm bg-gradient-to-br from-amber-500 via-orange-200 to-yellow-300"></span>