@graffft-waggle/expandable-side-nav

---

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

Demos

• TODO