From 66e45937de768bae6c58b042b55bba7980a6099f Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sat, 15 Apr 2023 12:42:20 +0700
Subject: [PATCH] added active link

---
 src/components/activeLink.tsx          | 25 +++++++++++++++++++++++++
 src/components/navigation/newsfeed.tsx | 19 ++++++++++---------
 2 files changed, 35 insertions(+), 9 deletions(-)
 create mode 100644 src/components/activeLink.tsx

diff --git a/src/components/activeLink.tsx b/src/components/activeLink.tsx
new file mode 100644
index 00000000..844a6e32
--- /dev/null
+++ b/src/components/activeLink.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import Link from 'next/link';
+import { useSelectedLayoutSegment } from 'next/navigation';
+
+export const ActiveLink = ({
+  href,
+  className,
+  activeClassName,
+  children,
+}: {
+  href: string;
+  className: string;
+  activeClassName: string;
+  children: React.ReactNode;
+}) => {
+  const segment = useSelectedLayoutSegment();
+  const isActive = href.includes(segment);
+
+  return (
+    <Link href={href} className={`${className}` + ' ' + (isActive ? `${activeClassName}` : '')}>
+      {children}
+    </Link>
+  );
+};
diff --git a/src/components/navigation/newsfeed.tsx b/src/components/navigation/newsfeed.tsx
index 03d6e7a4..4ecbf6b5 100644
--- a/src/components/navigation/newsfeed.tsx
+++ b/src/components/navigation/newsfeed.tsx
@@ -1,8 +1,9 @@
 'use client';
 
+import { ActiveLink } from '@components/activeLink';
+
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { NavArrowUp } from 'iconoir-react';
-import Link from 'next/link';
 import { useState } from 'react';
 
 export default function Newsfeed() {
@@ -22,20 +23,20 @@ export default function Newsfeed() {
           <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Newsfeed</h3>
         </Collapsible.Trigger>
         <Collapsible.Content className="flex flex-col text-zinc-400">
-          <Link
-            href={`/newsfeed/following`}
-            //activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
+          <ActiveLink
+            href="/newsfeed/following"
+            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"
           >
             <span>Following</span>
-          </Link>
-          <Link
-            href={`/newsfeed/circle`}
-            //activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
+          </ActiveLink>
+          <ActiveLink
+            href="/newsfeed/circle"
+            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"
           >
             <span>Circle</span>
-          </Link>
+          </ActiveLink>
         </Collapsible.Content>
       </div>
     </Collapsible.Root>