@docubook/flame 1.4.0 → 1.4.2

package/.docu/components/Menu.tsx

@@ -37,6 +37,12 @@ export default function Menu({ onNavigate, className = "", pathname, routes = []
 
   const mode = docuConfig.sidebar?.context || "dropdown";
 
+  // Helper: check if a sublink under a given route matches the current path
+  const isItemActive = (itemHref: string, parentRouteHref: string) => {
+    const fullHref = `/docs${parentRouteHref}${itemHref}`;
+    return currentPath === fullHref || currentPath === `${fullHref}.html`;
+  };
+
   // Separator mode: render all context sections as group headers + nav items
   if (mode === "separator") {
     const contextRoutes = menuRoutes.filter((r) => r.context);
@@ -48,7 +54,7 @@ export default function Menu({ onNavigate, className = "", pathname, routes = []
           aria-label="Documentation navigation"
           className={cn("transition-all duration-200", className)}
         >
-          <ul className="flex flex-col gap-1.5 py-4">
+          <ul className="flex flex-col gap-0.5 py-4">
             {menuRoutes.map((route) => (
               <li key={route.href}>
                 <Sublink
@@ -76,18 +82,30 @@ export default function Menu({ onNavigate, className = "", pathname, routes = []
               icon={route.context?.icon}
               title={route.context?.title || route.title}
             />
-            <ul className="border-base-300 flex flex-col gap-1.5 border-l-2 pb-0.5 pl-3 pt-0.5">
-              {route.items?.map((item) => (
-                <li key={item.href}>
-                  <Sublink
-                    {...item}
-                    href={item.href}
-                    level={0}
-                    onNavigate={onNavigate}
-                    parentHref={`/docs${route.href}`}
-                  />
-                </li>
-              ))}
+            <ul className="border-base-300 flex flex-col gap-0.5 border-l-2 pb-0.5 pl-3 pt-0.5">
+              {route.items?.map((item) => {
+                const isActive = isItemActive(item.href, route.href);
+                return (
+                  <li key={item.href}>
+                    <div
+                      className={cn(
+                        "-ml-[14px] border-l-2",
+                        isActive ? "border-primary" : "border-transparent"
+                      )}
+                    >
+                      <div className="pl-3">
+                        <Sublink
+                          {...item}
+                          href={item.href}
+                          level={0}
+                          onNavigate={onNavigate}
+                          parentHref={`/docs${route.href}`}
+                        />
+                      </div>
+                    </div>
+                  </li>
+                );
+              })}
             </ul>
           </div>
         ))}
@@ -117,7 +135,7 @@ export default function Menu({ onNavigate, className = "", pathname, routes = []
       aria-label="Documentation navigation"
       className={cn("transition-all duration-200", className)}
     >
-      <ul className="flex flex-col gap-1.5 py-4">
+      <ul className="flex flex-col gap-0.5 py-4">
         <li key={contextRoute.title}>
           <Sublink
             {...contextRoute}

package/.docu/components/Sublink.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import { ChevronDown } from "lucide-react";
 import Anchor from "./Anchor";
 import type { DocuRoute } from "../node/types";
@@ -35,11 +35,17 @@ export default function Sublink({
 
   // Shared padding based on nesting level
   const levelPadding = cn(level === 1 && "pl-2", level === 2 && "pl-4", level >= 3 && "pl-6");
+  const isActive = currentPathname === fullHref || currentPathname === `${fullHref}.html`;
+  const activeRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isActive && activeRef.current) {
+      activeRef.current.scrollIntoView({ block: "nearest" });
+    }
+  }, [isActive]);
 
   // Leaf node (no children)
   if (!items) {
-    const isActive = currentPathname === fullHref || currentPathname === `${fullHref}.html`;
-
     const link = (
       <Anchor
         href={fullHref}
@@ -51,10 +57,12 @@ export default function Sublink({
         {title}
       </Anchor>
     );
+
     return (
       <div
+        ref={activeRef}
         className={cn(
-          "py-1.5",
+          "py-1",
           levelPadding,
           level >= 2 && "border-l-2",
           level >= 2 && (isActive ? "border-primary" : "border-base-300")
@@ -67,7 +75,7 @@ export default function Sublink({
 
   // Section with children
   return (
-    <div className={cn("flex flex-col", levelPadding)}>
+    <div ref={isActive ? activeRef : undefined} className={cn("flex flex-col", levelPadding)}>
       {/* Section header */}
       <button
         type="button"
@@ -102,7 +110,7 @@ export default function Sublink({
 
       {/* Children */}
       {isOpen && (
-        <div className="flex flex-col py-1.5">
+        <div className="flex flex-col py-1">
           {items.map((item) => (
             <Sublink
               key={`${fullHref}${item.href}`}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docubook/flame",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "A blazing-fast React + MDX framework powered by Bun, built for modern documentation experiences.",
   "type": "module",
   "bin": {
@@ -52,10 +52,10 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "unified": "^11.0.0",
-    "@docubook/mdx-content": "^3.2.2",
-    "@docubook/themes-colors": "^0.10.2",
-    "@docubook/core": "^1.7.2",
-    "@docubook/ui-react": "^0.1.4"
+    "@docubook/core": "^1.8.0",
+    "@docubook/mdx-content": "^3.4.0",
+    "@docubook/ui-react": "^0.1.4",
+    "@docubook/themes-colors": "^0.10.2"
   },
   "peerDependencies": {
     "@sentry/bun": "^10.0.0"