Breakpoint simplification (#2379)

* feat: simplify nav logic across various breakpoints

* refactor: get rid of now-unused .l-nav--medium style

* feat: make panels open on top of top nav at smaller breakpoints

assets/css/_nav.scss

@@ -10,16 +10,6 @@
   height: 100%;
 }
 
-.l-nav--medium {
-  display: grid;
-  gap: 0;
-  grid-template-columns: max-content minmax(0, 1fr);
-  grid-template-rows: minmax(0, 1fr);
-  grid-template-areas: "left content";
-  width: 100%;
-  height: 100%;
-}
-
 .l-nav--narrow {
   display: grid;
   gap: 0;

assets/src/components/nav.tsx

@@ -1,19 +1,16 @@
-import React, { useContext } from "react"
-import { toggleMobileMenu } from "../state"
+import React from "react"
 import appData from "../appData"
 import useScreenSize from "../hooks/useScreenSize"
 import LeftNav from "./nav/leftNav"
 import TopNav from "./nav/topNav"
 import MobilePortraitNav from "./nav/mobilePortraitNav"
-import { StateDispatchContext } from "../contexts/stateDispatchContext"
 import { usePanelStateFromStateDispatchContext } from "../hooks/usePanelState"
 
 interface Props {
   children?: React.ReactNode
 }
 
 const Nav: React.FC<Props> = ({ children }) => {
-  const [, dispatch] = useContext(StateDispatchContext)
   const deviceType = useScreenSize()
 
   const { isViewOpen } = usePanelStateFromStateDispatchContext()
@@ -26,46 +23,30 @@ const Nav: React.FC<Props> = ({ children }) => {
           <div className="l-nav__app-content">{children}</div>
         </div>
       )
-    case "mobile_landscape_tablet_portrait":
-      return (
-        <div className="l-nav--medium">
-          <div
-            className="l-nav__nav-bar l-nav__nav-bar--left"
-            hidden={isViewOpen}
-          >
-            <LeftNav
-              toggleMobileMenu={() => dispatch(toggleMobileMenu())}
-              defaultToCollapsed={true}
-              dispatcherFlag={readDispatcherFlag()}
-              closePickerOnViewOpen={true}
-            />
-          </div>
-          <div className="l-nav__app-content">{children}</div>
-        </div>
-      )
-    case "tablet":
-      return (
-        <div className="l-nav--medium">
-          <div className="l-nav__nav-bar l-nav__nav-bar--left">
-            <LeftNav
-              toggleMobileMenu={() => dispatch(toggleMobileMenu())}
-              defaultToCollapsed={true}
-              dispatcherFlag={readDispatcherFlag()}
-            />
-          </div>
-          <div className="l-nav__app-content">{children}</div>
-        </div>
-      )
     default:
       return (
         <div className="l-nav--wide">
           <>
-            <div className="l-nav__nav-bar l-nav__nav-bar--top">
+            <div
+              className="l-nav__nav-bar l-nav__nav-bar--top"
+              hidden={
+                isViewOpen && deviceType === "mobile_landscape_tablet_portrait"
+              }
+            >
               <TopNav />
             </div>
-            <div className="l-nav__nav-bar l-nav__nav-bar--left">
+            <div
+              className="l-nav__nav-bar l-nav__nav-bar--left"
+              hidden={
+                isViewOpen && deviceType === "mobile_landscape_tablet_portrait"
+              }
+            >
               <LeftNav
-                defaultToCollapsed={false}
+                defaultToCollapsed={
+                  deviceType === "mobile_landscape_tablet_portrait" ||
+                  deviceType === "tablet"
+                }
+                key={deviceType}
                 dispatcherFlag={readDispatcherFlag()}
               />
             </div>

assets/tests/components/nav.test.tsx

@@ -68,6 +68,7 @@ describe("Nav", () => {
     )
 
     expect(result.getByTitle("Route Ladders")).not.toBeVisible()
+    expect(result.getByTitle("Skate")).not.toBeVisible()
   })
 
   test("renders tablet nav content", () => {