Initial commit of WooNooW Docs

components/docs-menu.tsx

@@ -10,53 +10,27 @@ interface DocsMenuProps {
   className?: string;
 }
 
-// Get the current context from the path
-function getCurrentContext(path: string): string | undefined {
-  if (!path.startsWith('/docs')) return undefined;
-
-  // Extract the first segment after /docs/
-  const match = path.match(/^\/docs\/([^\/]+)/);
-  return match ? match[1] : undefined;
-}
-
-// Get the route that matches the current context
-function getContextRoute(contextPath: string): EachRoute | undefined {
-  return ROUTES.find(route => {
-    const normalizedHref = route.href.replace(/^\/+|\/+$/g, '');
-    return normalizedHref === contextPath;
-  });
-}
-
 export default function DocsMenu({ isSheet = false, className = "" }: DocsMenuProps) {
   const pathname = usePathname();
 
-  // Skip rendering if not on a docs page
   if (!pathname.startsWith("/docs")) return null;
 
-  // Get the current context
-  const currentContext = getCurrentContext(pathname);
-
-  // Get the route for the current context
-  const contextRoute = currentContext ? getContextRoute(currentContext) : undefined;
-
-  // If no context route is found, don't render anything
-  if (!contextRoute) return null;
-
   return (
     <nav
       aria-label="Documentation navigation"
       className={cn("transition-all duration-200", className)}
     >
       <ul className="flex flex-col gap-1.5 py-4">
-        {/* Display only the items from the current context */}
-        <li key={contextRoute.title}>
-          <SubLink
-            {...contextRoute}
-            href={`/docs${contextRoute.href}`}
-            level={0}
-            isSheet={isSheet}
-          />
-        </li>
+        {ROUTES.map((route, index) => (
+          <li key={route.title + index}>
+            <SubLink
+              {...route}
+              href={`/docs${route.href}`}
+              level={0}
+              isSheet={isSheet}
+            />
+          </li>
+        ))}
       </ul>
     </nav>
   );

components/sublink.tsx

@@ -27,7 +27,7 @@ export default function SubLink({
   parentHref = "",
 }: SubLinkProps) {
   const path = usePathname();
-  const [isOpen, setIsOpen] = useState(level === 0);
+  const [isOpen, setIsOpen] = useState(false);
 
   // Full path including parent's href
   const fullHref = `${parentHref}${href}`;
@@ -86,7 +86,11 @@ export default function SubLink({
     <div className={cn("flex flex-col gap-1 w-full")}>
       <Collapsible open={isOpen} onOpenChange={setIsOpen}>
         <CollapsibleTrigger
-          className="w-full pr-5 text-left"
+          className={cn(
+            "w-full pr-5 text-left rounded-md transition-colors",
+            isOpen && "bg-muted/30 pb-2 pt-2", // Background when open
+            hasActiveChild && "bg-primary/5" // Accent tint when child is active
+          )}
           aria-expanded={isOpen}
           aria-controls={`collapsible-${fullHref.replace(/[^a-zA-Z0-9]/g, '-')}`}
         >
@@ -104,13 +108,13 @@ export default function SubLink({
         <CollapsibleContent
           id={`collapsible-${fullHref.replace(/[^a-zA-Z0-9]/g, '-')}`}
           className={cn(
-            "overflow-hidden transition-all duration-200 ease-in-out",
+            "pl-3 overflow-hidden transition-all duration-200 ease-in-out",
             isOpen ? "animate-collapsible-down" : "animate-collapsible-up"
           )}
         >
           <div
             className={cn(
-              "flex flex-col items-start sm:text-sm text-foreground/80 ml-0.5 mt-2.5 gap-3 hover:[&_a]:text-foreground transition-colors",
+              "flex flex-col items-start sm:text-sm text-foreground/80 ml-0.5 mt-2.5 gap-3 transition-colors",
               level > 0 && "pl-4 border-l border-border ml-1.5"
             )}
           >