feat: add Sidebar component

[karrui]

This is the first iteration of a sidebar components, which covers I think ~80% of requirements.

Features of the sidebar:

• Create sidebar programatically by passing props, able to cast SidebarItem to any React element:

import {Link} from 'react-router-dom'

const items: SidebarProps['items'] = [
  { type: 'header', children: 'Header' },
  {
    children: 'Inbox',
    icon: BxMailSend,
    props: { as: 'a', href: '#' }, // <-- pass `as` prop
    isActive: () => {
      // Example of how to set active state
      const currentLink = window.location.pathname
      return currentLink === '/inbox'
    },
  },
  { children: 'Notes', icon: BxsStar },
  { children: 'Activity', icon: BxCalendar },
  { children: 'Explore', icon: BxLinkExternal },
  {
    label: 'Settings',
    icon: BxWrench,
    isActive: true, // <-- can also just set active state with boolean
    subItems: [  // <-- nest items, same signature as SidebarProps['items']
      {
        icon: BxsUser,
        children: 'Profile',
      },
      {
        children: 'Security & Privacy',
        icon: BxTrash,
        isActive: true,
      },
      {
        children:
          'Notifications With Long Label That Definitely Overflows In Mobile',
        icon: BxsTimeFive,
      },
    ],
  },
]

// Usage
<Sidebar items={items} />

• Can also build Sidebar declaratively:

const AppSidebar = () => (
    <SidebarContainer>
      <SidebarHeader>Header</SidebarHeader>
      <SidebarItem>Child</SidebarItem>
      <SidebarList
        onlyCaretToggle
        label="Clicking this will not toggle the list, will need to click the caret"
      >
        <SidebarItem>Child item</SidebarItem>
      </SidebarList>
      <SidebarList defaultIsExpanded label="Default expanded">
        <SidebarItem
          as="button"
          onClick={() => alert('This could be a link too')}
        >
          Child button example
        </SidebarItem>
        <SidebarItem as="a" href="https://open.gov.sg">
          Child link example
        </SidebarItem>
      </SidebarList>
    </SidebarContainer>
)

See the storybook stories for more examples.

TODO/Not inside this iteration:

• Collapsed view?? Maybe not also, prefer Drawer usage which can just be wrapped around this component
• Notification/Number badge in sidebar item
• More templates/example usages, maybe for logout button, etc. Don't need new components, just an example.

[netlify]

✅ Deploy Preview for objective-bell-0ffbfb canceled.

Name	Link
🔨 Latest commit	ab29cd5
🔍 Latest deploy log	https://app.netlify.com/sites/objective-bell-0ffbfb/deploys/645b38a47751130007858e1c