60 lines
2.7 KiB
JavaScript
60 lines
2.7 KiB
JavaScript
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 {useNavigate} from "react-router-dom";
|
|
import routes from "@/common/routes";
|
|
import {useEffect, useState} from "react";
|
|
|
|
const NAVBAR_HEIGHT = 80;
|
|
|
|
export const Navigation = () => {
|
|
const navigate = useNavigate();
|
|
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down("lg"));
|
|
const isDarkMode = theme.palette.mode === "dark";
|
|
|
|
const [dashboardLoading, setDashboardLoading] = useState(false);
|
|
|
|
const openDashboard = () => {
|
|
setDashboardLoading(true);
|
|
const timeout = setTimeout(() => window.location.replace("https://dash.licenseapi.de"), 500);
|
|
return () => clearTimeout(timeout);
|
|
}
|
|
|
|
return (
|
|
<AppBar position="fixed" sx={{height: NAVBAR_HEIGHT, boxShadow: "none", justifyContent: "center",
|
|
backgroundColor: isDarkMode ? "rgba(0, 0, 0, 0.5)" : "rgba(255, 255, 255, 0.5)",
|
|
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}
|
|
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>)}
|
|
</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}}>
|
|
<Menu/>
|
|
</IconButton>
|
|
</>}
|
|
|
|
</Stack>
|
|
</AppBar>
|
|
)
|
|
} |