LicenseAPI/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Integrated mobile optimization into the Navigation.jsx

Browse Source
This commit is contained in:
Mathias Wagner 2023-07-08 22:16:19 +02:00
parent 5bb55d0b29
commit 7514a23d7d
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/common/components/Navigation/Navigation.jsx
View File

@ -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 {Menu} from "@mui/icons-material";
import {
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";
const NAVBAR_HEIGHT = 80;
import LinkItem from "@components/Navigation/components/LinkItem/index.js";
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"}}
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>)}
{routes.map((route, index) => <LinkItem key={index} route={route}
onClick={() => navigate(route.path)}/>)}
</Stack>
<Button variant="contained" onClick={openDashboard} disabled={dashboardLoading}>{dashboardLoading
&& <CircularProgress size={18} color="inherit" sx={{mr: 1}}/>} Dashboard</Button>
</>}
{isMobile && <>
<IconButton onClick={() => console.log("Menu")} sx={{mx: 2}}>
{isMobile && <Stack direction="row">
<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>