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>
  );
}


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: 'primary.50',
    }}>
    ❍ UI Kit
  </Box>);
// nav with branded color
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: 'primary.500',
            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={{ color: 'white', fontWeight: 500 }}>
                {link}
              </Button>))}
            <Button component='a' href='#' variant='outlined' color='secondary' 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} color='inherit'>
              <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: 'primary.50',
    }}
  >
    ❍ UI Kit
  </Box>
);
// nav with branded color
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: 'primary.500',
        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={{ color: 'white', fontWeight: 500 }}
              >
                {link}
              </Button>
            ))}
            <Button
              component='a'
              href='#'
              variant='outlined'
              color='secondary'
              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}
              color='inherit'
            >
              <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, Avatar, } from '@mui/material';
import { FiMenu } from 'react-icons/fi';
import { HiOutlineBell } from 'react-icons/hi';
// mock data
const links = ['Dashboard', 'Projects', 'Settings'];
const Logo = () => (<Box sx={{
        fontSize: '2xl',
        fontWeight: 800,
        textDecoration: 'none',
        color: 'gray.700',
    }}>
    ❍ UI Kit
  </Box>);
// navbar with avatar
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>
          <Box sx={{
            display: { xs: 'none', md: 'flex' },
            gap: 1,
            alignItems: 'center',
            justifyContent: 'space-between',
            width: '100%',
        }}>
            <Box sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
        }}>
              <Logo />
              {links.map(link => (<Button component='a' href='#' key={link} onClick={handleCloseNavMenu} sx={{ color: 'gray.600', fontWeight: 500 }}>
                  {link}
                </Button>))}
            </Box>
            <Box sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
        }}>
              <IconButton size='medium'>
                <HiOutlineBell size={24}/>
              </IconButton>
              <Avatar src='https://images.unsplash.com/photo-1539571696357-5a69c17a67c6' sx={{
            height: 36,
            width: 36,
        }}/>
            </Box>
          </Box>
          <Box sx={{
            display: { xs: 'grid', md: 'none' },
            gridTemplateColumns: '40px auto 40px',
            width: '100%',
            gap: 0.5,
            alignItems: 'center',
            justifyContent: 'space-between',
        }}>
            <IconButton size='medium' aria-label='account of current user' aria-controls='menu-appbar' aria-haspopup='true' onClick={handleOpenNavMenu}>
              <FiMenu />
            </IconButton>
            <Logo />
            <Box sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'flex-end',
            gap: 0.5,
        }}>
              <Avatar src='https://images.unsplash.com/photo-1539571696357-5a69c17a67c6' sx={{
            height: 30,
            width: 30,
        }}/>
            </Box>
            <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,
  Avatar,
} from '@mui/material';
import { FiMenu } from 'react-icons/fi';
import { HiOutlineBell } from 'react-icons/hi';
// mock data
const links = ['Dashboard', 'Projects', 'Settings'];
const Logo = () => (
  <Box
    sx={{
      fontSize: '2xl',
      fontWeight: 800,
      textDecoration: 'none',
      color: 'gray.700',
    }}
  >
    ❍ UI Kit
  </Box>
);
// navbar with avatar
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>
          <Box
            sx={{
              display: { xs: 'none', md: 'flex' },
              gap: 1,
              alignItems: 'center',
              justifyContent: 'space-between',
              width: '100%',
            }}
          >
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                gap: 1,
              }}
            >
              <Logo />
              {links.map(link => (
                <Button
                  component='a'
                  href='#'
                  key={link}
                  onClick={handleCloseNavMenu}
                  sx={{ color: 'gray.600', fontWeight: 500 }}
                >
                  {link}
                </Button>
              ))}
            </Box>
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                gap: 1,
              }}
            >
              <IconButton size='medium'>
                <HiOutlineBell size={24} />
              </IconButton>
              <Avatar
                src='https://images.unsplash.com/photo-1539571696357-5a69c17a67c6'
                sx={{
                  height: 36,
                  width: 36,
                }}
              />
            </Box>
          </Box>
          <Box
            sx={{
              display: { xs: 'grid', md: 'none' },
              gridTemplateColumns: '40px auto 40px',
              width: '100%',
              gap: 0.5,
              alignItems: 'center',
              justifyContent: 'space-between',
            }}
          >
            <IconButton
              size='medium'
              aria-label='account of current user'
              aria-controls='menu-appbar'
              aria-haspopup='true'
              onClick={handleOpenNavMenu}
            >
              <FiMenu />
            </IconButton>
            <Logo />
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'flex-end',
                gap: 0.5,
              }}
            >
              <Avatar
                src='https://images.unsplash.com/photo-1539571696357-5a69c17a67c6'
                sx={{
                  height: 30,
                  width: 30,
                }}
              />
            </Box>
            <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, Avatar, } from '@mui/material';
