x-cite-navbar

NavBar example:

Create an array for the pages link

const navConfig = [
    {
        title: 'Pages',
        pages: [
            {
                title: 'Dashboard',
                href: '/dashboard',
                icon: HomeIcon
            }
        ]
    }
    ...
];

Add those lines in your component

import { NavBar } from 'x-cite-navbar'

...
...

const classes = useStyles()
const [isOpenNavBar, setOpenNavBarMobile] = useState(false)

const handleNavBarMobile = () => {
  setOpenNavBarMobile(!isOpenNavBar)
}
const closeNavBar = () => setOpenNavBarMobile(false)
...

Some style for the navbar

const useStyles = makeStyles(theme => ({
  navBar: {
    zIndex: 3,
    width: 256,
    minWidth: 256,
    flex: '0 0 auto'
  }
}))

last thing : import you x-cite-navbar component in your template

  <NavBar
    navConfig={navConfig}
    className={classes.navBar}
    handleNavBarMobile={handleNavBarMobile}
    closeNavBar={closeNavBar}
    isOpen={isOpenNavBar}
  />