From 6973e1044fa67fe69fb2ec9c69c18854a22573c4 Mon Sep 17 00:00:00 2001
From: Skander Mzali <skanderm@gmail.com>
Date: Mon, 11 Mar 2024 17:48:11 -0700
Subject: [PATCH 1/2] Add function to open drawer on brand click in mobile

---
 ui/src/components/Header.tsx            | 19 +++++++++++++------
 ui/src/components/layouts/MapLayout.tsx |  6 +++++-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index 58b70054..0831e844 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -28,7 +28,11 @@ import wordmark from "@/public/wordmark/wordmark-white.svg";
 import { displayDesktopOnly, displayMobileOnly } from "@/styles/responsive";
 import { analytics } from "@/utils/analytics";
 
-export default function Header() {
+export default function Header({
+  onBrandClick,
+}: {
+  onBrandClick?: () => void;
+}) {
   return (
     <AppBar
       position="static"
@@ -38,14 +42,14 @@ export default function Header() {
       }}
     >
       <Toolbar>
-        <Mobile />
+        <Mobile onBrandClick={onBrandClick} />
         <Desktop />
       </Toolbar>
     </AppBar>
   );
 }
 
-function Mobile(props: { window?: () => Window }) {
+function Mobile(props: { window?: () => Window; onBrandClick?: () => void }) {
   const { window } = props;
   const drawerWidth = "100%";
   const [menuIsOpen, setMenuOpen] = useState(false);
@@ -96,7 +100,7 @@ function Mobile(props: { window?: () => Window }) {
         >
           {menuIsOpen ? <Close /> : <Menu />}
         </IconButton>
-        <Brand />
+        <Brand onClick={props.onBrandClick} />
       </Box>
       <nav>
         <Drawer
@@ -252,7 +256,7 @@ function Desktop() {
   );
 }
 
-function Brand() {
+function Brand({ onClick }: { onClick?: () => void }) {
   return (
     <Typography variant="h6" noWrap overflow="visible">
       <Link
@@ -265,7 +269,10 @@ function Brand() {
           alignItems: "center",
           justifyContent: "center",
         }}
-        onClick={() => analytics.nav.logoClicked()}
+        onClick={() => {
+          if (onClick) onClick();
+          analytics.nav.logoClicked();
+        }}
       >
         <Image
           src={wordmark.src}
diff --git a/ui/src/components/layouts/MapLayout.tsx b/ui/src/components/layouts/MapLayout.tsx
index ce3abc24..95c9f882 100644
--- a/ui/src/components/layouts/MapLayout.tsx
+++ b/ui/src/components/layouts/MapLayout.tsx
@@ -76,7 +76,11 @@ function MapLayout({ children }: { children: ReactNode }) {
         flexDirection: "column",
       }}
     >
-      <Header />
+      <Header
+        onBrandClick={() => {
+          setDrawerOpen(true);
+        }}
+      />
       <Box sx={{ flexGrow: 1, display: "flex" }}>
         <Drawer
           setOpen={setDrawerOpen}

From df760f6c04507c19f73ace52a9e80d8f9feac8c9 Mon Sep 17 00:00:00 2001
From: Skander Mzali <skanderm@gmail.com>
Date: Wed, 13 Mar 2024 10:49:57 -0700
Subject: [PATCH 2/2] Destructure props for Mobile header

---
 ui/src/components/Header.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index 0831e844..569558bb 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -49,8 +49,13 @@ export default function Header({
   );
 }
 
-function Mobile(props: { window?: () => Window; onBrandClick?: () => void }) {
-  const { window } = props;
+function Mobile({
+  window,
+  onBrandClick,
+}: {
+  window?: () => Window;
+  onBrandClick?: () => void;
+}) {
   const drawerWidth = "100%";
   const [menuIsOpen, setMenuOpen] = useState(false);
 
@@ -100,7 +105,7 @@ function Mobile(props: { window?: () => Window; onBrandClick?: () => void }) {
         >
           {menuIsOpen ? <Close /> : <Menu />}
         </IconButton>
-        <Brand onClick={props.onBrandClick} />
+        <Brand onClick={onBrandClick} />
       </Box>
       <nav>
         <Drawer