side-nav

Import

import {
  AuthMenuButton,
  AuthMenuDetails,
  Menu,
  MenuButton,
  MenuDivider,
  MenuItem,
  MenuList,
  SideNav,
  SideNavDivider,
  SideNavItem,
  SideNavLogo,
} from '@xpanseinc/nebula'

Usage

Add isActive to the SideNavItem that matches the current path.

<SideNav style={{ height: 500 }}>
  <SideNavLogo href="/" aria-label="Home" />

  <SideNavItem title="Item 1">
    <a>
      <Link href="/">
        <HomeIcon />
      </Link>
    </a>
  </SideNavItem>

  <SideNavItem title="New Tab">
    <a note="See below for React Router implamentation">
      <Link href="http://www.xpanse.com" target="_blank">
        <FileListIcon />
      </Link>
    </a>
  </SideNavItem>

  <SideNavItem title="Item 2">
    <a className="active">
      <Link href="/">
        <InboxIcon />
      </Link>
    </a>
  </SideNavItem>

  <SideNavDivider />

  <Menu>
    <MenuButton as={AuthMenuButton}>
      XP
    </MenuButton>

    <MenuList>
      <MenuItem disabled style={{color: 'inherit'}}>
        <AuthMenuDetails
          email="first.mcsurname@organization.inc"
          organization="Organization Inc"
          username="First McSurname"
          userRole="Admin"
          version="v22.09.28"
        />
      </MenuItem>

      <MenuDivider />

      <MenuItem
        icon={<LogoutBoxIcon />}
        onClick={() => alert('Signed out')}
      >
        Sign out
      </MenuItem>
    </MenuList>
  </Menu>
</SideNav>

For <SideNavItem/> use React Roures <NavLink/> component to navigate. This example ues an array of link objects looking like { path: '/orders-list', title: 'Orders', Icon: FileListIcon },

{navLinks.map(({ path, title, Icon }) => (
  <SideNavItem key={path} title={title}>
    <NavLink to={path}>
      <Icon size={20} />
    </NavLink>
  </SideNavItem>
))}