Add function to open drawer on brand click in mobile (#360)

* Add function to open drawer on brand click in mobile * Destructure props for Mobile header
orcasound · Mar 14, 2024 · 78ae741 · 78ae741
1 parent d16aa34
commit 78ae741
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git 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,15 +42,20 @@ export default function Header() {
       }}
     >
       <Toolbar>
-        <Mobile />
+        <Mobile onBrandClick={onBrandClick} />
         <Desktop />
       </Toolbar>
     </AppBar>
   );
 }
 
-function Mobile(props: { window?: () => Window }) {
-  const { window } = props;
+function Mobile({
+  window,
+  onBrandClick,
+}: {
+  window?: () => Window;
+  onBrandClick?: () => void;
+}) {
   const drawerWidth = "100%";
   const [menuIsOpen, setMenuOpen] = useState(false);
 
@@ -96,7 +105,7 @@ function Mobile(props: { window?: () => Window }) {
         >
           {menuIsOpen ? <Close /> : <Menu />}
         </IconButton>
-        <Brand />
+        <Brand onClick={onBrandClick} />
       </Box>
       <nav>
         <Drawer
@@ -252,7 +261,7 @@ function Desktop() {
   );
 }
 
-function Brand() {
+function Brand({ onClick }: { onClick?: () => void }) {
   return (
     <Typography variant="h6" noWrap overflow="visible">
       <Link
@@ -265,7 +274,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
@@ -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}