docs(nav-bar): add Storybook example with nested options (#1097)

Relates to #867 Add nav item with nested children to all Storybook examples
SchwarzIT · May 15, 2024 · 691969e · 691969e
1 parent 0145fc9
commit 691969e
Showing 1 changed file with 19 additions and 10 deletions.
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.stories.ts b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.stories.ts
@@ -22,6 +22,12 @@ const meta: Meta<typeof OnyxNavBar> = {
       contextArea: { control: { disable: true } },
       appArea: { control: { type: "text" } },
     },
+    decorators: [
+      (story) => ({
+        components: { story },
+        template: `<div style="margin-bottom: 10rem;"> <story /> </div>`,
+      }),
+    ] as Decorator[],
   }),
 };
 
@@ -34,10 +40,19 @@ export const Default = {
     appName: "App name",
     default: () => [
       h(OnyxNavItem, { label: "Item", href: "/", active: true }),
-      h(OnyxNavItem, { label: "Item", href: "/test" }, () => [
-        "Item",
-        h(OnyxBadge, { dot: true, color: "warning" }),
-      ]),
+      h(
+        OnyxNavItem,
+        {
+          label: "Item",
+          href: "/test",
+          options: [
+            { label: "Nested item 1", href: "#" },
+            { label: "Nested item 2", href: "#" },
+            { label: "Nested item 3", href: "#" },
+          ],
+        },
+        () => ["Item", h(OnyxBadge, { dot: true, color: "warning" })],
+      ),
       h(OnyxNavItem, { label: "Item", href: "https://onyx.schwarz" }),
     ],
   },
@@ -59,12 +74,6 @@ export const WithContextArea = {
       h(OnyxUserMenu, OnyxUserMenuDefault.args),
     ],
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `<div style="margin-bottom: 16rem;"> <story /> </div>`,
-    }),
-  ] as Decorator[],
 } satisfies Story;
 
 /**