@sit-onyx/nuxt-docs 0.1.0 → 0.2.0-dev-20251229091238

package/app/components/SidebarItem.vue

@@ -1,41 +1,59 @@
 <script lang="ts" setup>
-import type { ContentNavigationItem } from "@nuxt/content";
+import type { SidebarNavigationItem } from "../composables/useSidebarNavigation.js";
 
 const props = defineProps<{
-  item: ContentNavigationItem;
+  item: SidebarNavigationItem;
 }>();
 
-const localePath = useLocalePath();
+const route = useRoute();
 
 const isAccordionOpen = ref(true);
+watch(
+  () => props.item.sidebar?.collapsed,
+  (collapsed) => {
+    isAccordionOpen.value = !collapsed;
+  },
+  { immediate: true },
+);
 
-const children = computed(() => {
-  // filter out children that are directories
-  return props.item.children?.filter((child) => child.page !== false);
+const isChildActive = computed(() => {
+  const isActive = (item: SidebarNavigationItem): boolean => {
+    if (item.path === route.path) return true;
+    return item.children?.some(isActive) ?? false;
+  };
+
+  // ensure accordion is open if any child route is currently active
+  return props.item.children?.some(isActive) ?? false;
 });
+
+watch(
+  isChildActive,
+  (isActive) => {
+    // ensure accordion is open if any child route is currently active
+    // e.g. when reloading the page or navigating via global search
+    if (isActive) isAccordionOpen.value = true;
+  },
+  { immediate: true },
+);
 </script>
 
 <template>
-  <OnyxSidebarItem v-if="!children" class="sidebar-item" :link="localePath(props.item.path)">
+  <OnyxSidebarItem v-if="!props.item.children?.length" class="sidebar-item" :link="props.item.path">
     {{ props.item.title }}
   </OnyxSidebarItem>
 
   <OnyxAccordion
     v-else
-    :model-value="isAccordionOpen ? [localePath(item.path)] : undefined"
+    :model-value="isAccordionOpen ? [props.item.path] : undefined"
     class="sidebar-accordion"
     type="nested-large"
     @update:model-value="isAccordionOpen = !isAccordionOpen"
   >
-    <OnyxAccordionItem :value="localePath(item.path)">
+    <OnyxAccordionItem :value="props.item.path">
       <template #header>{{ props.item.title }}</template>
 
       <div class="sidebar-item__children">
-        <OnyxSidebarItem
-          v-for="child in children"
-          :key="localePath(child.path)"
-          :link="localePath(child.path)"
-        >
+        <OnyxSidebarItem v-for="child in props.item.children" :key="child.path" :link="child.path">
           {{ child.title }}
         </OnyxSidebarItem>
       </div>

package/app/composables/useSidebarNavigation.ts

@@ -0,0 +1,95 @@
+import type { Collections, ContentNavigationItem } from "@nuxt/content";
+
+export type SidebarNavigationItem = {
+  title: string;
+  /**
+   * Item path. Already localized for i18n with `useLocalePath`.
+   */
+  path: string;
+  children?: SidebarNavigationItem[];
+  sidebar?: SidebarNavigationOptions;
+};
+
+/**
+ * Custom navigation options. Can be set via the `.navigation.yml` file inside of a content folder.
+ *
+ * @example
+ * ```yaml
+ * # .navigation.yml
+ * sidebar:
+ *    root: true
+ * ```
+ */
+export type SidebarNavigationOptions = {
+  /**
+   * Whether this item is considered the root of the sidebar.
+   * If true, items above this one will be filtered out.
+   */
+  root?: boolean;
+  /**
+   * Whether children should be initially collapsed.
+   */
+  collapsed?: boolean;
+};
+
+export const useSidebarNavigation = async () => {
+  const { locale } = useI18n();
+  const localePath = useLocalePath();
+  const route = useRoute();
+
+  const { data } = await useAsyncData(
+    () => `navigation-${locale.value}`,
+    () => {
+      const collection = `content_${locale.value}` as const;
+      return queryCollectionNavigation(collection as keyof Collections);
+    },
+    {
+      default: () => [],
+    },
+  );
+
+  const navigation = computed(() => {
+    // map the items from "@nuxt/content" to our custom data scheme for better type support
+    const mapItem = (item: ContentNavigationItem): SidebarNavigationItem => {
+      return {
+        title: item.title,
+        path: localePath(item.path),
+        children: item.children?.map(mapItem),
+        sidebar: item.sidebar && typeof item.sidebar === "object" ? item.sidebar : undefined,
+      };
+    };
+
+    const items = data.value.map(mapItem);
+
+    // support multiple sidebars / roots so different pages can have their own sub-sidebar
+    const root = findDeepestRoot(items, route.path);
+    if (!root) return items;
+    return root.children ?? [root];
+  });
+
+  const findDeepestRoot = (
+    items: SidebarNavigationItem[],
+    activePath: string,
+  ): SidebarNavigationItem | undefined => {
+    /** Helper function to check if a path exists anywhere in a node's subtree */
+    const containsPath = (node: SidebarNavigationItem, path: string): boolean => {
+      if (node.path === path) return true;
+      return node.children?.some((child) => containsPath(child, path)) ?? false;
+    };
+
+    for (const item of items) {
+      // 1. Check children first (to find something deeper)
+      if (item.children) {
+        const deeperResult = findDeepestRoot(item.children, activePath);
+        if (deeperResult) return deeperResult;
+      }
+
+      // 2. If no deeper root was found, check if this current node is a match
+      if (item.sidebar?.root && containsPath(item, activePath)) {
+        return item;
+      }
+    }
+  };
+
+  return { navigation };
+};

package/app/layouts/sidebar.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { ContentNavigationItem } from "@nuxt/content";
-import { type OnyxPageLayoutProps, type OnyxSidebarProps } from "sit-onyx";
+import type { OnyxPageLayoutProps, OnyxSidebarProps } from "sit-onyx";
+import type { SidebarNavigationItem } from "../composables/useSidebarNavigation.js";
 
 const props = defineProps<
   OnyxPageLayoutProps & {
@@ -24,7 +24,7 @@ const slots = defineSlots<{
   /**
    * Optionally override the main sidebar body content.
    */
-  sidebarBody?(props: { items: ContentNavigationItem[] }): unknown;
+  sidebarBody?(props: { items: SidebarNavigationItem[] }): unknown;
   /**
    * Optionally override the sidebar header content.
    */
@@ -35,18 +35,7 @@ const slots = defineSlots<{
   sidebarFooter?(): unknown;
 }>();
 
-const { locale } = useI18n();
-const localePath = useLocalePath();
-
-const navigation = await useAsyncData(
-  () => `navigation-${locale.value}`,
-  () => {
-    const collection = `content_${locale.value}` as const;
-    return queryCollectionNavigation(collection);
-  },
-);
-
-const sidebarItems = computed(() => navigation.data.value ?? []);
+const { navigation } = await useSidebarNavigation();
 </script>
 
 <template>
@@ -61,10 +50,10 @@ const sidebarItems = computed(() => navigation.data.value ?? []);
           <slot name="sidebarHeader"> </slot>
         </template>
 
-        <slot name="sidebarBody" :items="sidebarItems">
-          <SidebarItem v-for="item in sidebarItems" :key="localePath(item.path)" :item="item" />
+        <slot name="sidebarBody" :items="navigation">
+          <SidebarItem v-for="item in navigation" :key="item.path" :item="item" />
 
-          <OnyxEmpty v-if="!sidebarItems.length" class="sidebar__empty">
+          <OnyxEmpty v-if="!navigation.length" class="sidebar__empty">
             {{ $t("onyx.select.empty") }}
           </OnyxEmpty>
         </slot>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/nuxt-docs",
-  "version": "0.1.0",
+  "version": "0.2.0-dev-20251229091238",
   "description": "Nuxt layer/template for creating documentations with the onyx design system",
   "type": "module",
   "author": "Schwarz IT KG",
@@ -30,27 +30,27 @@
     "@nuxtjs/color-mode": ">= 4",
     "@nuxtjs/i18n": ">= 10",
     "sass-embedded": ">= 1",
-    "@sit-onyx/icons": "^1.2.0",
+    "@sit-onyx/icons": "^1.3.0",
     "@sit-onyx/nuxt": "^1.0.1",
-    "sit-onyx": "^1.4.0"
+    "sit-onyx": "^1.6.0-dev-20251229091238"
   },
   "devDependencies": {
     "@fontsource-variable/source-code-pro": ">= 5",
     "@fontsource-variable/source-sans-3": ">= 5",
     "@nuxt/content": ">= 3",
     "@nuxt/image": ">= 1",
-    "@nuxt/test-utils": "^3.20.1",
+    "@nuxt/test-utils": "^3.21.0",
     "@nuxtjs/color-mode": ">= 4",
-    "@playwright/experimental-ct-vue": "1.56.1",
-    "@playwright/test": "1.56.1",
-    "nuxt": "4.2.1",
-    "sass-embedded": "1.93.3",
+    "@playwright/experimental-ct-vue": "1.57.0",
+    "@playwright/test": "1.57.0",
+    "nuxt": "4.2.2",
+    "sass-embedded": "1.97.1",
     "typescript": "5.9.3",
-    "vue": "3.5.24",
+    "vue": "3.5.26",
+    "@sit-onyx/icons": "^1.3.0",
     "@sit-onyx/nuxt": "^1.0.1",
-    "@sit-onyx/icons": "^1.2.0",
     "@sit-onyx/shared": "^0.1.0",
-    "sit-onyx": "^1.4.0"
+    "sit-onyx": "^1.6.0-dev-20251229091238"
   },
   "scripts": {
     "dev": "pnpm dev:prepare && nuxi dev playground",