Merge pull request #117 from Yavuzlar/92-navbar-bug-fix

Navbar blank button no longer visible on smaller screen
Yavuzlar · Aug 2, 2024 · 2b7964f · 2b7964f
2 parents 3e7fde8 + 6304124
commit 2b7964f
Showing 1 changed file with 16 additions and 17 deletions.
diff --git a/frontend/src/layout/components/Navbar.js b/frontend/src/layout/components/Navbar.js
@@ -28,8 +28,7 @@ function ResponsiveAppBar() {
   return (
     <AppBar
       // position="static" // removed due to incorrect appreance
-      sx={{ backgroundColor: "#0A3B7A", boxShadow: "none" }}
-    >
+      sx={{ backgroundColor: "#0A3B7A", boxShadow: "none" }}>
       <Container maxWidth="xl">
         <Toolbar disableGutters variant="dense" sx={{ mx: 7 }}>
           <CircleIcon
@@ -51,8 +50,7 @@ function ResponsiveAppBar() {
               fontWeight: 700,
               color: "inherit",
               textDecoration: "none",
-            }}
-          >
+            }}>
             {themeConfig.projectName}
           </Typography>
 
@@ -76,21 +74,24 @@ function ResponsiveAppBar() {
               fontWeight: 700,
               color: "inherit",
               textDecoration: "none",
-            }}
-          >
+            }}>
             {themeConfig.projectName}
           </Typography>
 
-          <Box sx={{ flexGrow: 0, display: { xs: "flex", mdlg: "none" } }}>
+          <Box
+            sx={{
+              flexGrow: 0,
+              display: { xs: "flex", mdlg: "none" },
+              flexDirection: "column",
+            }}>
             <IconButton
               size="large"
               aria-label="account of current user"
               aria-controls="menu-appbar"
               aria-haspopup="true"
               s
               onClick={handleOpenNavMenu}
-              color="inherit"
-            >
+              color="inherit">
               <MenuIcon />
             </IconButton>
             <Menu
@@ -111,13 +112,12 @@ function ResponsiveAppBar() {
                 display: { xs: "block", mdlg: "none" },
                 mt: "1px",
                 "& .MuiMenu-paper": { backgroundColor: "#0A3B7A" },
-              }}
-            >
-              {navigation.map((item, index) => (
-                <MenuItem>
+              }}>
+              <Box sx={{ display: "flex", flexDirection: "column" }}>
+                {navigation.map((item, index) => (
                   <NavItem key={index} {...item} />
-                </MenuItem>
-              ))}
+                ))}
+              </Box>
               <LanguageSelector isMenu={true} />
             </Menu>
           </Box>
@@ -128,8 +128,7 @@ function ResponsiveAppBar() {
               display: { xs: "none", mdlg: "flex" },
               ml: "auto",
               gap: 13,
-            }}
-          >
+            }}>
             {navigation.map((item, index) => (
               <NavItem key={index} {...item} />
             ))}