SidebarMenu component

The sidebar menu provides components for creating a left-anchored permanent menu using the Material UI library.

Remember to add your own <ThemeProvider> in your application.

Usage

Import like this:

import { SidebarMenu, MenuList } from '@tdcerhverv/sidebarmenu';

Use like this:

<SidebarMenu>
    {children}
    <MenuList items={[items]}>
    {more children}
</SidebarMenu>

The wrapper component <SidebarMenu> provides the flexbox wrapper, while the <MenuList> generates the actual menu items.

Props

SidebarMenu

The wrapper takes 2 argument; className and width, which defaults to 18rem, which translates to 288px.

export interface ISidebarMenu {
  children?: ReactNode;
  width?: number | string; // defaults to 18rem.
  className?: string;
}

MenuList

The menu list takes 3 arguments; items, optional subheader which will create a small header before the first item, and optionally you can specify the element type linkComponent, which will be used for all items.

interface IMenuList {
  items: Array<IMenuItem>;
  subheader?: string;
  linkComponent?: ElementType;
}

The items property is an array of menu items as described below.

MenuItem & SubmenuItem

interface Item {
  text: string;
  href?: string;
  linkComponent?: ElementType;
  linkProps?: {
    [key: string]: any;
  };
}

interface SubmenuItem extends Item {}

export interface IMenuItem extends Item {
  icon?: IIcon['icon'];
  submenu?: SubmenuItem[];
}

The icon property matches the @tdcerhverv/icon component, and accepts svg icons as react components.

The linkProp property can be used for anything, but is generally provided for tracking attributes.

The linkComponent property allows for specifying the element type, either a string or a react component.