[patch] Fix Item types on Header and Sidenav Code Page

apps/website/screens/components/header/code/HeaderCodePage.tsx

@@ -12,6 +12,10 @@ const itemTypeString = `{
   label: string;
   onSelect?: () => void;
   selected?: boolean;
+  href?: string;
+  renderItem?:
+    (props: { children: ReactNode })
+    => ReactNode;
 }`;
 
 const groupItemTypeString = `{
@@ -73,6 +77,10 @@ const sections = [
                 Being <Code>Item</Code> an object with the following properties:
               </p>
               <ExtendedTableCode>{itemTypeString}</ExtendedTableCode>
+              <p>
+                The <Code>renderItem</Code> property allows wrapping the item with custom routing components (e.g.,
+                Next.js <Code>Link</Code>) that require children to be passed.
+              </p>
               <p>
                 and <Code>GroupItem</Code> an object with the following properties:
               </p>

apps/website/screens/components/sidenav/code/SidenavCodePage.tsx

@@ -12,6 +12,10 @@ const itemTypeString = `{
   ${commonItemTypeString}
   onSelect?: () => void;
   selected?: boolean;
+  href?: string;
+  renderItem?:
+    (props: { children: ReactNode })
+    => ReactNode;
 }`;
 
 const groupItemTypeString = `{ 
@@ -125,10 +129,18 @@ const sections = [
             </td>
             <td>
               <TableCode>{"(Item | GroupItem)[] | Section[]"}</TableCode>
+            </td>
+            <td>
+              Array of items to be displayed in the navigation menu. Each item can be a single/simple item, a group item
+              or a section.
               <p>
-                being <Code>Item</Code> an object with the following properties:
+                Being <Code>Item</Code> an object with the following properties:
               </p>
               <ExtendedTableCode>{itemTypeString}</ExtendedTableCode>
+              <p>
+                The <Code>renderItem</Code> property allows wrapping the item with custom routing components (e.g.,
+                Next.js <Code>Link</Code>) that require children to be passed.
+              </p>
               <p>
                 , <Code>GroupItem</Code> an object with the following properties:
               </p>
@@ -138,10 +150,6 @@ const sections = [
               </p>
               <ExtendedTableCode>{sectionTypeString}</ExtendedTableCode>
             </td>
-            <td>
-              Array of items to be displayed in the navigation menu. Each item can be a single/simple item, a group item
-              or a section.
-            </td>
             <td>-</td>
           </tr>
           <tr>

packages/lib/src/sidenav/types.ts

@@ -1,6 +1,6 @@
-import { ReactElement, ReactNode } from "react";
-import { SVG } from "../common/utils";
+import { ReactNode } from "react";
 import { SearchBarProps } from "../search-bar/types";
+import { GroupItem, Item } from "../base-menu/types";
 
 type Section = { items: (Item | GroupItem)[]; title?: string };
 
@@ -47,18 +47,4 @@ type Props = {
   topContent?: ReactNode;
 };
 
-type CommonItemProps = {
-  badge?: ReactElement;
-  icon?: string | SVG;
-  label: string;
-};
-type Item = CommonItemProps & {
-  onSelect?: () => void;
-  selected?: boolean;
-};
-type GroupItem = CommonItemProps & {
-  defaultOpen?: boolean;
-  items: (Item | GroupItem)[];
-};
-
 export default Props;