feat(react,styles): add Drawer component

docs/components/Navigation.css

@@ -14,6 +14,16 @@
   --docs-navigation-divider-color: var(--stroke-dark);
 }
 
+body.TopBar--thin .NavigationDrawer {
+  --top-bar-height: var(--top-bar-height-thin);
+}
+
+.NavigationDrawer {
+  --drawer-top: var(--top-bar-height);
+  --drawer-height: calc(100vh - var(--top-bar-height));
+  overflow-y: auto;
+}
+
 .Navigation {
   width: var(--menu-width);
   background-color: var(--docs-navigation-background-color);

docs/components/Navigation.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Icon, ClickOutsideListener, Scrim } from '@deque/cauldron-react';
+import { Icon, Scrim } from '@deque/cauldron-react';
 import { Link, useLocation } from 'react-router-dom';
 import { components, pages, foundations } from '../collections';
 import './Navigation.css';
@@ -38,12 +38,11 @@ const NavigationLink = ({
 
 interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
   contentRef: React.RefObject<HTMLElement>;
-  active?: boolean;
-  onClick?: () => void;
+  onNavigation?: () => void;
 }
 
 function Navigation(
-  { contentRef, active = true, onClick = () => {}, ...props }: NavigationProps,
+  { contentRef, onNavigation = () => {}, ...props }: NavigationProps,
   ref: React.Ref<HTMLElement>
 ) {
   const location = useLocation();
@@ -59,7 +58,7 @@ function Navigation(
       }
     }
 
-    onClick();
+    onNavigation();
   };
 
   const activeComponents = components.filter(
@@ -78,7 +77,6 @@ function Navigation(
           text={name}
           active={isActive}
           onClick={handleClick}
-          tabIndex={!active ? -1 : undefined}
         />
       </li>
     );

docs/index.js

@@ -3,14 +3,13 @@ import { render } from 'react-dom';
 import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import classNames from 'classnames';
-import focusable from 'focusable';
 import mdxComponents from './mdx-components';
 import Footer from './components/Footer';
 import ComponentLayout from './components/ComponentLayout';
-import Drawer from './components/Drawer';
 import Navigation from './components/Navigation';
 import {
   Code,
+  Drawer as DrawerComponent,
   TopBar,
   MenuBar,
   TopBarTrigger,
@@ -49,30 +48,19 @@ const App = () => {
   });
   const [topBarMenuItem, setTopBarMenuItem] = useState(null);
   const workspaceRef = useRef(null);
+  const focusReturnRef = useRef(null);
   const navigationRef = useRef(null);
   const topBarTrigger = useRef();
   const [workspaceTabIndex, setWorkspaceTabIndex] = useState(-1);
   const { theme, toggleTheme } = useThemeContext();
 
-  const focusTopBarMenuItem = () => {
-    if (!topBarMenuItem) {
-      return;
-    }
-
-    topBarMenuItem?.focus();
-  };
-
   const onTriggerClick = (e) => {
     const { show } = state;
 
     if (e) {
       e.preventDefault();
     }
 
-    if (show && topBarTrigger?.current) {
-      topBarTrigger?.current?.focus();
-    }
-
     setState({ show: !show });
   };
 
@@ -115,14 +103,6 @@ const App = () => {
     );
   };
 
-  useEffect(() => {
-    document.addEventListener('focusTopBarMenu', focusTopBarMenuItem);
-
-    return () => {
-      document.removeEventListener('focusTopBarMenu', focusTopBarMenuItem);
-    };
-  }, []);
-
   const { show, thin } = state;
 
   const [drawerIsActive, setDrawerIsActive] = useState(false);
@@ -143,20 +123,15 @@ const App = () => {
   }, []);
 
   useEffect(() => {
-    if (state.show) {
-      // Focus on the first focusable navigation item
-      navigationRef.current?.querySelector('a')?.focus();
-    } else {
-      workspaceRef.current?.focus();
-    }
-  }, [state.show]);
-
-  useEffect(() => {
-    const firstFocusableElement =
-      workspaceRef.current?.querySelector(focusable);
-    setWorkspaceTabIndex(!firstFocusableElement ? 0 : -1);
+    // ensure focus return always "resets" after a navigation
+    focusReturnRef.current = null;
   });
 
+  // Only render the collapse-able drawer component when there is space to do so
+  const Drawer = drawerIsActive
+    ? DrawerComponent
+    : (props) => <Fragment>{props.children}</Fragment>;
+
   return (
     <Router>
       <Helmet
@@ -221,17 +196,24 @@ const App = () => {
       </TopBar>
       <div className="Content">
         <Drawer
-          active={drawerIsActive}
+          className="NavigationDrawer"
           open={show}
+          position="left"
+          focusOptions={{
+            initialFocus: navigationRef,
+            returnFocus: focusReturnRef
+          }}
           onClose={() => setState({ show: false })}
         >
           <Navigation
             id="navigation"
-            active={show || !drawerIsActive}
             ref={navigationRef}
             contentRef={workspaceRef}
-            onClick={() => setState({ show: false })}
-            aria-hidden={!show && drawerIsActive}
+            tabIndex={-1}
+            onNavigation={() => {
+              setState({ show: false });
+              focusReturnRef.current = workspaceRef.current;
+            }}
           />
         </Drawer>
         <Workspace