Skip to content

BA-3031 Add slot props and customization options to navigation compon… #331

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
samueljansem wants to merge 3 commits into
base: master
Choose a base branch
from
Open

BA-3031 Add slot props and customization options to navigation compon… #331

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bb1747f
BA-3031 Add slot props and customization options to navigation compon…
samueljansem Jan 21, 2026
9181817
Add slotProps to Header component in NavigationLayout
samueljansem Jan 21, 2026
d466da2
Bump version to 1.5.0 and update CHANGELOG for enhanced navigation co…
samueljansem Jan 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# @baseapp-frontend/components

## 1.5.0

### Minor Changes

- Navigation components now support extended customization through new optional properties for drawer configuration, slot customization, and toggle button styling, enabling more flexible navigation component theming and behavior configuration.

## 1.4.19

### Patch Changes
Expand Down
17 changes: 14 additions & 3 deletions packages/components/modules/navigations/web/NavCentered/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,24 @@ import NavSectionHorizontal from '../__shared__/NavSectionHorizontal'
import VerticalDrawer from '../__shared__/VerticalDrawer'
import { NavCenteredProps } from './types'

const NavCentered: FC<NavCenteredProps> = ({ navData, openNav, onCloseNav }) => {
const NavCentered: FC<NavCenteredProps> = ({
navData,
openNav,
onCloseNav,
slotProps,
VerticalDrawerProps,
}) => {
const lgDown = useResponsive('down', 'lg')

if (lgDown) {
return (
<>
<VerticalDrawer navData={navData} openNav={openNav} onCloseNav={onCloseNav} />
<VerticalDrawer
navData={navData}
openNav={openNav}
onCloseNav={onCloseNav}
DrawerProps={VerticalDrawerProps}
/>
<div />
</>
)
Expand All @@ -29,7 +40,7 @@ const NavCentered: FC<NavCenteredProps> = ({ navData, openNav, onCloseNav }) =>
},
}}
>
<NavSectionHorizontal navData={navData} hasTabLayout />
<NavSectionHorizontal navData={navData} hasTabLayout slotProps={slotProps} />
</Scrollbar>
)
}
Expand Down
6 changes: 5 additions & 1 deletion packages/components/modules/navigations/web/NavCentered/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import { NavigationData } from '../types'
import { DrawerProps } from '@mui/material'

import { NavigationData, SlotProps } from '../types'

export interface NavCenteredProps {
navData: NavigationData
openNav: boolean
onCloseNav: VoidFunction
slotProps?: SlotProps
VerticalDrawerProps?: Partial<DrawerProps>
}
19 changes: 16 additions & 3 deletions packages/components/modules/navigations/web/NavHorizontal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,25 @@ import { HEADER_HEIGHT } from '../constants'
import HeaderShadow from './HeaderShadow'
import { NavHorizontalProps } from './types'

const NavHorizontal: FC<NavHorizontalProps> = ({ navData, openNav, onCloseNav }) => {
const NavHorizontal: FC<NavHorizontalProps> = ({
navData,
openNav,
onCloseNav,
slotProps,
VerticalDrawerProps,
}) => {
const theme = useTheme()
const lgDown = useResponsive('down', 'lg')

if (lgDown) {
return <VerticalDrawer navData={navData} openNav={openNav} onCloseNav={onCloseNav} />
return (
<VerticalDrawer
navData={navData}
openNav={openNav}
onCloseNav={onCloseNav}
DrawerProps={VerticalDrawerProps}
/>
)
}

return (
Expand All @@ -47,7 +60,7 @@ const NavHorizontal: FC<NavHorizontalProps> = ({ navData, openNav, onCloseNav })
},
}}
>
<NavSectionHorizontal navData={navData} />
<NavSectionHorizontal navData={navData} slotProps={slotProps} />
</Scrollbar>
</Toolbar>
<HeaderShadow />
Expand Down
6 changes: 5 additions & 1 deletion packages/components/modules/navigations/web/NavHorizontal/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import { NavigationData } from '../types'
import { DrawerProps } from '@mui/material'

import { NavigationData, SlotProps } from '../types'

