GH-148 Refactor docs sidebar. (#148)

Author: vLuckyyy

app/docs/[...slug]/page.tsx

@@ -14,7 +14,7 @@ import { EditOnGitHub } from "@/components/page/docs/content/EditOnGitHub";
 import { ErrorBoundary } from "@/components/page/docs/content/ErrorBoundary";
 import { ReadingTime } from "@/components/page/docs/content/ReadingTime";
 import { ShortLink } from "@/components/page/docs/content/ShortLink";
-import { docsStructure } from "@/components/page/docs/sidebar-structure";
+import { docsStructure } from "@/components/page/docs/sidebar/sidebar-structure";
 
 interface DocMeta {
   title: string;

app/docs/page.tsx

@@ -1,6 +1,6 @@
 import { redirect } from "next/navigation";
 
-import { docsStructure } from "@/components/page/docs/sidebar-structure";
+import { docsStructure } from "@/components/page/docs/sidebar/sidebar-structure";
 
 function flattenDocs(structure: typeof docsStructure) {
   return structure.flatMap(item =>

components/page/docs/sidebar/DocSidebar.tsx

@@ -1,176 +1,72 @@
 "use client";
 
-import { motion, AnimatePresence } from "framer-motion";
 import { Menu, X } from "lucide-react";
-import Link from "next/link";
 import { usePathname } from "next/navigation";
-import React, { useMemo, useCallback, useEffect } from "react";
+import React, { useEffect } from "react";
 
-import Folder from "@/components/icons/folder";
 import { cn } from "@/lib/utils";
 
-import { docsStructure, DocItem } from "../sidebar-structure";
-
-import {
-  sidebarStaggerContainer,
-  sidebarFadeInLeft,
-  sidebarFadeInUp,
-  sidebarItemHover,
-} from "./animations";
-import { useMobileSidebar } from "./useMobileSidebar";
-
-/**
- * Props for the DocSidebar component
- */
-interface DocSidebarProps {
-  /** Additional CSS classes to apply */
-  className?: string;
-  /** Callback function when a sidebar item is clicked */
-  onItemClick?: (path: string) => void;
-  /** Whether the sidebar has already been animated */
-  hasAnimated?: boolean;
-}
-
-/**
- * Props for the DocItemComponent
- */
-interface DocItemProps {
-  /** The documentation item to render */
-  item: DocItem;
-  /** The nesting level of the item */
-  level: number;
-  /** Whether the item is currently active */
-  isActive: boolean;
-  /** Callback function when the item is clicked */
-  onItemClick?: (path: string) => void;
-  /** Index of the item in its parent's children array */
-  index: number;
-}
-
-/**
- * Component for rendering a single documentation item in the sidebar
- */
-const DocItemComponent: React.FC<DocItemProps> = React.memo(
-  ({ item, level, isActive, onItemClick, index }) => {
-    const pathname = usePathname();
-    const hasChildren = item.children && item.children.length > 0;
-
-    const isPathActive = useCallback(
-      (path: string) => pathname === path || pathname.startsWith(`${path}/`),
-      [pathname]
-    );
-
-    const handleClick = useCallback(() => {
-      onItemClick?.(item.path);
-    }, [item.path, onItemClick]);
-
-    if (hasChildren) {
-      return (
-        <motion.div
-          className={cn("mb-3", level === 0 && "first:mt-0")}
-          variants={sidebarFadeInUp}
-          custom={index}
-          layout
+import { docsStructure } from "./sidebar-structure";
+import SidebarItem from "./SidebarItem";
+import { DocSidebarProps } from "./types";
+import { useMobileSidebar } from './useMobileSidebar';
+
+const DocSidebar: React.FC<DocSidebarProps> = ({ className = "", onItemClick }) => {
+  const pathname = usePathname();
+  const { isOpen, isMobile, toggleSidebar, sidebarRef, toggleButtonRef, setIsOpen } = useMobileSidebar();
+
+  useEffect(() => {
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && isOpen && isMobile) {
+        toggleSidebar();
+      }
+    };
+
+    document.addEventListener("keydown", handleEscapeKey);
+    return () => document.removeEventListener("keydown", handleEscapeKey);
+  }, [isOpen, isMobile, toggleSidebar]);
+
+  return (
+    <>
+      {isMobile && (
+        <button
+          ref={toggleButtonRef}
+          onClick={toggleSidebar}
+          className="mb-4 flex w-full items-center justify-center gap-2 rounded-md bg-gray-100 px-3 py-2 text-sm font-medium text-gray-900 dark:bg-gray-800 dark:text-white lg:hidden"
+          aria-expanded={isOpen}
+          aria-controls="doc-sidebar"
         >
-          <motion.div
-            className={cn(
-              "mb-1 text-sm font-semibold",
-              level > 0 && "pl-4",
-              "tracking-wide text-gray-900 dark:text-white"
-            )}
-            role="heading"
-            aria-level={level + 1}
-            whileHover={sidebarItemHover}
-            layout
-          >
-            <Folder
-              className="-mt-0.5 mr-2 inline-block h-4 w-4 align-middle text-gray-500 dark:text-gray-400"
-              aria-hidden="true"
-            />
-            {item.title}
-          </motion.div>
-          <motion.ul className="list-none space-y-1" variants={sidebarStaggerContainer} layout>
-            {item.children?.map((child, childIndex) => (
-              <li key={child.path}>
-                <DocItemComponent
-                  item={child}
-                  level={level + 1}
-                  isActive={isPathActive(child.path)}
-                  onItemClick={onItemClick}
-                  index={childIndex}
-                />
-              </li>
-            ))}
-          </motion.ul>
-        </motion.div>
-      );
-    }
+          {isOpen ? (
+            <>
+              <X className="h-4 w-4" />
+              <span>Close navigation</span>
+            </>
+          ) : (
+            <>
+              <Menu className="h-4 w-4" />
+              <span>Open navigation</span>
+            </>
+          )}
+        </button>
+      )}
 
-    return (
-      <motion.div variants={sidebarFadeInUp} custom={index} layout>
-        <Link
-          href={item.path}
-          onClick={handleClick}
+      {(isOpen || !isMobile) && (
+        <nav
+          ref={sidebarRef}
+          id="doc-sidebar"
           className={cn(
-            "relative block rounded-lg py-1 pl-4 pr-8 text-sm font-medium transition-colors",
-            isActive
-              ? "bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-white"
-              : "text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+            "w-full",
+            isMobile
+              ? "fixed inset-y-0 left-0 z-50 w-64 overflow-y-auto bg-white p-4 shadow-lg dark:bg-gray-900"
+              : className
           )}
-          aria-current={isActive ? "page" : undefined}
-        >
-          <motion.span className="flex w-full items-start" whileHover={sidebarItemHover} layout>
-            <span className="block flex-1">{item.title}</span>
-          </motion.span>
-        </Link>
-      </motion.div>
-    );
-  }
-);
-
-DocItemComponent.displayName = "DocItemComponent";
-
-/**
- * Documentation sidebar component
- *
- * Renders the navigation sidebar for the documentation pages
- * with support for both desktop and mobile views
- */
-const DocSidebar: React.FC<DocSidebarProps> = React.memo(
-  ({ className = "", onItemClick, hasAnimated = false }) => {
-    const pathname = usePathname();
-    const { isOpen, isMobile, toggleSidebar, sidebarRef, toggleButtonRef, setIsOpen } =
-      useMobileSidebar();
-
-    // Add event listener for Escape key to close sidebar (for accessibility)
-    useEffect(() => {
-      const handleEscapeKey = (event: KeyboardEvent) => {
-        if (event.key === "Escape" && isOpen && isMobile) {
-          toggleSidebar();
-        }
-      };
-
-      // Add event listener
-      document.addEventListener("keydown", handleEscapeKey);
-
-      // Clean up event listener on unmount
-      return () => {
-        document.removeEventListener("keydown", handleEscapeKey);
-      };
-    }, [isOpen, isMobile, toggleSidebar]);
-
-    const sidebarContent = useMemo(
-      () => (
-        <motion.ul
-          className="list-none space-y-1"
-          variants={sidebarStaggerContainer}
-          initial={!hasAnimated ? "hidden" : false}
-          animate={!hasAnimated ? "visible" : false}
-          layout
+          role="navigation"
+          aria-label="Documentation navigation"
         >
-          {docsStructure.map((item, index) => (
-            <li key={item.path}>
-              <DocItemComponent
+          <div className="space-y-1">
+            {docsStructure.map((item, index) => (
+              <SidebarItem
+                key={item.path}
                 item={item}
                 level={0}
                 isActive={pathname === item.path}
@@ -180,82 +76,20 @@ const DocSidebar: React.FC<DocSidebarProps> = React.memo(
                 }}
                 index={index}
               />
-            </li>
-          ))}
-        </motion.ul>
-      ),
-      [pathname, onItemClick, isMobile, hasAnimated, setIsOpen]
-    );
-
-    return (
-      <>
-        {/* Mobile sidebar toggle button */}
-        {isMobile && (
-          <button
-            ref={toggleButtonRef}
-            id="sidebar-toggle"
-            onClick={toggleSidebar}
-            className="mb-4 flex w-full items-center justify-center gap-2 rounded-md bg-gray-100 px-3 py-2 text-sm font-medium text-gray-900 dark:bg-gray-800 dark:text-white"
-            aria-expanded={isOpen}
-            aria-controls="doc-sidebar"
-          >
-            {isOpen ? (
-              <>
-                <X className="h-4 w-4" />
-                <span>Close Navigation</span>
-              </>
-            ) : (
-              <>
-                <Menu className="h-4 w-4" />
-                <span>Open Navigation</span>
-              </>
-            )}
-          </button>
-        )}
-
-        {/* Sidebar navigation */}
-        <AnimatePresence>
-          {(isOpen || !isMobile) && (
-            <motion.nav
-              ref={sidebarRef}
-              id="doc-sidebar"
-              className={cn(
-                "w-full",
-                isMobile
-                  ? "fixed inset-y-0 left-0 z-50 w-64 overflow-y-auto bg-white p-4 shadow-lg dark:bg-gray-900"
-                  : className
-              )}
-              role="navigation"
-              aria-label="Documentation navigation"
-              variants={sidebarFadeInLeft}
-              initial={!hasAnimated ? "hidden" : false}
-              animate={!hasAnimated ? "visible" : false}
-              exit={{ opacity: 0, x: -20 }}
-              transition={{ duration: 0.2 }}
-              layout
-            >
-              {sidebarContent}
-            </motion.nav>
-          )}
-        </AnimatePresence>
-
-        {/* Mobile sidebar backdrop */}
-        {isMobile && isOpen && (
-          <motion.div
-            className="fixed inset-0 z-40 bg-black bg-opacity-50"
-            onClick={toggleSidebar}
-            aria-hidden="true"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.2 }}
-          />
-        )}
-      </>
-    );
-  }
-);
-
-DocSidebar.displayName = "DocSidebar";
+            ))}
+          </div>
+        </nav>
+      )}
+
+      {isMobile && isOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black bg-opacity-50 lg:hidden"
+          onClick={toggleSidebar}
+          aria-hidden="true"
+        />
+      )}
+    </>
+  );
+};
 
 export default DocSidebar;