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