From 6f77158aacb56b3e4e48447b2d836c1c851355c2 Mon Sep 17 00:00:00 2001
From: marshennikovaolga <marshennikova@gmail.com>
Date: Mon, 9 Sep 2024 20:48:29 +0300
Subject: [PATCH] link isActive sidebar

---
 .../custom/sidebar/partial/link-section.tsx   | 77 ++++++++++---------
 1 file changed, 39 insertions(+), 38 deletions(-)

diff --git a/web/components/custom/sidebar/partial/link-section.tsx b/web/components/custom/sidebar/partial/link-section.tsx
index 46a6e359..0ac854aa 100644
--- a/web/components/custom/sidebar/partial/link-section.tsx
+++ b/web/components/custom/sidebar/partial/link-section.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import Link from "next/link"
-import { usePathname } from "next/navigation"
+import { usePathname, useRouter } from "next/navigation"
 import { useAccount } from "@/lib/providers/jazz-provider"
 import { cn } from "@/lib/utils"
 import { PersonalLinkLists } from "@/lib/schema/personal-link"
@@ -32,28 +32,31 @@ interface LinkSectionHeaderProps {
 	isActive: boolean
 }
 
-const LinkSectionHeader: React.FC<LinkSectionHeaderProps> = ({ linkCount, isActive }) => (
-	<div
-		className={cn(
-			"flex min-h-[30px] items-center gap-px rounded-md",
-			isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
-		)}
-	>
-		<Link
-			href="/links"
-			className={cn(
-				"size-6 flex-1 items-center justify-start rounded-md px-2 py-1",
-				"focus-visible:outline-none focus-visible:ring-0",
-				isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
-			)}
-		>
-			<p className="flex items-center text-xs font-medium">
-				Links
-				{linkCount > 0 && <span className="text-muted-foreground ml-1">{linkCount}</span>}
-			</p>
-		</Link>
-	</div>
-)
+const LinkSectionHeader: React.FC<LinkSectionHeaderProps> = ({ linkCount, isActive }) => {
+	const pathname = usePathname()
+	const [state] = useQueryState("state", parseAsStringLiteral(LEARNING_STATES.map(ls => ls.value)))
+	const isLinksActive = pathname.startsWith("/links") && !state
+
+	return (
+		<div className="flex gap-px rounded-md">
+			<Link
+				href="/links"
+				className={cn(
+					"flex size-6 flex-1 items-center justify-start rounded-md px-2 py-1",
+					"focus-visible:outline-none focus-visible:ring-0",
+					isLinksActive
+						? "bg-accent text-accent-foreground items-center justify-center py-4"
+						: "hover:bg-accent hover:text-accent-foreground"
+				)}
+			>
+				<p className="flex w-full items-center text-xs font-medium">
+					Links
+					{linkCount > 0 && <span className="text-muted-foreground ml-1">{linkCount}</span>}
+				</p>
+			</Link>
+		</div>
+	)
+}
 
 const ALL_STATES = ["all", ...LEARNING_STATES.map(ls => ls.value)]
 interface ListProps {
@@ -62,31 +65,26 @@ interface ListProps {
 
 const List: React.FC<ListProps> = ({ personalLinks }) => {
 	const pathname = usePathname()
-	const [activeState] = useQueryState("state", parseAsStringLiteral(ALL_STATES))
+	const [state] = useQueryState("state", parseAsStringLiteral(LEARNING_STATES.map(ls => ls.value)))
+
 	const toLearnCount = personalLinks.filter(link => link?.learningState === "wantToLearn").length
 	const learningCount = personalLinks.filter(link => link?.learningState === "learning").length
 	const learnedCount = personalLinks.filter(link => link?.learningState === "learned").length
 
+	const isActive = (checkState: string) => {
+		return pathname === "/links" && state === checkState
+	}
+
 	return (
 		<div className="flex flex-col gap-px">
 			<ListItem
 				label="To Learn"
 				href="/links?state=wantToLearn"
 				count={toLearnCount}
-				isActive={pathname === "/links" && activeState === "wantToLearn"}
-			/>
-			<ListItem
-				label="Learning"
-				href="/links?state=learning"
-				count={learningCount}
-				isActive={pathname === "/links" && activeState === "learning"}
-			/>
-			<ListItem
-				label="Learned"
-				href="/links?state=learned"
-				count={learnedCount}
-				isActive={pathname === "/links" && activeState === "learned"}
+				isActive={isActive("wantToLearn")}
 			/>
+			<ListItem label="Learning" href="/links?state=learning" count={learningCount} isActive={isActive("learning")} />
+			<ListItem label="Learned" href="/links?state=learned" count={learnedCount} isActive={isActive("learned")} />
 		</div>
 	)
 }
@@ -104,7 +102,10 @@ const ListItem: React.FC<ListItemProps> = ({ label, href, count, isActive }) =>
 			<div className="group/topic-link relative flex min-w-0 flex-1">
 				<Link
 					href={href}
-					className="group-hover/topic-link:bg-accent relative flex h-8 w-full items-center gap-2 rounded-md p-1.5 font-medium"
+					className={cn(
+						"relative flex h-8 w-full items-center gap-2 rounded-md p-1.5 font-medium",
+						isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
+					)}
 				>
 					<div className="flex max-w-full flex-1 items-center gap-1.5 truncate text-sm">
 						<p className={cn("truncate opacity-95 group-hover/topic-link:opacity-100")}>{label}</p>