101 lines
3.0 KiB
TypeScript
101 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;
|