Integrated mobile optimization into the Navigation.jsx

src/common/components/Navigation/Navigation.jsx

@@ -1,13 +1,21 @@
 import LogoDark from "@/common/assets/images/logo/dark.webp";
 import LogoLight from "@/common/assets/images/logo/light.webp";
 
-import {AppBar, Button, CircularProgress, IconButton, Link, Stack, Typography, useMediaQuery, useTheme} from "@mui/material";
+import {
-import {Menu} from "@mui/icons-material";
+    AppBar,
+    Button,
+    CircularProgress,
+    Collapse,
+    IconButton,
+    Stack,
+    useMediaQuery,
+    useTheme
+} from "@mui/material";
+import {Login, Menu} from "@mui/icons-material";
 import {useNavigate} from "react-router-dom";
 import routes from "@/common/routes";
 import {useState} from "react";
-
+import LinkItem from "@components/Navigation/components/LinkItem/index.js";
-const NAVBAR_HEIGHT = 80;
 
 export const Navigation = () => {
     const navigate = useNavigate();
@@ -16,6 +24,8 @@ export const Navigation = () => {
     const isMobile = useMediaQuery(theme.breakpoints.down("lg"));
     const isDarkMode = theme.palette.mode === "dark";
 
+    const [menuOpen, setMenuOpen] = useState(false);
+
     const [dashboardLoading, setDashboardLoading] = useState(false);
 
     const openDashboard = () => {
@@ -24,35 +34,45 @@ export const Navigation = () => {
         return () => clearTimeout(timeout);
     }
 
+    const navigateMobile = (path) => {
+        setMenuOpen(false);
+        navigate(path);
+    }
+
     return (
-        <AppBar position="fixed" sx={{height: NAVBAR_HEIGHT, boxShadow: "none", justifyContent: "center",
+        <AppBar position="fixed" sx={{boxShadow: "none", justifyContent: "center", pt: 2.5, pb: 2.5,
             backgroundColor: isDarkMode ? "rgba(0, 0, 0, 0.5)" : "rgba(255, 255, 255, 0.5)",
-            backdropFilter: "blur(5px)", WebkitBackdropFilter: "blur(5px)"
+            backdropFilter: "blur(5px)", WebkitBackdropFilter: "blur(5px)"}}>
-        }}>
             <Stack direction="row" alignItems="center" justifyContent="space-evenly" flexWrap="wrap">
-                <img src={isDarkMode ? LogoDark : LogoLight} alt="Logo" height={NAVBAR_HEIGHT / 2}
+                <img src={isDarkMode ? LogoDark : LogoLight} alt="Logo" height={40}
                         onClick={() => navigate("/")} style={{cursor: "pointer"}}/>
 
                 {!isMobile && <>
                     <Stack direction="row" alignItems="center" justifyContent="space-between" flexWrap="wrap">
-                        {routes.map((route, index) => <Link key={index} underline="none" sx={{cursor: "pointer"}}
+                        {routes.map((route, index) => <LinkItem key={index} route={route}
-                                                            onClick={() => navigate(route.path)}>
+                                                                onClick={() => navigate(route.path)}/>)}
-                            <Typography variant="h5" sx={{mx: 2}} fontWeight={600}
-                                        color={route.path === window.location.pathname ? "primary.main" : "text.primary"}>
-                                {route.name}
-                            </Typography>
-                        </Link>)}
                     </Stack>
 
                     <Button variant="contained" onClick={openDashboard} disabled={dashboardLoading}>{dashboardLoading
                         && <CircularProgress size={18} color="inherit" sx={{mr: 1}}/>} Dashboard</Button>
                 </>}
 
-                {isMobile && <>
+                {isMobile && <Stack direction="row">
-                    <IconButton onClick={() => console.log("Menu")} sx={{mx: 2}}>
+                    <IconButton onClick={openDashboard} disabled={dashboardLoading} color="primary">
+                        {dashboardLoading ? <CircularProgress size={18} color="inherit"/> : <Login/>}
+                    </IconButton>
+                    <IconButton onClick={() => setMenuOpen(!menuOpen)}>
                         <Menu/>
                     </IconButton>
-                </>}
+                </Stack>}
+
+                <Collapse in={menuOpen} sx={{width: "100%"}}>
+                    <Stack direction="column" alignItems="center" justifyContent="space-between" flexWrap="wrap"
+                            sx={{mt: 2.5, mb: 2.5}} gap={1.5}>
+                        {routes.map((route, index) => <LinkItem key={index} route={route}
+                                                                onClick={() => navigateMobile(route.path)}/>)}
+                    </Stack>
+                </Collapse>
 
             </Stack>
         </AppBar>