const [open, setOpen] = useState(false);

<Navbar
  onMenuToggle={() => setOpen((o) => !o)}
  …
/>
<Sidebar
  responsive
  breakpoint="lg"
  backdrop="dim"
  open={open}
  onClose={() => setOpen(false)}
>
  <SidebarGroup label="Favorites">
    <SidebarMenuItem
      icon={faListCheck}
      label="Work List"
      selected
    />
    <SidebarMenuItem
      icon={faCalendar}
      label="Calendar"
    />
  </SidebarGroup>
  <SidebarGroup label="Workspace">
    <SidebarMenuItem
      icon={faWrench}
      label="Maintenance Requests"
    />
    <SidebarMenuItem
      icon={faBuilding}
      label="Buildings"
    />
  </SidebarGroup>
</Sidebar>