  
      return (
          <menu className={classNames('sidebar', classes.root)}>
              {items.map((section, i) => (
                  <ul className={classes.section} key={i}>
                      <li className={classNames('h0', classes.label)}>{section.label}</li>
                      {section.items.map(({ text, url, onClick, menu, isActive }, j) => {
                          const currentMenu = menu || pageMenu || []
                          const active = isActive || slug === url
 
</s> remove     .crumbs
 </s> add     .root
        flex: 100%
        width: 100%
        margin-top: var(--height-nav)
        display: block

    .section </s> remove @include breakpoint(max, sm)
    .section
        flex: 1 1 0
        padding: 1.25rem 0
        border-bottom: 1px solid var(--color-subtle)
        margin: 0

        &:not(:last-child)
            border-right: 1px solid var(--color-subtle)

 </s> add  </s> remove @include breakpoint(max, sm)
    .root
        flex: 100%
        width: 100%
        margin-top: var(--height-nav)
        display: flex
        flex-flow: row wrap
        width: 100%
 </s> add .dropdown-select
    width: 100%
    padding-left: 1rem
            <DropdownNavigation items={items} defaultValue={slug} />
  
      return (
          <menu className={classNames('sidebar', classes.root)}>
            <DropdownNavigation items={items} defaultValue={slug} />
              {items.map((section, i) => (
                  <ul className={classes.section} key={i}>
                      <li className={classNames('h0', classes.label)}>{section.label}</li>
                      {section.items.map(({ text, url, onClick, menu, isActive }, j) => {
                          const currentMenu = menu || pageMenu || []
                          const active = isActive || slug === url
keep keep add keep keep keep keep keep keep
 Use dropdown for collapsed sidebar menu 
website/src/components/sidebar.js