import * as React from "react"
import {
  AppBar,
  Box,
  Toolbar,
  IconButton,
  Typography,
  Menu,
  Container,
  Button,
  MenuItem,
} from "@mui/material"
import { FiMenu } from "react-icons/fi"
import { HiArrowSmRight } from "react-icons/hi"
// mock data
const links = ["About", "Docs", "Pricing", "Blog"]
const Logo = () => (
  <Box
    sx={{
      fontSize: "2xl",
      fontWeight: 800,
      textDecoration: "none",
      color: "gray.700",
    }}
  >
    ❍ UI Kit
  </Box>
)
// simple nav
export default function Navbar() {
  const [anchorElNav, setAnchorElNav] = React.useState(null)
  const handleOpenNavMenu = event => {
    setAnchorElNav(event.currentTarget)
  }
  const handleCloseNavMenu = () => {
    setAnchorElNav(null)
  }
  return (
    <AppBar
      position="static"
      sx={{
        bgcolor: "background.paper",
        py: 1,
      }}
    >
      <Container>
        <Toolbar
          variant="dense"
          disableGutters
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <Logo />
          <Box sx={{ display: { xs: "none", md: "flex" }, gap: 1 }}>
            {links.map(link => (
              <Button
                component="a"
                href="#"
                key={link}
                onClick={handleCloseNavMenu}
                sx={{ fontWeight: 500 }}
              >
                {link}
              </Button>
            ))}
            <Button
              component="a"
              href="#"
              variant="contained"
              color="primary"
              sx={{
                borderRadius: 999,
              }}
              endIcon={<HiArrowSmRight size={16} />}
            >
              Get Started
            </Button>
          </Box>
          <Box sx={{ display: { xs: "flex", md: "none" } }}>
            <IconButton
              size="medium"
              aria-label="account of current user"
              aria-controls="menu-appbar"
              aria-haspopup="true"
              onClick={handleOpenNavMenu}
            >
              <FiMenu />
            </IconButton>
            <Menu
              id="menu-appbar"
              anchorEl={anchorElNav}
              anchorOrigin={{
                vertical: "bottom",
                horizontal: "left",
              }}
              keepMounted
              transformOrigin={{
                vertical: "top",
                horizontal: "left",
              }}
              open={Boolean(anchorElNav)}
              onClose={handleCloseNavMenu}
              sx={{
                display: { xs: "block", md: "none" },
              }}
              disablePortal={true}
            >
              {links.map(link => (
                <MenuItem key={link} onClick={handleCloseNavMenu}>
                  <Typography textAlign="center">{link}</Typography>
                </MenuItem>
              ))}
            </Menu>
          </Box>
        </Toolbar>
      </Container>
    </AppBar>
  )
}


import * as React from "react"
import {
  AppBar,
  Box,
  Toolbar,
  IconButton,
  Typography,
  Menu,
  Container,
  Button,
  MenuItem,
} from "@mui/material"
import { FiMenu } from "react-icons/fi"
import { HiArrowSmRight } from "react-icons/hi"
// mock data
const links = ["About", "Docs", "Pricing", "Blog"]
const Logo = () => (
  <Box
    sx={{
      fontSize: "2xl",
      fontWeight: 800,
      textDecoration: "none",
      color: "gray.700",
    }}
  >
    ❍ UI Kit
  </Box>
)
// simple nav
export default function Navbar() {
  const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null)
  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorElNav(event.currentTarget)
  }
  const handleCloseNavMenu = () => {
    setAnchorElNav(null)
  }

  return (
    <AppBar
      position="static"
      sx={{
        bgcolor: "background.paper",
        py: 1,
      }}
    >
      <Container>
        <Toolbar
          variant="dense"
          disableGutters
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <Logo />
          <Box sx={{ display: { xs: "none", md: "flex" }, gap: 1 }}>
            {links.map(link => (
              <Button
                component="a"
                href="#"
                key={link}
                onClick={handleCloseNavMenu}
                sx={{ fontWeight: 500 }}
              >
                {link}
              </Button>
            ))}
            <Button
              component="a"
              href="#"
              variant="contained"
              color="primary"
              sx={{
                borderRadius: 999,
              }}
              endIcon={<HiArrowSmRight size={16} />}
            >
              Get Started
            </Button>
          </Box>
          <Box sx={{ display: { xs: "flex", md: "none" } }}>
            <IconButton
              size="medium"
              aria-label="account of current user"
              aria-controls="menu-appbar"
              aria-haspopup="true"
              onClick={handleOpenNavMenu}
            >
              <FiMenu />
            </IconButton>
            <Menu
              id="menu-appbar"
              anchorEl={anchorElNav}
              anchorOrigin={{
                vertical: "bottom",
                horizontal: "left",
              }}
              keepMounted
              transformOrigin={{
                vertical: "top",
                horizontal: "left",
              }}
              open={Boolean(anchorElNav)}
              onClose={handleCloseNavMenu}
              sx={{
                display: { xs: "block", md: "none" },
              }}
              disablePortal={true}
            >
              {links.map(link => (
                <MenuItem key={link} onClick={handleCloseNavMenu}>
                  <Typography textAlign="center">{link}</Typography>
                </MenuItem>
              ))}
            </Menu>
          </Box>
        </Toolbar>
      </Container>
    </AppBar>
  )
}


Navbars

Simple navbar

Navbar with brand colors

Navbar with profile

Centered logo navbar