index.jsx

import PropTypes from "prop-types";
// @mui
import {
  AppBar,
  Box,
  IconButton,
  Stack,
  Toolbar,
  useTheme,
} from "@mui/material";
import { styled } from "@mui/material/styles";
// utils
import { bgBlur } from "@/utils/cssStyles";
// components
import Iconify from "@/components/iconify";
import { useModel } from "@umijs/max";

import AccountPopover from "./AccountPopover";
import Searchbar from "./Searchbar";

//----------------------------------------------------------------------//

const HEADER_MOBILE = 64;

const HEADER_DESKTOP = 64;

const StyledRoot = styled(AppBar)(({ theme }) => ({
  ...bgBlur({ color: theme.palette.background.default }),
  boxShadow: "none",
}));

const StyledToolbar = styled(Toolbar)(({ theme }) => ({
  minHeight: HEADER_MOBILE,
  [theme.breakpoints.up("lg")]: {
    minHeight: HEADER_DESKTOP,
    padding: theme.spacing(0, 2),
  },
}));

// ----------------------------------------------------------------------

Header.propTypes = {
  onOpenNav: PropTypes.func,
};

export default function Header({ onOpenNav }) {
  const {
    initialState: { nav },
  } = useModel("@@initialState");
  const theme = useTheme();

  return (
    <StyledRoot
      sx={{
        [theme.breakpoints.up("lg")]: {
          width: `calc(100% - ${nav + 1}px)`,
        },
      }}
    >
      <StyledToolbar>
        <IconButton
          onClick={onOpenNav}
          sx={{
            mr: 1,
            color: "text.primary",
            display: { lg: "none" },
          }}
        >
          <Iconify icon="eva:menu-2-fill" />
        </IconButton>

        <Searchbar />
        <Box sx={{ flexGrow: 1 }} />

        <Stack
          direction="row"
          alignItems="center"
          spacing={{
            xs: 0.5,
            sm: 1,
          }}
        >
          <AccountPopover />
        </Stack>
      </StyledToolbar>
    </StyledRoot>
  );
}