From 6b556292202a0dec6ef691a27e3a1f111a8c7479 Mon Sep 17 00:00:00 2001
From: Daniel <daniellehr@gmx.de>
Date: Tue, 20 Feb 2024 18:24:25 +0100
Subject: [PATCH] feat: Polish sidebar (#332)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Center chevron indicator

* Add some smooth category expand/collapse transitions

* Allow ∞ expand/collapse

* No auto collapse

* Adjust spacings

* Adjust spacings 2️⃣

* Adjust spacings 3️⃣
---
 src/components/navigation/Navigation.tsx      |  2 +-
 .../navigation/NavigationCategory.tsx         | 42 +++++++++----------
 2 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/components/navigation/Navigation.tsx b/src/components/navigation/Navigation.tsx
index aa97f49b..46969f2e 100644
--- a/src/components/navigation/Navigation.tsx
+++ b/src/components/navigation/Navigation.tsx
@@ -11,7 +11,7 @@ type Props = {
 export function Navigation({ className }: Props) {
   return (
     <nav className={clsx("text-base lg:text-sm", className)}>
-      <ul role="list" className="space-y-5">
+      <ul role="list">
         {navigation.map((section) => (
           <NavigationCategory key={section.label} navItem={section} isRoot />
         ))}
diff --git a/src/components/navigation/NavigationCategory.tsx b/src/components/navigation/NavigationCategory.tsx
index 3cae5bb4..70d62422 100644
--- a/src/components/navigation/NavigationCategory.tsx
+++ b/src/components/navigation/NavigationCategory.tsx
@@ -1,9 +1,9 @@
 import { NavItem } from "@/lib/interfaces";
 import { hasActiveNavLinkItem } from "@/lib/utils/has-active-nav-link-item";
 import clsx from "clsx";
-import { ChevronRightIcon, ChevronDownIcon } from "lucide-react";
+import { ChevronRightIcon } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { NavigationLinkItem } from "./NavigationLinkItem";
 
 type Props = {
@@ -33,21 +33,18 @@ export function NavigationCategory({ navItem, isRoot }: Props) {
 
   const onClick = () => {
     if (isCollapsed) {
-      router.push(categoryHref);
+      if (!hasActiveNavLinkItem(navItem, pathname)) router.push(categoryHref);
+      setIsCollapsed(false);
     } else {
       setIsCollapsed(true);
     }
   };
 
-  useEffect(() => {
-    setIsCollapsed(!isCategoryExpanded(navItem, pathname));
-  }, [pathname, setIsCollapsed, navItem]);
-
   return (
     <li className={clsx(!isRoot && "pl-4")}>
       <a
         className={clsx([
-          "flex w-full cursor-pointer",
+          "flex w-full cursor-pointer items-center",
           isRoot
             ? "font-display font-semibold text-gray-900 dark:text-white"
             : "text-gray-500 dark:text-gray-400 dark:hover:text-gray-300",
@@ -55,26 +52,27 @@ export function NavigationCategory({ navItem, isRoot }: Props) {
         onClick={onClick}
       >
         <span className="flex-grow">{navItem.label}</span>
-        {isCollapsed ? (
-          <ChevronRightIcon className="h-4 w-4" />
-        ) : (
-          <ChevronDownIcon className="h-4 w-4" />
-        )}
+        <ChevronRightIcon
+          className={clsx("h-4 w-4 duration-200", !isCollapsed && "rotate-90")}
+        />
       </a>
       <ul
         role="list"
         className={clsx([
-          "mt-2 space-y-2 border-l border-gray-100 dark:border-gray-800 lg:mt-4 lg:space-y-4 lg:border-gray-200",
-          isCollapsed && "hidden",
+          "grid duration-200 border-l border-gray-100 dark:border-gray-800 lg:border-gray-200",
+          isCollapsed ? "grid-rows-[0fr]" : "grid-rows-[1fr]",
+          (!isCollapsed || isRoot) && "my-3",
         ])}
       >
-        {navItem.items?.map((innerItem) =>
-          innerItem.items?.length ? (
-            <NavigationCategory navItem={innerItem} key={innerItem.label} />
-          ) : (
-            <NavigationLinkItem link={innerItem} key={innerItem.label} />
-          ),
-        )}
+        <div className="overflow-hidden flex flex-col gap-3">
+          {navItem.items?.map((innerItem) =>
+            innerItem.items?.length ? (
+              <NavigationCategory navItem={innerItem} key={innerItem.label} />
+            ) : (
+              <NavigationLinkItem link={innerItem} key={innerItem.label} />
+            ),
+          )}
+        </div>
       </ul>
     </li>
   );