@graffft-waggle/expandable-side-nav NPM

filename: /packages/molecules/ExpandableSideNav/ExpandableSideNav.tsx

ExpandableSideNav API

The API documentation of the ExpandableSideNav Graffft Waggle component.

Import

import { ExpandableSideNav } from '@graffft-waggle/expandable-side-nav';

ExpandableSideNav

interface NavItem {
  key: string;
  navItem: string | number | JSX.Element;
  navItemColor?: string;
  navItemHoverColor?: string;
  navItemBgHoverColor?: string;
}

Optional Props

Name	Type	Default	Description
`sideNavLogo`	`string\\|number\\|JSX.Element`	`undefined`	a logo for the side nav header
`sideNavItems`	`NavItem[]`	`[]`	items in side nav
`isExpanded`	`boolean`	`false`	Expanded state for sidenav
`expandableSideNavZIndex`	`number`	`300`	z-index for expandable side nav
`expandableSideNavBgOverlayColor`	`string`	`rgba(0, 0, 0, 0.4)`	expanded state background overlay color
`handleCloseSideNav`	`() => void`	`() => {}`	callback function to close side nav
`isSetToTheLeftSide`	`boolean`	`false`	true if nav should expand from left side of viewport
`sideNavHeaderHeight`	`string`	`77px`	height of side nav header item
`sideNavItemHeight`	`string`	`54px`	height of each side nav item
`sideNavItemPadding`	`string`	`24px`	padding separating text from side nav border
`sideNavBurgerColor`	`string`	`#000`	burger color in side nav