103 lines
3.0 KiB
TypeScript
103 lines
3.0 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import AppBar from "@mui/material/AppBar";
|
||
|
|
import Box from "@mui/material/Box";
|
||
|
|
import IconButton from "@mui/material/IconButton";
|
||
|
|
import Stack from "@mui/material/Stack";
|
||
|
|
import Toolbar from "@mui/material/Toolbar";
|
||
|
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
||
|
|
import { styled, Theme } from "@mui/material/styles";
|
||
|
|
import MenuIcon from '@mui/icons-material/Menu';
|
||
|
|
import DarkModeIcon from '@mui/icons-material/DarkMode';
|
||
|
|
import LightModeIcon from '@mui/icons-material/LightMode';
|
||
|
|
import { useCustomizerStore } from "../store/useCustomizerStore";
|
||
|
|
|
||
|
|
import Notifications from "./Notification";
|
||
|
|
import Profile from "./Profile";
|
||
|
|
import Search from "./Search";
|
||
|
|
import Navigation from "./Navigation";
|
||
|
|
import MobileRightSidebar from "./MobileRightSidebar";
|
||
|
|
|
||
|
|
const AppBarStyled = styled(AppBar)(({ theme }) => ({
|
||
|
|
boxShadow: "none",
|
||
|
|
background: theme.palette.background.paper,
|
||
|
|
justifyContent: "center",
|
||
|
|
backdropFilter: "blur(4px)",
|
||
|
|
zIndex: theme.zIndex.drawer + 1,
|
||
|
|
}));
|
||
|
|
|
||
|
|
const ToolbarStyled = styled(Toolbar)(({ theme }) => ({
|
||
|
|
width: "100%",
|
||
|
|
color: theme.palette.text.secondary,
|
||
|
|
}));
|
||
|
|
|
||
|
|
const Header = () => {
|
||
|
|
const lgUp = useMediaQuery((theme: Theme) => theme.breakpoints.up("lg"));
|
||
|
|
const lgDown = useMediaQuery((theme: Theme) => theme.breakpoints.down("lg"));
|
||
|
|
|
||
|
|
const {
|
||
|
|
activeMode,
|
||
|
|
toggleSidebar,
|
||
|
|
toggleMobileSidebar,
|
||
|
|
setDarkMode,
|
||
|
|
isHydrated
|
||
|
|
} = useCustomizerStore();
|
||
|
|
|
||
|
|
if (!isHydrated) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<AppBarStyled position="sticky" color="default">
|
||
|
|
<ToolbarStyled>
|
||
|
|
{/* ------------------------------------------- */}
|
||
|
|
{/* Toggle Button Sidebar (Fluxo 2) */}
|
||
|
|
{/* ------------------------------------------- */}
|
||
|
|
<IconButton
|
||
|
|
color="inherit"
|
||
|
|
aria-label="menu"
|
||
|
|
onClick={lgUp ? toggleSidebar : toggleMobileSidebar}
|
||
|
|
>
|
||
|
|
<MenuIcon />
|
||
|
|
</IconButton>
|
||
|
|
|
||
|
|
{/* ------------------------------------------- */}
|
||
|
|
{/* Search & Navigation */}
|
||
|
|
{/* ------------------------------------------- */}
|
||
|
|
<Search />
|
||
|
|
{lgUp && <Navigation />}
|
||
|
|
|
||
|
|
<Box flexGrow={1} />
|
||
|
|
|
||
|
|
<Stack spacing={1} direction="row" alignItems="center">
|
||
|
|
|
||
|
|
{/* ------------------------------------------- */}
|
||
|
|
{/* Theme Toggle (Dark/Light) */}
|
||
|
|
{/* ------------------------------------------- */}
|
||
|
|
<IconButton
|
||
|
|
size="large"
|
||
|
|
color="inherit"
|
||
|
|
onClick={() => setDarkMode(activeMode === "light" ? "dark" : "light")}
|
||
|
|
aria-label="alternar tema"
|
||
|
|
>
|
||
|
|
{activeMode === "light" ? (
|
||
|
|
<DarkModeIcon />
|
||
|
|
) : (
|
||
|
|
<LightModeIcon />
|
||
|
|
)}
|
||
|
|
</IconButton>
|
||
|
|
|
||
|
|
<Notifications />
|
||
|
|
|
||
|
|
{/* ------------------------------------------- */}
|
||
|
|
{/* Mobile Right Sidebar & Profile */}
|
||
|
|
{/* ------------------------------------------- */}
|
||
|
|
{lgDown && <MobileRightSidebar />}
|
||
|
|
<Profile />
|
||
|
|
</Stack>
|
||
|
|
</ToolbarStyled>
|
||
|
|
</AppBarStyled>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Header;
|