feat: Simple drawer component

assets/css/_drawer.scss

@@ -0,0 +1,48 @@
+/* Panel + Drawer(2rem) should have 100% viewport width - 10px to match leaflet margin */
+$map-page-search-panel-width: Min(24rem, calc((100vw - 2rem - 10px)));
+
+$z-map-page-context: (
+  "drawer-backdrop": 199,
+  "drawer": 200,
+);
+
+.c-drawer {
+  width: $map-page-search-panel-width;
+  height: 100%;
+  background-color: $color-gray-50;
+  position: relative;
+  z-index: map-get($z-map-page-context, "drawer");
+  transition: $transition-slide;
+
+  &--visible {
+    left: 0;
+  }
+
+  &--hidden {
+    width: $map-page-search-panel-width;
+    left: calc(-1 * #{$map-page-search-panel-width});
+  }
+}
+
+.c-drawer .c-drawer-tab {
+  @include button-primary-new;
+  left: 100%;
+}
+
+.c-drawer__backdrop-button {
+  display: none;
+
+  .c-drawer--visible ~ & {
+    display: block;
+    width: 100%;
+
+    // Ignore flex layout and fill screen
+    position: absolute;
+    inset: 48.8px 0 0 0;
+
+    // Inbetween panel and map
+    z-index: map-get($z-map-page-context, "drawer-backdrop");
+
+    backdrop-filter: blur(3.25px);
+  }
+}

assets/css/_drawer_tab.scss

@@ -13,7 +13,6 @@
 }
 
 .c-drawer-tab__tab-button {
-  @include button-transparent;
   @include button-icon(0.9rem);
   font-size: 2rem;
   line-height: 1.5rem;

assets/css/app.scss

@@ -46,6 +46,7 @@ $vpp-location-padding: 1rem;
 @import "directions_button";
 @import "disconnected_modal";
 @import "diversion_page";
+@import "drawer";
 @import "drawer_tab";
 @import "dropdown";
 @import "filter_accordion";

assets/src/components/drawer.tsx

@@ -0,0 +1,31 @@
+import React, { ReactElement, useState } from "react"
+import DrawerTab from "../components/drawerTab"
+import { joinClasses } from "../helpers/dom"
+
+interface Props {
+  children?: ReactElement<HTMLElement>
+}
+
+const Drawer = ({ children }: Props): ReactElement<HTMLDivElement> => {
+  const [drawerOpen, setDrawerOpen] = useState(true)
+  const toggleDrawer = () => setDrawerOpen((drawerOpen) => !drawerOpen)
+
+  return (
+    <>
+      <div
+        className={joinClasses([
+          "c-drawer",
+          ...(drawerOpen
+            ? ["c-drawer--visible"]
+            : ["c-drawer--hidden", "u-hideable--hidden"]),
+        ])}
+      >
+        <DrawerTab isVisible={drawerOpen} toggleVisibility={toggleDrawer} />
+        {children}
+      </div>
+      <button onClick={toggleDrawer} className="c-drawer__backdrop-button" />
+    </>
+  )
+}
+
+export default Drawer