react-feather#Book JavaScript Examples

// override old categories
docs.categories = [
  findCategory(docs, "core"),
  findCategory(docs, "web"),
  findCategory(docs, "clustering"),
  findCategory(docs, "testing"),
  {
    id: "standards",
    name: "Standards",
    icon: <Book />
  },
  {
    id: "kotlin",
    name: "Kotlin",
    icon: <Kotlin width="24" height="24" fill="currentColor" className="no-stroke" />
  },
  {
    id: "groovy",
    name: "Groovy",
    icon: <Apachegroovy width="24" height="24" fill="currentColor" className="no-stroke" />
  },
  findCategory(docs, "authentication-and-authorization"),
  findCategory(docs, "databases"),
  findCategory(docs, "messaging"),
  findCategory(docs, "integration"),
  findCategory(docs, "event-bus-bridges"),
  {
    id: "monitoring",
    name: "Monitoring",
    icon: <Monitor />
  },
  findCategory(docs, "services"),
  findCategory(docs, "reactive"),
  findCategory(docs, "microservices"),
  findCategory(docs, "devops")
]

function Navbar({pages, showLanguageSwitcher, setShowLanguageSwitcher}) {
  const {i18n, t} = useTranslation();
  const currentLanguage = Object.keys(locales).includes(i18n?.language)
    ? i18n?.language
    : i18n?.options?.fallbackLng[0];

  const [expand, setExpand] = useState(false);
  const darkMode = useDarkMode(false);

  useLockBodyScroll(expand);
  const windowSize = useWindowSize();

  usePageLeave(() => setExpand(false));

  const navbarTransition = useTransition(true, {
    from: {opacity: 0},
    enter: {opacity: 1},
  });

  const expandTransition = useTransition(expand, {
    from: windowSize.width < 769 ? SLIDE_IN_MOBILE : SLIDE_IN,
    enter: windowSize.width < 769 ? SLIDE_OUT_MOBILE : SLIDE_OUT,
    leave: windowSize.width < 769 ? SLIDE_IN_MOBILE : SLIDE_IN,
    config: {mass: 1, tension: 210, friction: 26},
  });

  const handleMouseEnter = useCallback(() => {
    if (windowSize.width >= 769) {
      setExpand(true);
    }
  }, [windowSize.width]);

  const handleLanguageSwitcher = useCallback(() => {
    if (expand) setExpand(false);
    setShowLanguageSwitcher(!showLanguageSwitcher);
  }, [expand, showLanguageSwitcher, setExpand, setShowLanguageSwitcher]);

  return navbarTransition((style, item) => (
    <animated.div className="Navbar" {...{style}}>
      <div className="navbar-left" onClick={handleLanguageSwitcher}>
        {locales[currentLanguage]}
      </div>

      <div className="navbar-middle">
        <Link to="/" onClick={setExpand.bind(this, false)}>
          Covid19<span>India</span>
        </Link>
      </div>

      <div
        className="navbar-right"
        onMouseEnter={handleMouseEnter}
        {...(windowSize.width < 769 && {
          onClick: setExpand.bind(this, !expand),
        })}
      >
        {windowSize.width < 769 && (
          <span>{expand ? t('Close') : t('Menu')}</span>
        )}

        {windowSize.width >= 769 && (
          <>
            <Link to="/">
              <span>
                <Home {...activeNavIcon('/')} />
              </span>
            </Link>
            <Link to="/blog">
              <span>
                <Book {...activeNavIcon('/blog')} />
              </span>
            </Link>
            <Link to="/volunteers">
              <span>
                <Users {...activeNavIcon('/volunteers')} />
              </span>
            </Link>
            <Link to="/about">
              <span>
                <HelpCircle {...activeNavIcon('/about')} />
              </span>
            </Link>
            <span>
              <SunMoon {...{darkMode}} />
            </span>
          </>
        )}
      </div>

      {expandTransition(
        (style, item) =>
          item && (
            <animated.div {...{style}}>
              <Expand {...{pages, setExpand, darkMode, windowSize}} />
            </animated.div>
          )
      )}
    </animated.div>
  ));
}

