Sidebar

used for minicart toggle, and navigation

Phase 2

1. need to render overlay
2. when clicking overlay, it should close all sidebar
3. need to fix the array of things => Map
4. need to render multiple maps
5. need to animate

Invariants

1. only 1 sidebar ever is open at a time

Requirements

1. works with multi state
2. works with multiple sidebars not 1
3. has class-names so it can be styled elsewhere OR only renderProps
4. typings
5. renderBody
6. renderBox/renderItem
7. presets - shouldUseOverlay

Learn More

• https://www.thecssninja.com/css/pointer-events-60fps
• https://material.io/guidelines/patterns/navigation.html
• https://reactcommunity.org/react-transition-group/#Transition

DOM ASCII

before

  <SidebarWrap>
    <PushableBody>
      # shared overlay
      <Overlay />

      # one for left side
      <SidebarBox>
        <SidebarInner>
          {leftSidebarContents}
        </SidebarInner>
      </SidebarBox>

      # one for right side
      <SidebarBox>
        <SidebarInner>
          {rightOrTopSidebarContents}
        </SidebarInner>
      </SidebarBox>

    <PushableBody>
  <SidebarWrap>

after

<SidebarGroup>

  {
    renderSidebars() {
      return [
        <Sidebar>
          {children}
        </Sidebar>
      ]
    }
  }

</SidebarGroup>

TODO