How to use the docz.useMenus function in docz

export const Sidebar = React.forwardRef((props, ref) => {
  const [query] = useState('');
  const menus = useMenus({ query });
  const menuGroups = groupBy(menus, 'parent');

  return (
    <>
      
        {props.open && }
      

      
        {Object.entries(menuGroups).map(([parent, menuItems]) => (
          <div>
            <div>{parent}</div>

            {menuItems.map(menuItem =&gt; (
              
                {menuItem.name}</div>

export const Sidebar: SFC = () => {
  const [hidden, setHidden] = useState(true)
  const [query, setQuery] = useState('')
  const menus = useMenus({ query })
  const windowSize = useWindowSize()
  const isDesktop = windowSize.innerWidth >= breakpoints.desktop
  const prevIsDesktop = usePrevious(isDesktop)

  useEffect(() => {
    if (!hidden && !prevIsDesktop && isDesktop) {
      setHidden(true)
      document.documentElement!.classList.remove('with-overlay')
    }
  })

  const addOverlayClass = (isHidden: boolean) => {
    const method = !isHidden ? 'add' : 'remove'

    if (typeof window !== 'undefined' && !isDesktop) {
      document.documentElement!.classList[method]('with-overlay')

function SideBar({ isOpen, onClose }) {
  const menuItems = useMenus()

  useEffect(() => {
    const sideMenu = document.querySelector(".side-menu")
    sideMenu.scrollTop = localStorage.getItem("menuScroll") || 0

    sideMenu.onscroll = ({ target }) => {
      localStorage.setItem("menuScroll", target.scrollTop)
    }
  })

  return (

export const Sidebar = React.forwardRef((props, ref) => {
  const [query, setQuery] = useState('')
  const menus = useMenus({ query })
  const currentDoc = useCurrentDoc()
  const currentDocRef = useRef()
  const handleChange = ev => {
    setQuery(ev.target.value)
  }
  useEffect(() => {
    if (ref.current && currentDocRef.current) {
      ref.current.scrollTo(0, currentDocRef.current.offsetTop)
    }
  }, [])
  return (
    <>
      
        {props.open && }

export const Sidebar: SFC = ({
  menu: current,
  pathname,
  mobile,
}) => {
  const docs = useDocs()
  const { width } = useWindowSize()
  const { showing, setShowing } = useContext(mainContext)

  const menus = useMenus()
  const isDesktop = width > breakpoints.tablet

  const toggle = useCallback(() => {
    setShowing((s: any) => !s)
  }, [])

  const handleSidebarToggle = (ev: React.SyntheticEvent) => {
    if (isDesktop) return
    toggle && toggle()
  }

  useEffect(() => {
    addCarbonAds()
  }, [])

  return (

const Search = () => {
  const [query, setQuery] = useState('');
  const menus = useMenus({ query });
  const {
    themeConfig: { colors, fonts },
  } = useConfig();

  const renderResult = () => {
    if (!query || !menus) {
      return null;
    }
    const result = menus.length
      ? menus.map(menu => {
          const submenu = menu.menu;
          if (!submenu) {
            return (
              <li>
                </li>

const Menu: FunctionComponent = () => {
  const menus = useMenus();
  return (
    menus && (
      <ul>
        {menus.map(({ id, name, route, menu }) =&gt; {
          if (!menu) {
            return <menuitem name="{name}">;
          }
          return ;
        })}
      </menuitem></ul>
    )
  );
};

export default function UtilityBox({ category, icon }) {
  const menuItems = useMenus()

  return (
    <div>
      <div>
        <h4>{category}</h4>
      </div>
      <div>
        {menuItems
          .filter((item) =&gt; item.parent === category)
          .map((item) =&gt; (
            
              {item.name}</div></div>