Docs = ({ metadata, allVersions, fallbackGitHubStars, toc, contents }) => {
  const tocRef = useRef()
  const searchResultsRef = useRef()
  const contentRef = useRef()
  const sidebarRef = useRef()
  const sidebarAutoHideTimer = useRef(null)
  const [sidebarCollapse, setSidebarCollapse] = useState(false)
  const [hasSearchResults, setHasSearchResults] = useState()
  const currentVersion = useContext(VersionContext.State)
  const sortedAllVersions = allVersions.sort().reverse()
  const activeVersion = currentVersion.version !== undefined ? currentVersion.version : latestRelease.version
  const activeVersionTitle = docsMetadata.find(m => m.version === activeVersion)
      .metadata.title || activeVersion

  const enableBodyScrollInternal = () => {
    enableBodyScroll(tocRef.current)
    enableBodyScroll(searchResultsRef.current)
  }

  const disableBodyScrollInternal = () => {
    // Do not disable body scroll if the window has a scrollbar (typically on
    // Windows). Otherwise, the scrollbar will disappear and the content will
    // jump to the right.
    let hasScrollbar = window.innerWidth > document.documentElement.clientWidth
    if (!hasScrollbar) {
      disableBodyScroll(searchResultsRef.current)
      disableBodyScroll(tocRef.current)
    }
  }

  const cancelSidebarAutoHideTimer = useCallback(() => {
    if (sidebarAutoHideTimer.current) {
      clearTimeout(sidebarAutoHideTimer.current)
      sidebarAutoHideTimer.current = null
    }
  }, [])

  const startSidebarAutoHideTimer = useCallback(() => {
    cancelSidebarAutoHideTimer()
    sidebarAutoHideTimer.current = setTimeout(() => {
      setSidebarCollapse(false)
      sidebarAutoHideTimer.current = null
    }, 500)
  }, [cancelSidebarAutoHideTimer])

  const onHashChangeStart = useCallback((url, initial) => {
    enableBodyScrollInternal()
    cancelSidebarAutoHideTimer()
    setSidebarCollapse(false)

    let hash = url.substring(url.indexOf("#") + 1)
    let target = document.getElementById(hash)
    if (!target) {
      return
    }

    // make it so that the search box and the element are vertically centered
    let computedStyle = window.getComputedStyle(target)
    let paddingTop = parseInt(computedStyle.paddingTop)
    let lineHeight = parseInt(computedStyle.lineHeight)
    let sidebarStyle = window.getComputedStyle(sidebarRef.current)
    let sidebarTop = parseInt(sidebarStyle.top)
    let offset = target.offsetTop - sidebarTop +
        paddingTop + (lineHeight / 2 - 20)

    smoothScrollTo(offset, initial ? 200 : 500)
  }, [cancelSidebarAutoHideTimer])

  const onHashChange = useCallback((e) => {
    onHashChangeStart(e.newURL)
  }, [onHashChangeStart])

  const onSidebarMouseEnter = useCallback(() => {
    cancelSidebarAutoHideTimer()
    disableBodyScrollInternal()
  }, [cancelSidebarAutoHideTimer])

  const onSidebarMouseLeave = useCallback(() => {
    enableBodyScrollInternal()
    startSidebarAutoHideTimer()
  }, [startSidebarAutoHideTimer])

  const onContentMouseDown = () => {
    onSidebarMouseLeave()
  }

  const onContentTouchStart = () => {
    onSidebarMouseLeave()
  }

  const onSidebarToggle = () => {
    if (sidebarCollapse) {
      enableBodyScrollInternal()
    } else {
      disableBodyScrollInternal()
    }
    cancelSidebarAutoHideTimer()
    setSidebarCollapse(!sidebarCollapse)
  }

  // replace internal links' onclick with Router.push() so we can scroll smoothly
  const replaceInternalLinks = useCallback((ref) => {
    let internalLinks = ref.current.querySelectorAll("a[href^='#']")
    for (let il of internalLinks) {
      il.onclick = (e) => {
        e.preventDefault()
        let href = window.location.href
        let hash = href.substring(href.indexOf("#"))
        if (hash !== il.getAttribute("href")) {
          Router.push(window.location.pathname + il.getAttribute("href"))
        } else {
          onHashChangeStart(href)
        }
      }
    }
  }, [onHashChangeStart])

  useEffect(() => {
    Router.events.on("hashChangeStart", onHashChangeStart)
    window.addEventListener("hashchange", onHashChange)

    let sidebar = sidebarRef.current
    sidebar.addEventListener("mouseenter", onSidebarMouseEnter)
    sidebar.addEventListener("mouseleave", onSidebarMouseLeave)

    replaceInternalLinks(tocRef)
    replaceInternalLinks(contentRef)

    // initial scroll
    onHashChangeStart(window.location.href, true)

    return () => {
      sidebar.removeEventListener("mouseenter", onSidebarMouseEnter)
      sidebar.removeEventListener("mouseleave", onSidebarMouseLeave)
      window.removeEventListener("hashchange", onHashChange)
      Router.events.off("hashChangeStart", onHashChangeStart)
      clearAllBodyScrollLocks()
    }
  }, [onHashChange, onHashChangeStart, onSidebarMouseEnter, onSidebarMouseLeave,
      replaceInternalLinks])

  let repository
  if (metadata.repository) {
    let m = metadata.repository.match(/https?:\/\/github\.com\/([^/]+)\/([^/]+)/)
    if (m) {
      let org = m[1]
      let repo = m[2]
      repository = <GitHubStars org={org} repo={repo} fallbackValue={fallbackGitHubStars} />
    } else {
      repository = <a href={metadata.repository}><Code className="feather" /> Source code</a>
    }
  }

  let examples
  if (metadata.examples) {
    examples = <a href={metadata.examples}><Paperclip className="feather" /> Examples</a>
  }
  let edit
  if (metadata.edit) {
    edit = <a href={metadata.edit}><Edit className="feather" /> Edit</a>
  }

  return (
    <main className="page docs">
      <Header title={metadata.name}/>
      <div className="page-content docs-content">
        <div className="container">
          <div className="docs-content-wrapper">
            <aside className={classNames({ "docs-has-search-results": hasSearchResults, "collapse": sidebarCollapse })}>
              <div className="docs-content-wrapper-sidebar" ref={sidebarRef}>
                <SearchPanel contentRef={contentRef} onHasResults={setHasSearchResults} ref={searchResultsRef} />
                <div dangerouslySetInnerHTML={{ __html: toc }} ref={tocRef}
                    className="docs-content-toc" />
              </div>
            </aside>
            <div className={classNames("docs-content-sidebar-toggle", { "collapse": sidebarCollapse })}
                onClick={onSidebarToggle}>
              <div style={{ position: "relative" }}>
                <List className="feather-list" />
                <X className="feather-x" />
              </div>
            </div>

            <div className="docs-content-inner" onMouseDown={onContentMouseDown}
                onTouchStart={onContentTouchStart}>
              <div className="docs-content-metadata">
                <div className="docs-content-metadata-left">
                  {repository && <div className="docs-content-metadata-repo">{repository}</div>}
                  <div>
                    <a href={`/docs/${currentVersion.version ? `${currentVersion.version}/` : ""}apidocs`}>
                      <Book className="feather" /> API
                    </a>
                  </div>
                  {examples && <div className="docs-content-metadata-examples">{examples}</div>}
                  {edit && <div className="docs-content-metadata-edit">{edit}</div>}
                  <span className="docs-content-metadata-version">
                    <DropDown title={`v${activeVersionTitle}`} align="right">
                      {filterLatestBugfixVersions(sortedAllVersions).map(v => {
                        let md = docsMetadata.find(m => m.version === v)
                        let title = md.metadata.title || v
                        if (latestRelease.version === v) {
                          return (
                            <DropDownItem key={v} active={activeVersion === v}
                                href={`/docs${metadata.href}`}>
                              Latest (v{title})
                            </DropDownItem>
                          )
                        } else {
                          return (
                            <DropDownItem key={v} active={activeVersion === v}
                                href={`/docs/${v}${metadata.href}`}>
                              v{title}
                            </DropDownItem>
                          )
                        }
                      })}
                    </DropDown>
                  </span>
                </div>
                {metadata.label && <div className="docs-content-metadata-label">
                  <Label small nowrap>{metadata.label}</Label>
                </div>}
              </div>
              <div dangerouslySetInnerHTML={{ __html: contents }} ref={contentRef} />
            </div>
          </div>
        </div>
      </div>
      <Footer />
      <style jsx>{styles}</style>
    </main>
  )
}

