From 42b31c092413ab78a9b2971ed34f8f4b98d38ed2 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Wed, 8 Apr 2026 16:00:26 +0200 Subject: [PATCH 1/3] Fix Item types on Header and Sidenav Code Page --- .../components/header/code/HeaderCodePage.tsx | 2 ++ .../sidenav/code/SidenavCodePage.tsx | 10 ++++---- packages/lib/src/sidenav/types.ts | 23 ++++++------------- 3 files changed, 14 insertions(+), 21 deletions(-) diff --git a/apps/website/screens/components/header/code/HeaderCodePage.tsx b/apps/website/screens/components/header/code/HeaderCodePage.tsx index 7b9d97dce..aa1981ac1 100644 --- a/apps/website/screens/components/header/code/HeaderCodePage.tsx +++ b/apps/website/screens/components/header/code/HeaderCodePage.tsx @@ -12,6 +12,8 @@ const itemTypeString = `{ label: string; onSelect?: () => void; selected?: boolean; + href?: string; + renderItem?: (props: { children: ReactNode }) => ReactNode; }`; const groupItemTypeString = `{ diff --git a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx index 1b67dfc4d..15ba6074e 100644 --- a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx +++ b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx @@ -125,8 +125,12 @@ const sections = [ {"(Item | GroupItem)[] | Section[]"} + + + Array of items to be displayed in the navigation menu. Each item can be a single/simple item, a group item + or a section.

- being Item an object with the following properties: + Being Item an object with the following properties:

{itemTypeString}

@@ -138,10 +142,6 @@ const sections = [

{sectionTypeString} - - Array of items to be displayed in the navigation menu. Each item can be a single/simple item, a group item - or a section. - - diff --git a/packages/lib/src/sidenav/types.ts b/packages/lib/src/sidenav/types.ts index f1a9fc5e0..e97fdadab 100644 --- a/packages/lib/src/sidenav/types.ts +++ b/packages/lib/src/sidenav/types.ts @@ -1,11 +1,16 @@ -import { ReactElement, ReactNode } from "react"; -import { SVG } from "../common/utils"; +import { ReactNode } from "react"; import { SearchBarProps } from "../search-bar/types"; +import { CommonItemProps, GroupItem } from "../base-menu/types"; type Section = { items: (Item | GroupItem)[]; title?: string }; type SearchbarSidenavProps = Omit; +type Item = CommonItemProps & { + onSelect?: () => void; + selected?: boolean; +}; + type Props = { /** * The content rendered in the bottom part of the sidenav, under the navigation menu. @@ -47,18 +52,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; From 22adc0a29c925b4a2829d71a89b39b7ff0d7cc71 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Fri, 10 Apr 2026 11:22:37 +0200 Subject: [PATCH 2/3] Fix based on comments --- .../screens/components/header/code/HeaderCodePage.tsx | 4 ++++ .../screens/components/sidenav/code/SidenavCodePage.tsx | 6 ++++++ packages/lib/src/sidenav/types.ts | 7 +------ 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/apps/website/screens/components/header/code/HeaderCodePage.tsx b/apps/website/screens/components/header/code/HeaderCodePage.tsx index aa1981ac1..ba21811c8 100644 --- a/apps/website/screens/components/header/code/HeaderCodePage.tsx +++ b/apps/website/screens/components/header/code/HeaderCodePage.tsx @@ -75,6 +75,10 @@ const sections = [ Being Item an object with the following properties:

{itemTypeString} +

+ The renderItem property allows wrapping the item with custom routing components (e.g., + Next.js Link) that require children to be passed. +

and GroupItem an object with the following properties:

diff --git a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx index 15ba6074e..b30b70755 100644 --- a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx +++ b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx @@ -12,6 +12,8 @@ const itemTypeString = `{ ${commonItemTypeString} onSelect?: () => void; selected?: boolean; + href?: string; + renderItem?: (props: { children: ReactNode }) => ReactNode; }`; const groupItemTypeString = `{ @@ -133,6 +135,10 @@ const sections = [ Being Item an object with the following properties:

{itemTypeString} +

+ The renderItem property allows wrapping the item with custom routing components (e.g., + Next.js Link) that require children to be passed. +

, GroupItem an object with the following properties:

diff --git a/packages/lib/src/sidenav/types.ts b/packages/lib/src/sidenav/types.ts index e97fdadab..460ee830a 100644 --- a/packages/lib/src/sidenav/types.ts +++ b/packages/lib/src/sidenav/types.ts @@ -1,16 +1,11 @@ import { ReactNode } from "react"; import { SearchBarProps } from "../search-bar/types"; -import { CommonItemProps, GroupItem } from "../base-menu/types"; +import { GroupItem, Item } from "../base-menu/types"; type Section = { items: (Item | GroupItem)[]; title?: string }; type SearchbarSidenavProps = Omit; -type Item = CommonItemProps & { - onSelect?: () => void; - selected?: boolean; -}; - type Props = { /** * The content rendered in the bottom part of the sidenav, under the navigation menu. From 45d1c38d4570040db230b72389fda65331ab9f55 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Fri, 10 Apr 2026 11:31:57 +0200 Subject: [PATCH 3/3] Indent renderItem prop --- .../website/screens/components/header/code/HeaderCodePage.tsx | 4 +++- .../screens/components/sidenav/code/SidenavCodePage.tsx | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/apps/website/screens/components/header/code/HeaderCodePage.tsx b/apps/website/screens/components/header/code/HeaderCodePage.tsx index ba21811c8..430cb2d98 100644 --- a/apps/website/screens/components/header/code/HeaderCodePage.tsx +++ b/apps/website/screens/components/header/code/HeaderCodePage.tsx @@ -13,7 +13,9 @@ const itemTypeString = `{ onSelect?: () => void; selected?: boolean; href?: string; - renderItem?: (props: { children: ReactNode }) => ReactNode; + renderItem?: + (props: { children: ReactNode }) + => ReactNode; }`; const groupItemTypeString = `{ diff --git a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx index b30b70755..a14e3861e 100644 --- a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx +++ b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx @@ -13,7 +13,9 @@ const itemTypeString = `{ onSelect?: () => void; selected?: boolean; href?: string; - renderItem?: (props: { children: ReactNode }) => ReactNode; + renderItem?: + (props: { children: ReactNode }) + => ReactNode; }`; const groupItemTypeString = `{