feat: Polish sidebar (#332)

* Center chevron indicator * Add some smooth category expand/collapse transitions * Allow ∞ expand/collapse * No auto collapse * Adjust spacings * Adjust spacings 2️⃣ * Adjust spacings 3️⃣
zuplo · Feb 20, 2024 · 6b55629 · 6b55629
1 parent 9a420ba
commit 6b55629
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 23 deletions.
diff --git 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
@@ -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,48 +33,46 @@ 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",
         ])}
         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>
   );