export interface NavHorizontalProps {
navData: NavigationData
openNav: boolean
onCloseNav: VoidFunction
slotProps?: SlotProps
VerticalDrawerProps?: Partial<DrawerProps>
}
17 changes: 15 additions & 2 deletions packages/components/modules/navigations/web/NavMini/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,22 @@ const NavMini: FC<NavMiniProps> = ({
openNav,
onCloseNav,
hideToggleButton = false,
slotProps,
VerticalDrawerProps,
NavToggleButtonProps,
}) => {
const lgDown = useResponsive('down', 'lg')

if (lgDown) {
return <VerticalDrawer navData={navData} openNav={openNav} onCloseNav={onCloseNav} />
return (
<VerticalDrawer
navData={navData}
openNav={openNav}
onCloseNav={onCloseNav}
LogoIcon={LogoIcon}
DrawerProps={VerticalDrawerProps}
/>
)
}

return (
Expand All @@ -40,9 +51,11 @@ const NavMini: FC<NavMiniProps> = ({
>
{!hideToggleButton && (
<NavToggleButton
{...NavToggleButtonProps}
sx={{
top: 22,
left: NAV_WIDTH.MINI - 12,
...NavToggleButtonProps?.sx,
}}
/>
)}
Expand All @@ -61,7 +74,7 @@ const NavMini: FC<NavMiniProps> = ({
<LogoIcon />
</Logo>
)}
<NavSectionMini navData={navData} />
<NavSectionMini navData={navData} slotProps={slotProps} />
</Stack>
</Box>
)
Expand Down
7 changes: 6 additions & 1 deletion packages/components/modules/navigations/web/NavMini/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { PartialLogoProps } from '@baseapp-frontend/design-system/components/web/logos'

import { NavigationData } from '../types'
import { DrawerProps, IconButtonProps } from '@mui/material'

import { NavigationData, SlotProps } from '../types'

export interface NavMiniProps {
navData: NavigationData
Expand All @@ -9,4 +11,7 @@ export interface NavMiniProps {
LogoIcon?: React.FC
LogoProps?: PartialLogoProps
hideToggleButton?: boolean
slotProps?: SlotProps
VerticalDrawerProps?: Partial<DrawerProps>
NavToggleButtonProps?: Partial<IconButtonProps>
}
17 changes: 14 additions & 3 deletions packages/components/modules/navigations/web/NavVertical/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,22 @@ const NavVertical: FC<NavVerticalProps> = ({
openNav,
onCloseNav,
hideToggleButton = false,
slotProps,
VerticalDrawerProps,
NavToggleButtonProps,
}) => {
const lgDown = useResponsive('down', 'lg')

if (lgDown) {
return <VerticalDrawer navData={navData} openNav={openNav} onCloseNav={onCloseNav} />
return (
<VerticalDrawer
navData={navData}
openNav={openNav}
onCloseNav={onCloseNav}
LogoIcon={LogoIcon}
DrawerProps={VerticalDrawerProps}
/>
)
}

return (
Expand All @@ -37,7 +48,7 @@ const NavVertical: FC<NavVerticalProps> = ({
display: { xs: 'none', lg: 'flex' },
}}
>
{!hideToggleButton && <NavToggleButton />}
{!hideToggleButton && <NavToggleButton {...NavToggleButtonProps} />}
<Stack
sx={{
height: 1,
Expand All @@ -61,7 +72,7 @@ const NavVertical: FC<NavVerticalProps> = ({
<LogoIcon />
</Logo>
)}
<NavSectionVertical navData={navData} />
<NavSectionVertical navData={navData} slotProps={slotProps} />
<Box sx={{ flexGrow: 1 }} />
</Scrollbar>
</Stack>
Expand Down
7 changes: 6 additions & 1 deletion packages/components/modules/navigations/web/NavVertical/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { PartialLogoProps } from '@baseapp-frontend/design-system/components/web/logos'

import { NavigationData } from '../types'
import { DrawerProps, IconButtonProps } from '@mui/material'

import { NavigationData, SlotProps } from '../types'

export interface NavVerticalProps {
navData: NavigationData
Expand All @@ -9,4 +11,7 @@ export interface NavVerticalProps {
openNav: boolean
onCloseNav: VoidFunction
hideToggleButton?: boolean
slotProps?: SlotProps
VerticalDrawerProps?: Partial<DrawerProps>
NavToggleButtonProps?: Partial<IconButtonProps>
}
25 changes: 23 additions & 2 deletions packages/components/modules/navigations/web/NavigationLayout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ const NavigationLayout: FC<NavigationLayoutProps> = ({
children,
MainContainerProps = {},
MainContainer = DefaultMainContainer,
slotProps,
VerticalDrawerProps,
NavToggleButtonProps,
}) => {
const { settings } = useUISettings()
const nav = useBoolean()
Expand All @@ -44,7 +47,13 @@ const NavigationLayout: FC<NavigationLayoutProps> = ({
AccountMenuProps={AccountMenuProps}
ToolbarProps={ToolbarProps}
>
<NavCentered navData={navData} openNav={nav.value} onCloseNav={nav.onFalse} />
<NavCentered
navData={navData}
openNav={nav.value}
onCloseNav={nav.onFalse}
VerticalDrawerProps={VerticalDrawerProps}
slotProps={slotProps}
/>
</Header>
<MainContainer isNavCentered {...MainContainerProps}>
{children}
Expand All @@ -64,7 +73,13 @@ const NavigationLayout: FC<NavigationLayoutProps> = ({
AccountMenuProps={AccountMenuProps}
ToolbarProps={ToolbarProps}
/>
<NavHorizontal navData={navData} openNav={nav.value} onCloseNav={nav.onFalse} />
<NavHorizontal
navData={navData}
openNav={nav.value}
onCloseNav={nav.onFalse}
slotProps={slotProps}
VerticalDrawerProps={VerticalDrawerProps}
/>
<MainContainer isNavHorizontal {...MainContainerProps}>
{children}
</MainContainer>
Expand Down Expand Up @@ -97,6 +112,9 @@ const NavigationLayout: FC<NavigationLayoutProps> = ({
onCloseNav={nav.onFalse}
LogoIcon={LogoIcon}
LogoProps={LogoProps}
slotProps={slotProps}
VerticalDrawerProps={VerticalDrawerProps}
NavToggleButtonProps={NavToggleButtonProps}
/>
<MainContainer isNavMini {...MainContainerProps}>
{children}
Expand Down Expand Up @@ -129,6 +147,9 @@ const NavigationLayout: FC<NavigationLayoutProps> = ({
LogoProps={LogoProps}
openNav={nav.value}
onCloseNav={nav.onFalse}
slotProps={slotProps}
VerticalDrawerProps={VerticalDrawerProps}
NavToggleButtonProps={NavToggleButtonProps}
/>
<MainContainer {...MainContainerProps}>{children}</MainContainer>
</Box>
Expand Down
7 changes: 5 additions & 2 deletions packages/components/modules/navigations/web/NavigationLayout/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import { FC, PropsWithChildren } from 'react'

import { PartialLogoProps } from '@baseapp-frontend/design-system/components/web/logos'

import { ToolbarProps as MuiToolbarProps } from '@mui/material'
import { DrawerProps, IconButtonProps, ToolbarProps as MuiToolbarProps } from '@mui/material'

import { AccountMenuProps } from '../Header/AccountMenu/types'
import { NavigationData } from '../types'
import { NavigationData, SlotProps } from '../types'
import { MainContainerProps } from './MainContainer/types'

export interface NavigationLayoutProps extends PropsWithChildren {
Expand All @@ -17,4 +17,7 @@ export interface NavigationLayoutProps extends PropsWithChildren {
ToolbarProps?: MuiToolbarProps
MainContainerProps?: Partial<MainContainerProps>
MainContainer?: FC<MainContainerProps>
slotProps?: SlotProps
VerticalDrawerProps?: Partial<DrawerProps>
NavToggleButtonProps?: Partial<IconButtonProps>
}
12 changes: 11 additions & 1 deletion packages/components/modules/navigations/web/__shared__/VerticalDrawer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,15 @@ import { NAV_WIDTH } from '../../constants'
import NavSectionVertical from '../NavSectionVertical'
import { VerticalDrawerProps } from './types'

const VerticalDrawer: FC<VerticalDrawerProps> = ({ navData, LogoIcon, openNav, onCloseNav }) => {
const VerticalDrawer: FC<VerticalDrawerProps> = ({
navData,
LogoIcon,
openNav,
onCloseNav,
DrawerProps = {},
}) => {
const pathname = usePathname()
const { PaperProps, ...restDrawerProps } = DrawerProps

useEffect(() => {
if (openNav) {
Expand All @@ -27,11 +34,14 @@ const VerticalDrawer: FC<VerticalDrawerProps> = ({ navData, LogoIcon, openNav, o
open={openNav}
onClose={onCloseNav}
PaperProps={{
...PaperProps,
sx: {
width: NAV_WIDTH.VERTICAL,
height: '100% !important',
...PaperProps?.sx,
},
}}
{...restDrawerProps}
>
<Scrollbar
sx={{
Expand Down
3 changes: 3 additions & 0 deletions packages/components/modules/navigations/web/__shared__/VerticalDrawer/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { DrawerProps } from '@mui/material'

import { NavigationData } from '../../types'

export interface VerticalDrawerProps {
navData: NavigationData
LogoIcon?: React.FC
openNav: boolean
onCloseNav: VoidFunction
DrawerProps?: Partial<DrawerProps>
}
2 changes: 1 addition & 1 deletion packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@baseapp-frontend/components",
"description": "BaseApp components modules such as comments, notifications, messages, and more.",
"version": "1.4.19",
"version": "1.5.0",
"sideEffects": false,
"scripts": {
"build": "rm -rf dist && pnpm relay && tsc --build tsconfig.build.json",
Expand Down
Loading