import { FiMenu } from 'react-icons/fi';
import { HiOutlineBell } from 'react-icons/hi';
// mock data
const links = ['Dashboard', 'Projects', 'Settings'];
const Logo = () => (<Box sx={{
        fontSize: '2xl',
        fontWeight: 800,
        textDecoration: 'none',
        color: 'gray.700',
    }}>
    ❍ UI Kit
  </Box>);
// centered logo 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>
          <Box sx={{
            display: { xs: 'none', md: 'grid' },
            gridTemplateColumns: '1fr auto 1fr',
            gap: 1,
            alignItems: 'center',
            justifyContent: 'space-between',
            width: '100%',
        }}>
            <Box sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
        }}>
              {links.map(link => (<Button component='a' href='#' key={link} onClick={handleCloseNavMenu} sx={{ color: 'gray.600', fontWeight: 500 }}>
                  {link}
                </Button>))}
            </Box>
            <Logo />
            <Box sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'flex-end',
            gap: 1,
        }}>
              <IconButton size='medium'>
                <HiOutlineBell size={24}/>
              </IconButton>
              <Avatar src='https://images.unsplash.com/photo-1539571696357-5a69c17a67c6' sx={{
            height: 36,
            width: 36,
        }}/>
            </Box>
          </Box>
          <Box sx={{
            display: { xs: 'grid', md: 'none' },
            gridTemplateColumns: '40px auto 40px',
            width: '100%',
            gap: 0.5,
            alignItems: 'center',
            justifyContent: 'space-between',
        }}>
            <IconButton size='medium' aria-label='account of current user' aria-controls='menu-appbar' aria-haspopup='true' onClick={handleOpenNavMenu}>
              <FiMenu />
            </IconButton>
            <Logo />
            <Box sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'flex-end',
            gap: 0.5,
        }}>
              <Avatar src='https://images.unsplash.com/photo-1539571696357-5a69c17a67c6' sx={{
            height: 30,
            width: 30,
        }}/>
            </Box>
            <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,
  Avatar,
} from '@mui/material';
import { FiMenu } from 'react-icons/fi';
import { HiOutlineBell } from 'react-icons/hi';
// mock data
const links = ['Dashboard', 'Projects', 'Settings'];
const Logo = () => (
  <Box
    sx={{
      fontSize: '2xl',
      fontWeight: 800,
      textDecoration: 'none',
      color: 'gray.700',
    }}
  >
    ❍ UI Kit
  </Box>
);
// centered logo 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>
          <Box
            sx={{
              display: { xs: 'none', md: 'grid' },
              gridTemplateColumns: '1fr auto 1fr',
              gap: 1,
              alignItems: 'center',
              justifyContent: 'space-between',
              width: '100%',
            }}
          >
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                gap: 1,
              }}
            >
              {links.map(link => (
                <Button
                  component='a'
                  href='#'
                  key={link}
                  onClick={handleCloseNavMenu}
                  sx={{ color: 'gray.600', fontWeight: 500 }}
                >
                  {link}
                </Button>
              ))}
            </Box>
            <Logo />
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'flex-end',
                gap: 1,
              }}
            >
              <IconButton size='medium'>
                <HiOutlineBell size={24} />
              </IconButton>
              <Avatar
                src='https://images.unsplash.com/photo-1539571696357-5a69c17a67c6'
                sx={{
                  height: 36,
                  width: 36,
                }}
              />
            </Box>
          </Box>
          <Box
            sx={{
              display: { xs: 'grid', md: 'none' },
              gridTemplateColumns: '40px auto 40px',
              width: '100%',
              gap: 0.5,
              alignItems: 'center',
              justifyContent: 'space-between',
            }}
          >
            <IconButton
              size='medium'
              aria-label='account of current user'
              aria-controls='menu-appbar'
              aria-haspopup='true'
              onClick={handleOpenNavMenu}
            >
              <FiMenu />
            </IconButton>
            <Logo />
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'flex-end',
                gap: 0.5,
              }}
            >
              <Avatar
                src='https://images.unsplash.com/photo-1539571696357-5a69c17a67c6'
                sx={{
                  height: 30,
                  width: 30,
                }}
              />
            </Box>
            <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