How to use the docz.useMenus function in docz

To help you get started, we’ve selected a few docz examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github angelle-sw / use-axios-client / docs / src / gatsby-theme-docz / components / Sidebar / index.js View on Github external
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>
github doczjs / docz / core / docz-theme-default / src / components / shared / Sidebar / index.tsx View on Github external
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')
github cdonohue / benefit / packages / benefit-docs-old / theme / components / Page.js View on Github external
function SideBar({ isOpen, onClose }) {
  const menuItems = useMenus()

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

    sideMenu.onscroll = ({ target }) =&gt; {
      localStorage.setItem("menuScroll", target.scrollTop)
    }
  })

  return (
github doczjs / docz / core / gatsby-theme-docz / src / components / Sidebar / index.js View on Github external
export const Sidebar = React.forwardRef((props, ref) =&gt; {
  const [query, setQuery] = useState('')
  const menus = useMenus({ query })
  const currentDoc = useCurrentDoc()
  const currentDocRef = useRef()
  const handleChange = ev =&gt; {
    setQuery(ev.target.value)
  }
  useEffect(() =&gt; {
    if (ref.current &amp;&amp; currentDocRef.current) {
      ref.current.scrollTo(0, currentDocRef.current.offsetTop)
    }
  }, [])
  return (
    &lt;&gt;
      
        {props.open &amp;&amp; }
github doczjs / docz-website / src / theme / components / shared / Sidebar / index.tsx View on Github external
export const Sidebar: SFC = ({
  menu: current,
  pathname,
  mobile,
}) =&gt; {
  const docs = useDocs()
  const { width } = useWindowSize()
  const { showing, setShowing } = useContext(mainContext)

  const menus = useMenus()
  const isDesktop = width &gt; breakpoints.tablet

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

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

  useEffect(() =&gt; {
    addCarbonAds()
  }, [])

  return (
github zicodeng / docz-theme-ztopia / src / components / Header / components / Search.tsx View on Github external
const Search = () =&gt; {
  const [query, setQuery] = useState('');
  const menus = useMenus({ query });
  const {
    themeConfig: { colors, fonts },
  } = useConfig();

  const renderResult = () =&gt; {
    if (!query || !menus) {
      return null;
    }
    const result = menus.length
      ? menus.map(menu =&gt; {
          const submenu = menu.menu;
          if (!submenu) {
            return (
              <li>
                </li>
github zicodeng / docz-theme-ztopia / src / components / Sidebar / components / Menu.tsx View on Github external
const Menu: FunctionComponent = () =&gt; {
  const menus = useMenus();
  return (
    menus &amp;&amp; (
      <ul>
        {menus.map(({ id, name, route, menu }) =&gt; {
          if (!menu) {
            return <menuitem name="{name}">;
          }
          return ;
        })}
      </menuitem></ul>
    )
  );
};
github cdonohue / benefit / packages / benefit-docs-old / components / UtilityBox.js View on Github external
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>

docz

It's has never been so easy to documents your things!

MIT
Latest version published 3 years ago

Package Health Score

59 / 100
Full package analysis