x-cite-navbar

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}
  />