Merge pull request #42 from fuzue/39-reposition-back-button-on-appbar

fix(HeaderBar): fix navigation to new model
fuzue · Jul 14, 2023 · 4534ad6 · 4534ad6
2 parents 6d40a97 + 0bf10e0
commit 4534ad6
Showing 1 changed file with 29 additions and 22 deletions.
diff --git a/src/components/HeaderBar.tsx b/src/components/HeaderBar.tsx
@@ -94,22 +94,39 @@ export default function HeaderBar(props: Props) {
   }));
 
   const navigate = useNavigate();
-  const loaction = useLocation();
+  const location = useLocation();
+
+  function leftButton() {
+    if(location.pathname.split("/")[1] === "foodpage") {
+      return (
+        <IconButton
+        size="large"
+        edge="start"
+        color="inherit"
+        aria-label="open drawer"
+        onClick={() => navigate(-1)}
+      >
+        <ArrowBackIosNew />
+      </IconButton>
+      )
+    }
+    return (
+      <IconButton
+        size="large"
+        edge="start"
+        color="inherit"
+        aria-label="open drawer"
+        onClick={props.toggleDrawer}
+      >
+        <MenuIcon />
+      </IconButton>
+    )
+  }
 
   return (
     <StyledAppBar position="static">
       <Toolbar>
-        {loaction.pathname.split("/")[1] === "foodpage" && (
-          <IconButton
-            size="large"
-            edge="start"
-            color="inherit"
-            aria-label="open drawer"
-            onClick={() => navigate(-1)}
-          >
-            <ArrowBackIosNew />
-          </IconButton>
-        )}
+        {leftButton()}
         <Search>
           <SearchIconWrapper>
             <IconButton
@@ -131,16 +148,6 @@ export default function HeaderBar(props: Props) {
             />
           </form>
         </Search>
-        <IconButton
-          size="large"
-          edge="start"
-          color="inherit"
-          aria-label="open drawer"
-          onClick={props.toggleDrawer}
-          sx={{ ml: 0.5 }}
-        >
-          <MenuIcon />
-        </IconButton>
       </Toolbar>
     </StyledAppBar>
   );