Docs = ({ metadata, version }) => {
  let versionPath = ""
  let activeVersion = latestRelease.version
  if (version !== undefined) {
    versionPath = `/${version}`
    activeVersion = version
  }
  let activeVersionTitle = docsMetadata.find(m => m.version === activeVersion)
      .metadata.title || activeVersion

  return (
    <Page title="Documentation">
      <div className="docs-index-main">
        <aside>
          <div className="docs-index-aside-main">
            <h2>Documentation</h2>
            <div className="docs-index-aside-content">
              <div className="docs-index-toc">
                <ul>
                  {metadata.metadata.categories.map(c => (
                    <li key={c.id}>
                      <ScrollLink href={`#${c.id}`}>{c.name}</ScrollLink>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </aside>

        <div className="docs-index-content">
          <h2>
            <span className="docs-index-content-heading">Documentation</span>

            <div className="docs-index-content-heading-right">
              <span className="docs-index-api">
                <a href={`/docs${versionPath}/apidocs`}>
                  <Book className="feather" />API
                </a>
              </span>

              <span className="docs-index-content-version">
                <DropDown title={`v${activeVersionTitle}`} align="right">
                  {filterLatestBugfixVersions(docsVersions).map(v => {
                    let md = docsMetadata.find(m => m.version === v)
                    let title = md.metadata.title || v
                    if (latestRelease.version === v) {
                      return (
                        <DropDownItem key={v} active={activeVersion === v}
                            href={"/docs/"}>
                          Latest (v{title})
                        </DropDownItem>
                      )
                    } else {
                      return (
                        <DropDownItem key={v} active={activeVersion === v}
                            href={`/docs/${v}/`}>
                          v{title}
                        </DropDownItem>
                      )
                    }
                  })}
                </DropDown>
              </span>
            </div>
          </h2>

          {metadata.metadata.categories.map(category => (
            <Section key={category.id} icon={category.icon} id={category.id} name={category.name}>
              {metadata.metadata.entries.filter(e => e.category === category.id).map(entry => (
                <SectionPart key={entry.id} title={entry.name} label={entry.label}
                    href={(entry.href.startsWith("/") ? `/docs${versionPath}` : "") + entry.href}>
                  {entry.description}
                </SectionPart>
              ))}
            </Section>
          ))}
        </div>
      </div>
      <style jsx>{styles}</style>
    </Page>
  )
}

Layout = (props) => {
  const { window } = props;
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };

  const sidebarContents = [
    {
      title: "Contacts",
      link: "/admin_dashboard/contacts",
      icon: <Phone strokeWidth={1} />,
    },
    {
      title: "Tickets",
      link: "/admin_dashboard/tickets",
      icon: <Package strokeWidth={1} />,
    },
    {
      title: "Todos",
      link: "/admin_dashboard/todos",
      icon: <FileText strokeWidth={1} />,
    },
    {
      title: "Email",
      link: "/admin_dashboard/emails",
      icon: <Inbox strokeWidth={1} />,
    },
    {
      title: "CDA",
      link: "/admin_dashboard/cda",
      icon: <Book strokeWidth={1} />,
    },
  ];

  const drawer = (
    <div>
      <Toolbar />
      <Divider />
      <List>
        {sidebarContents.map((item, index) => (
          <ListItem button key={index} component={NavLink} to={item.link}>
            <ListItemIcon>{item.icon}</ListItemIcon>
            <ListItemText primary={item.title} />
          </ListItem>
        ))}
      </List>
      <Divider />
    </div>
  );

  const container =
    window !== undefined ? () => window().document.body : undefined;

  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  const renderMenu = (
    <Menu
      id="long-menu"
      MenuListProps={{
        "aria-labelledby": "long-button",
      }}
      anchorEl={anchorEl}
      open={open}
      onClose={handleClose}
    >
      <MenuItem onClick={handleClose}>
        <ListItemIcon>
          <User width="18px" strokeWidth={1.5} />
        </ListItemIcon>
        <Typography variant="inherit">Profile</Typography>
      </MenuItem>
      <MenuItem onClick={handleClose}>
        <ListItemIcon>
          <LogOut width="18px" strokeWidth={1.5} />
        </ListItemIcon>
        <Typography variant="inherit">Logout</Typography>
      </MenuItem>
    </Menu>
  );

  return (
    <section className="wrapper">
      <Box sx={{ display: "flex" }}>
        <CssBaseline />
        <AppBar
          position="fixed"
          sx={{
            // width: { sm: `calc(100% - ${drawerWidth}px)` },
            // ml: { sm: `${drawerWidth}px` },
            backgroundColor: "#1e1e2f",
            backgroundImage: "none",
            boxShadow: "none",
            borderTop: "2px solid #1d8cf8",
          }}
        >
          <Toolbar>
            <IconButton
              color="inherit"
              aria-label="open drawer"
              edge="start"
              onClick={handleDrawerToggle}
              sx={{ mr: 2, display: { sm: "none" } }}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" noWrap component="div">
              Easy CRM
            </Typography>
            <Box sx={{ flexGrow: 1 }} />
            <IconButton
              color="inherit"
              aria-label="more"
              id="long-button"
              aria-controls={open ? "long-menu" : undefined}
              aria-expanded={open ? "true" : undefined}
              aria-haspopup="true"
              onClick={handleClick}
            >
              <MoreVertical />
            </IconButton>
            {renderMenu}
          </Toolbar>
        </AppBar>
        <Box
          component="nav"
          sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
          aria-label="sidebar"
          className="sidebar"
        >
          {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
          <Drawer
            container={container}
            variant="temporary"
            open={mobileOpen}
            onClose={handleDrawerToggle}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
            sx={{
              display: { xs: "block", sm: "none" },
              "& .MuiDrawer-paper": {
                boxSizing: "border-box",
                width: 230,
                border: "none",
                // backgroundColor: "transparent",
                background: "linear-gradient(0deg, #3358f4, #1d8cf8)",
                position: "relative",
              },
            }}
          >
            {drawer}
          </Drawer>
          <Drawer
            variant="permanent"
            sx={{
              display: { xs: "none", sm: "block" },
              "& .MuiDrawer-paper": {
                boxSizing: "border-box",
                width: 230,
                border: "none",
                backgroundColor: "transparent",
                position: "relative",
              },
            }}
            open
          >
            {drawer}
          </Drawer>
        </Box>
        <Box
          component="main"
          sx={{
            flexGrow: 1,
            p: 3,
            width: { sm: `calc(100% - ${drawerWidth}px)` },
            overflowY: "scroll",
            // height: "100vh - 64px",
          }}
          className="main-panel"
        >
          <Toolbar />
          <Outlet />
        </Box>
      </Box>
    </section>
  );
}