Adding option to keep the api categories closed by default -

packages/zudoku/src/config/validators/SidebarSchema.ts

@@ -32,6 +32,7 @@ export type SidebarItemCategory = Omit<
   items: SidebarItem[];
   link?: SidebarItemCategoryLinkDoc;
   icon?: LucideIcon | string;
+  apiReference?: boolean;
 };
 
 export type SidebarItem =

packages/zudoku/src/config/validators/validate.ts

@@ -43,6 +43,7 @@ const ThemeSchema = z
 const ApiConfigSchema = z.object({
   server: z.string().optional(),
   navigationId: z.string().optional(),
+  defaultCollapsed: z.boolean().optional(),
 });
 
 const ApiSchema = z.union([

packages/zudoku/src/lib/components/navigation/SidebarCategory.tsx

@@ -1,10 +1,11 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { ChevronRightIcon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { NavLink, useMatch } from "react-router-dom";
 import type { SidebarItemCategory } from "../../../config/validators/SidebarSchema.js";
 import { cn } from "../../util/cn.js";
 import { joinPath } from "../../util/joinPath.js";
+import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
 import { useTopNavigationItem } from "../context/ZudokuContext.js";
 import { navigationListItem, SidebarItem } from "./SidebarItem.js";
 import { useIsCategoryOpen } from "./utils.js";
@@ -27,6 +28,7 @@ export const SidebarCategory = ({
   );
   const [open, setOpen] = useState(isDefaultOpen);
   const isActive = useMatch(joinPath(topNavItem?.id, category.link?.id));
+  const { activeAnchor } = useViewportAnchor();
 
   useEffect(() => {
     // this is triggered when an item from the sidebar is clicked
@@ -36,6 +38,25 @@ export const SidebarCategory = ({
     }
   }, [isCategoryOpen]);
 
+  const categoryLabel = useMemo(
+    () => category.label.toLowerCase(),
+    [category.label],
+  );
+
+  // this is useful when sidebar is collapsed and then user scrolls to an anchor link in the content then the sidebar should open to show the active category
+  useEffect(() => {
+    if (!activeAnchor) return;
+    if (hasInteracted) return;
+
+    // if this category is not part of the api reference then return as we don't want to close-open on scroll for other documentation
+    if (!category.apiReference) return;
+
+    const currentActiveCategory = activeAnchor.split("-")[0];
+    const shouldBeOpen = currentActiveCategory === categoryLabel;
+
+    setOpen(shouldBeOpen);
+  }, [activeAnchor, category.apiReference, categoryLabel, hasInteracted]);
+
   const ToggleButton = isCollapsible && (
     <button
       type="button"
@@ -116,8 +137,8 @@ export const SidebarCategory = ({
       </Collapsible.Trigger>
       <Collapsible.Content
         className={cn(
-          // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
-          hasInteracted && "CollapsibleContent",
+          // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle or the category is collapsed (if it was collapsed by default then while scrolling to an anchor link in the content it should animate as well)
+          (hasInteracted || category.collapsed) && "CollapsibleContent",
         )}
       >
         <ul className="mt-1 border-l ms-0.5">

packages/zudoku/src/lib/plugins/openapi/index.tsx

@@ -163,7 +163,7 @@ export const openApiPlugin = (
           type: "category",
           label: tag.name || "Other endpoints",
           collapsible: true,
-          collapsed: false,
+          collapsed: config.defaultCollapsed ?? false,
           items: tag.operations.map((operation) => ({
             type: "link",
             label: operation.summary ?? operation.path,
@@ -173,6 +173,7 @@ export const openApiPlugin = (
               color: MethodColorMap[operation.method.toLowerCase()],
             },
           })),
+          apiReference: true,
         }));
 
       categories.unshift({

packages/zudoku/src/lib/plugins/openapi/interfaces.ts

@@ -6,5 +6,6 @@ type OasSource =
 export type OasPluginConfig = {
   server?: string;
   navigationId?: string;
+  defaultCollapsed?: boolean;
   skipPreload?: boolean;
 } & OasSource;

packages/zudoku/src/vite/dev-server.ts

@@ -44,10 +44,12 @@ export class DevServer {
     const graphql = createGraphQLServer({
       graphqlEndpoint: "/__z/graphql",
     });
+
     const proxiedEntryClientPath = path.join(
       vite.config.base,
       "/__z/entry.client.tsx",
     );
+
     app.use(graphql.graphqlEndpoint, graphql);
     app.use(proxiedEntryClientPath, async (_req, res) => {
       const transformed = await vite.transformRequest(getAppClientEntryPath());