ui improvements

2024-05-11 05:55:08 +00:00 · 2020-06-02 01:37:26 -07:00
parent f0a1822853
commit b53d61b1d7
17 changed files with 825 additions and 502 deletions
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -11,7 +11,10 @@ module.exports = {
  organizationName: "checktheroads",
  projectName: "hyperglass",
  themeConfig: {
-        googleAnalytics: { trackingID: googleTrackingId || " ", anonymizeIP: false },
+    googleAnalytics: {
+      trackingID: googleTrackingId || " ",
+      anonymizeIP: false,
+    },
    gtag: {
      trackingID: googleTrackingId || " ",
      anonymizeIP: false,
@@ -24,11 +27,12 @@ module.exports = {
      links: [
        { to: "docs/introduction", label: "Docs", position: "left" },
        { to: "screenshots", label: "Screenshots", position: "left" },
-                {
-                    href: "https://demo.hyperglass.io",
-                    label: "Demo",
-                    position: "left",
-                },
+        { to: "demo", label: "Demo", position: "left" },
+        // {
+        //   href: "https://demo.hyperglass.io",
+        //   label: "Demo",
+        //   position: "left",
+        // },
      ],
    },
    footer: {
@@ -54,6 +58,10 @@ module.exports = {
        {
          title: "Community",
          items: [
+            {
+              label: "Telegram",
+              href: "https://t.me/hyperglasslg",
+            },
            {
              label: "Gitter",
              href: "https://gitter.im/hyperglass",
--- a/docs/package.json
+++ b/docs/package.json
@@ -16,7 +16,6 @@
    "prismjs": "^1.19.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.4",
-    "react-dark-mode-toggle": "^0.0.3",
    "react-dom": "^16.8.4",
    "use-media": "^1.4.0"
  },
--- a/docs/src/components/ColorModeToggle/Moon.js
+++ b/docs/src/components/ColorModeToggle/Moon.js
@@ -0,0 +1,23 @@
+import * as React from "react";
+
+export const Moon = ({ color, size = "1.5rem", ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    style={{
+      height: size,
+      width: size,
+    }}
+    strokeWidth={0}
+    stroke="currentColor"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      d="M14.53 10.53a7 7 0 01-9.058-9.058A7.003 7.003 0 008 15a7.002 7.002 0 006.53-4.47z"
+      fill={color || "currentColor"}
+      fillRule="evenodd"
+      clipRule="evenodd"
+    />
+  </svg>
+);
--- a/docs/src/components/ColorModeToggle/Sun.js
+++ b/docs/src/components/ColorModeToggle/Sun.js
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+export const Sun = ({ color, size = "1.5rem", ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    style={{
+      height: size,
+      width: size,
+    }}
+    strokeWidth={0}
+    stroke="currentColor"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      d="M256 32a224 224 0 00-161.393 69.035h323.045A224 224 0 00256 32zM79.148 118.965a224 224 0 00-16.976 25.16H449.74a224 224 0 00-16.699-25.16H79.148zm-27.222 45.16A224 224 0 0043.3 186.25h425.271a224 224 0 00-8.586-22.125H51.926zM36.783 210.25a224 224 0 00-3.02 19.125h444.368a224 224 0 00-3.113-19.125H36.783zm-4.752 45.125A224 224 0 0032 256a224 224 0 00.64 16.5h446.534A224 224 0 00480 256a224 224 0 00-.021-.625H32.03zm4.67 45.125a224 224 0 003.395 15.125h431.578a224 224 0 003.861-15.125H36.701zm14.307 45.125a224 224 0 006.017 13.125H454.82a224 224 0 006.342-13.125H51.008zm26.316 45.125a224 224 0 009.04 11.125H425.86a224 224 0 008.727-11.125H77.324zm45.62 45.125A224 224 0 00136.247 445h239.89a224 224 0 0012.936-9.125h-266.13z"
+      fill={color || "currentColor"}
+    />
+  </svg>
+);
--- a/docs/src/components/ColorModeToggle/index.js
+++ b/docs/src/components/ColorModeToggle/index.js
@@ -0,0 +1,30 @@
+import * as React from "react";
+import classnames from "classnames";
+import { Sun } from "./Sun";
+import { Moon } from "./Moon";
+import styles from "./styles.module.css";
+
+const iconMap = { true: Moon, false: Sun };
+
+export const ColorModeToggle = ({ isDark, toggle, ...props }) => {
+  const Icon = iconMap[isDark];
+  const handleToggle = () => {
+    if (isDark) {
+      return toggle(false);
+    } else {
+      return toggle(true);
+    }
+  };
+  const label = `${isDark ? "Hurt" : "Rest"} your eyes`;
+  return (
+    <button
+      aria-label={label}
+      title={label}
+      className={classnames(styles.colorModeToggle)}
+      onClick={handleToggle}
+      {...props}
+    >
+      <Icon />
+    </button>
+  );
+};
--- a/docs/src/components/ColorModeToggle/styles.module.css
+++ b/docs/src/components/ColorModeToggle/styles.module.css
@@ -0,0 +1,40 @@
+.colorModeToggle {
+  color: var(--ifm-color-black);
+  box-sizing: border-box;
+  background-color: transparent;
+  border-radius: var(--ifm-button-border-radius);
+  border: 1px solid transparent;
+  transition: color var(--ifm-button-transition-duration)
+      cubic-bezier(0.08, 0.52, 0.52, 1),
+    background var(--ifm-button-transition-duration)
+      cubic-bezier(0.08, 0.52, 0.52, 1),
+    border-color var(--ifm-button-transition-duration)
+      cubic-bezier(0.08, 0.52, 0.52, 1);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: calc(0.875rem * var(--ifm-button-size-multiplier));
+  line-height: 1.5;
+  outline: 0;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  padding: 6px 12px;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.colorModeToggle:hover {
+  border: 1px solid var(--ifm-color-black);
+  color: var(--ifm-color-gray-700);
+}
+
+html[data-theme="dark"] .colorModeToggle {
+  color: var(--ifm-color-white);
+}
+
+html[data-theme="dark"] .colorModeToggle:hover {
+  border: 1px solid var(--ifm-color-gray-500);
+  color: var(--ifm-color-gray-500);
+}
--- a/docs/src/components/GithubButton/index.js
+++ b/docs/src/components/GithubButton/index.js
@@ -0,0 +1,45 @@
+import * as React from "react";
+import classnames from "classnames";
+import useThemeContext from "@theme/hooks/useThemeContext";
+
+import styles from "./styles.module.css";
+
+const Icon = ({ color, size = "1.5rem", ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    style={{
+      height: size,
+      width: size,
+    }}
+    strokeWidth={0}
+    stroke="currentColor"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+      fill={color || "currentColor"}
+      fillRule="evenodd"
+    />
+  </svg>
+);
+
+export const GithubButton = ({ href, ...props }) => {
+  const { isDarkTheme } = useThemeContext();
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={classnames(
+        styles.githubButton,
+        isDarkTheme ? "button--secondary" : "button--primary",
+        "button button--outline"
+      )}
+      {...props}
+    >
+      <Icon />
+    </a>
+  );
+};
--- a/docs/src/components/GithubButton/styles.module.css
+++ b/docs/src/components/GithubButton/styles.module.css
@@ -0,0 +1,46 @@
+/* @media screen and (max-width: 997px) {
+  .githubButton {
+    display: none !important;
+  }
+} */
+
+.githubButton {
+  color: var(--ifm-color-black);
+  box-sizing: border-box;
+  background-color: transparent;
+  border-radius: var(--ifm-button-border-radius);
+  border: 1px solid transparent;
+  transition: color var(--ifm-button-transition-duration)
+      cubic-bezier(0.08, 0.52, 0.52, 1),
+    background var(--ifm-button-transition-duration)
+      cubic-bezier(0.08, 0.52, 0.52, 1),
+    border-color var(--ifm-button-transition-duration)
+      cubic-bezier(0.08, 0.52, 0.52, 1);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: calc(0.875rem * var(--ifm-button-size-multiplier));
+  line-height: 1.5;
+  outline: 0;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  padding: 6px 12px;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.githubButton:hover {
+  border: 1px solid var(--ifm-color-black);
+  color: var(--ifm-color-gray-700);
+}
+
+html[data-theme="dark"] .githubButton {
+  color: var(--ifm-color-white);
+}
+
+html[data-theme="dark"] .githubButton:hover {
+  border: 1px solid var(--ifm-color-gray-500);
+  color: var(--ifm-color-gray-500);
+}
--- a/docs/src/components/Logo.js
+++ b/docs/src/components/Logo.js
@@ -1,6 +1,6 @@
-import React from "react";
+import * as React from "react";

-export default ({ color = "#ff5e5b", size = 32, className }) => (
+export default ({ color = "currentColor", size = 32, ...props }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
@@ -8,7 +8,7 @@ export default ({ color = "#ff5e5b", size = 32, className }) => (
    viewBox="0 0 1014 1014"
    xmlSpace="preserve"
    fill={color}
-        className={className}
+    {...props}
  >
    <g transform="translate(0.000000,1014.000000) scale(0.100000,-0.100000)">
      <path
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -10,13 +10,6 @@

 :root {
  --ifm-font-size-sm: 12px;
-  /* --ifm-color-secondary: #314cb6;
-    --ifm-color-secondary-dark: #2c44a4;
-    --ifm-color-secondary-darker: #2a419b;
-    --ifm-color-secondary-darkest: #22357f;
-    --ifm-color-secondary-light: #3654c8;
-    --ifm-color-secondary-lighter: #3e5bcb;
-    --ifm-color-secondary-lightest: #5a72d3; */
  --ifm-color-secondary: #69a2b0;
  --ifm-color-secondary-dark: #5796a6;
  --ifm-color-secondary-darker: #528e9c;
@@ -125,6 +118,31 @@ h6 code {
  color: var(--ifm-color-primary);
 }

+a {
+  color: var(--ifm-color-secondary);
+}
+.contents a.contents__link--active[class] {
+  color: var(--ifm-color-secondary);
+  font-weight: bold;
+}
+
+a:hover {
+  color: var(--ifm-color-secondary-darker);
+}
+
+html[data-theme="dark"] a {
+  color: var(--ifm-color-primary);
+}
+
+html[data-theme="dark"] .contents a.contents__link--active[class] {
+  color: var(--ifm-color-primary);
+  font-weight: bold;
+}
+
+html[data-theme="dark"] a:hover {
+  color: var(--ifm-color-primary-light);
+}
+
@media screen and (max-width: 997px) {
  .col.footer__col[class][class] {
    text-align: left;
--- a/docs/src/pages/demo.js
+++ b/docs/src/pages/demo.js
@@ -0,0 +1,62 @@
+import * as React from "react";
+import classnames from "classnames";
+import Layout from "@theme/Layout";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import styles from "./styles.module.css";
+
+function Demo() {
+  return (
+    <Layout description="hyperglass demo" keywords={["hyperglass", "demo"]}>
+      <header className={classnames("hero", styles.heroBanner)}>
+        <div className={classnames("container", styles.smallerTitleContainer)}>
+          <h1 className={classnames("hero__title", styles.title)}>
+            Coming Soon!
+          </h1>
+          <h2
+            className={classnames(
+              "hero__subtitle",
+              styles.subTitle,
+              styles.smallerTitle
+            )}
+          >
+            <span className={styles.tagPrimary}>hyperglass 1.0</span> is still
+            in progress, but the demo will be made available soon.
+          </h2>
+          <div className={styles.buttons}>
+            <Link
+              className={classnames(
+                "button button--outline button--secondary button--lg",
+                styles.homeBtn,
+                styles.btnSecondary
+              )}
+              to={useBaseUrl("docs/getting-started")}
+            >
+              Back to the Docs
+            </Link>
+          </div>
+        </div>
+      </header>
+      <main>
+        <section className={styles.content}>
+          <div className="container">
+            <div className="row">
+              <div className={classnames("col col--4")}>
+                <section className={styles.content}>
+                  <div className="container">
+                    <div className="row">
+                      <div className={classnames("col col--12")}></div>
+                    </div>
+                  </div>
+                </section>
+              </div>
+              <div className={classnames("col col--8")}></div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </Layout>
+  );
+}
+
+export default Demo;
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -24,17 +24,23 @@ function Home() {
        "python",
        "python3",
        "react",
-                "reactjs"
+        "reactjs",
      ]}
    >
      <header className={classnames("hero", styles.heroBanner)}>
        <div className="container">
-                    <h1 className={classnames("hero__title", styles.title)}>hyperglass</h1>
-                    <h3 className={classnames("hero__subtitle", styles.subTitle)}>
-                        the <span className={styles.tagPrimary}>network looking glass</span> that
-                        tries to
-                        <span className={styles.tagSecondary}> make the internet better</span>.
-                    </h3>
+          <h1 className={classnames("hero__title", styles.title)}>
+            hyperglass
+          </h1>
+          <h2 className={classnames("hero__subtitle", styles.subTitle)}>
+            the <span className={styles.tagPrimary}>network looking glass</span>{" "}
+            that tries to
+            <span className={styles.tagSecondary}>
+              {" "}
+              make the internet better
+            </span>
+            .
+          </h2>
          <div className={styles.buttons}>
            <Link
              className={classnames(
@@ -44,7 +50,7 @@ function Home() {
              )}
              to={useBaseUrl("docs/getting-started")}
            >
-                            Get a looking glass
+              Get your looking glass
            </Link>
            <Link
              className={classnames(
--- a/docs/src/pages/screenshots.js
+++ b/docs/src/pages/screenshots.js
@@ -0,0 +1,66 @@
+import * as React from "react";
+import classnames from "classnames";
+import Layout from "@theme/Layout";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import styles from "./styles.module.css";
+
+function Screenshots() {
+  return (
+    <Layout
+      description="hyperglass screenshots"
+      keywords={["hyperglass", "screenshots"]}
+    >
+      <header className={classnames("hero", styles.heroBanner)}>
+        <div className={classnames("container", styles.smallerTitleContainer)}>
+          <h1 className={classnames("hero__title", styles.title)}>
+            Coming Soon!
+          </h1>
+          <h2
+            className={classnames(
+              "hero__subtitle",
+              styles.subTitle,
+              styles.smallerTitle
+            )}
+          >
+            <span className={styles.tagPrimary}>hyperglass 1.0</span> is still
+            in progress, so screenshots may not be made available until shortly
+            before the release.
+          </h2>
+          <div className={styles.buttons}>
+            <Link
+              className={classnames(
+                "button button--outline button--secondary button--lg",
+                styles.homeBtn,
+                styles.btnSecondary
+              )}
+              to={useBaseUrl("docs/getting-started")}
+            >
+              Back to the Docs
+            </Link>
+          </div>
+        </div>
+      </header>
+      <main>
+        <section className={styles.content}>
+          <div className="container">
+            <div className="row">
+              <div className={classnames("col col--4")}>
+                <section className={styles.content}>
+                  <div className="container">
+                    <div className="row">
+                      <div className={classnames("col col--12")}></div>
+                    </div>
+                  </div>
+                </section>
+              </div>
+              <div className={classnames("col col--8")}></div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </Layout>
+  );
+}
+
+export default Screenshots;
--- a/docs/src/theme/Navbar/index.js
+++ b/docs/src/theme/Navbar/index.js
@@ -6,23 +6,20 @@
 */

 import React, { useCallback, useState } from "react";
+import classnames from "classnames";
 import Link from "@docusaurus/Link";
 import { useLocation } from "react-router-dom";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useBaseUrl from "@docusaurus/useBaseUrl";
-
 import SearchBar from "@theme/SearchBar";
-import Toggle from "@theme/Toggle";
-
-import classnames from "classnames";
-
 import useThemeContext from "@theme/hooks/useThemeContext";
 import useHideableNavbar from "@theme/hooks/useHideableNavbar";
 import useLockBodyScroll from "@theme/hooks/useLockBodyScroll";

-import DarkModeToggle from "react-dark-mode-toggle";
 import useMedia from "use-media";

+import { ColorModeToggle } from "../../components/ColorModeToggle";
+import { GithubButton } from "../../components/GithubButton";
 import Logo from "../../components/Logo";
 import styles from "./styles.module.css";

@@ -89,8 +86,6 @@ function Navbar() {
    : null;
  const logoSrc = logo.srcDark && isDarkTheme ? logo.srcDark : logo.src;

-    // const logoColor = isDarkTheme ? "#ff5e5b" : "#000";
-
  return (
    <nav
      ref={navbarRef}
@@ -112,7 +107,9 @@ function Navbar() {
                className={styles.logo}
              />
              {title != null && (
-                                <strong className={isSearchBarExpanded ? styles.hideLogoText : ""}>
+                <strong
+                  className={isSearchBarExpanded ? styles.hideLogoText : ""}
+                >
                  {title}
                </strong>
              )}
@@ -165,56 +162,66 @@ function Navbar() {
                className={styles.logo}
              />
              {title != null && (
-                                <strong className={isSearchBarExpanded ? styles.hideLogoText : ""}>
+                <strong
+                  className={isSearchBarExpanded ? styles.hideLogoText : ""}
+                >
                  {title}
                </strong>
              )}
            </Link>
          )}
-                    {!disableDarkMode && !isMobile && (
-                        <DarkModeToggle
-                            speed={2.5}
-                            onChange={onToggleChange}
-                            checked={isDarkTheme}
-                        />
-                    )}
+
          {!isMobile && (
            <SearchBar
              handleSearchBarToggle={setIsSearchBarExpanded}
              isSearchBarExpanded={isSearchBarExpanded}
+              style={{ marginLeft: "0.5rem", marginRight: "0.5rem" }}
            />
          )}
-                    <a
-                        className={classnames(
-                            styles.displayOnlyInLargeViewport,
-                            "button button--primary",
-                            styles.button
+
+          {!disableDarkMode && !isMobile && (
+            <ColorModeToggle
+              toggle={onToggleChange}
+              isDark={isDarkTheme}
+              style={{ marginLeft: "0.5rem", marginRight: "0.5rem" }}
+            />
          )}
+          {!isMobile && (
+            <GithubButton
              href={`https://github.com/${siteConfig.organizationName}/${siteConfig.projectName}`}
-                        style={{ margin: 0, marginLeft: 15 }}
-                    >
-                        GITHUB →
-                    </a>
+            />
+          )}
        </div>
      </div>
-            <div role="presentation" className="navbar-sidebar__backdrop" onClick={hideSidebar} />
+      <div
+        role="presentation"
+        className="navbar-sidebar__backdrop"
+        onClick={hideSidebar}
+      />
      <div className="navbar-sidebar">
        <div className="navbar-sidebar__brand">
          <Link className="navbar__brand" to={baseUrl}>
-                        <Logo color={logoColor[isDarkTheme]} size={32} className={styles.logo} />
+            <Logo
+              color={logoColor[isDarkTheme]}
+              size={32}
+              className={styles.logo}
+            />
            {title != null && (
-                            <strong className={isSearchBarExpanded ? styles.hideLogoText : ""}>
+              <strong
+                className={isSearchBarExpanded ? styles.hideLogoText : ""}
+              >
                {title}
              </strong>
            )}
          </Link>
-                    {!disableDarkMode && sidebarShown && (
-                        <DarkModeToggle
-                            speed={2.5}
-                            onChange={onToggleChange}
-                            checked={isDarkTheme}
+          {sidebarShown && (
+            <GithubButton
+              href={`https://github.com/${siteConfig.organizationName}/${siteConfig.projectName}`}
            />
          )}
+          {!disableDarkMode && sidebarShown && (
+            <ColorModeToggle toggle={onToggleChange} isDark={isDarkTheme} />
+          )}
        </div>
        <div className="navbar-sidebar__items">
          <div className="menu">
@@ -233,16 +240,6 @@ function Navbar() {
                handleSearchBarToggle={setIsSearchBarExpanded}
                isSearchBarExpanded={isSearchBarExpanded}
              />
-                            <div style={{ margin: 5, marginTop: 15 }} />
-                            <a
-                                className={classnames(
-                                    "button button--block button--primary",
-                                    styles.button
-                                )}
-                                href={siteConfig.url}
-                            >
-                                GITHUB →
-                            </a>
            </ul>
          </div>
        </div>
--- a/docs/src/theme/SearchBar/index.js
+++ b/docs/src/theme/SearchBar/index.js
@@ -5,20 +5,20 @@
 * LICENSE file in the root directory of this source tree.
 */

-import React, {useState, useRef, useCallback} from 'react';
-import classnames from 'classnames';
+import React, { useState, useRef, useCallback } from "react";
+import classnames from "classnames";

-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import {useHistory} from '@docusaurus/router';
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { useHistory } from "@docusaurus/router";

-import './styles.css';
+import "./styles.css";

-const Search = props => {
+const Search = ({ handleSearchBarToggle, isSearchBarExpanded, ...props }) => {
  const [algoliaLoaded, setAlgoliaLoaded] = useState(false);
  const searchBarRef = useRef(null);
-  const {siteConfig = {}} = useDocusaurusContext();
+  const { siteConfig = {} } = useDocusaurusContext();
  const {
-    themeConfig: {algolia},
+    themeConfig: { algolia },
  } = siteConfig;
  const history = useHistory();

@@ -27,14 +27,14 @@ const Search = props => {
      appId: algolia.appId,
      apiKey: algolia.apiKey,
      indexName: algolia.indexName,
-      inputSelector: '#search_input_react',
+      inputSelector: "#search_input_react",
      algoliaOptions: algolia.algoliaOptions,
      // Override algolia's default selection event, allowing us to do client-side
      // navigation and avoiding a full page refresh.
      handleSelected: (_input, _event, suggestion) => {
        // Use an anchor tag to parse the absolute url into a relative url
        // Alternatively, we can use new URL(suggestion.url) but its not supported in IE
-        const a = document.createElement('a');
+        const a = document.createElement("a");
        a.href = suggestion.url;

        // Algolia use closest parent element id #__docusaurus when a h1 page title does not have an id
@@ -57,12 +57,12 @@ const Search = props => {
      return;
    }

-    Promise.all([import('docsearch.js'), import('./algolia.css')]).then(
-      ([{default: docsearch}]) => {
+    Promise.all([import("docsearch.js"), import("./algolia.css")]).then(
+      ([{ default: docsearch }]) => {
        setAlgoliaLoaded(true);
        window.docsearch = docsearch;
        initAlgolia(focus);
-      },
+      }
    );
  };

@@ -73,26 +73,26 @@ const Search = props => {
      searchBarRef.current.focus();
    }

-    props.handleSearchBarToggle(!props.isSearchBarExpanded);
-  }, [props.isSearchBarExpanded]);
+    handleSearchBarToggle(!isSearchBarExpanded);
+  }, [isSearchBarExpanded]);

  const handleSearchInputBlur = useCallback(() => {
-    props.handleSearchBarToggle(!props.isSearchBarExpanded);
-  }, [props.isSearchBarExpanded]);
+    handleSearchBarToggle(!isSearchBarExpanded);
+  }, [isSearchBarExpanded]);

-  const handleSearchInput = useCallback(e => {
-    const needFocus = e.type !== 'mouseover';
+  const handleSearchInput = useCallback((e) => {
+    const needFocus = e.type !== "mouseover";

    loadAlgolia(needFocus);
  });

  return (
-    <div className="navbar__search" key="search-box">
+    <div className="navbar__search" key="search-box" {...props}>
      <span
        aria-label="expand searchbar"
        role="button"
-        className={classnames('search-icon', {
-          'search-icon-hidden': props.isSearchBarExpanded,
+        className={classnames("search-icon", {
+          "search-icon-hidden": isSearchBarExpanded,
        })}
        onClick={handleSearchIcon}
        onKeyDown={handleSearchIcon}
@@ -104,9 +104,9 @@ const Search = props => {
        placeholder="Search"
        aria-label="Search"
        className={classnames(
-          'navbar__search-input',
-          {'search-bar-expanded': props.isSearchBarExpanded},
-          {'search-bar': !props.isSearchBarExpanded},
+          "navbar__search-input",
+          { "search-bar-expanded": isSearchBarExpanded },
+          { "search-bar": !isSearchBarExpanded }
        )}
        onMouseOver={handleSearchInput}
        onFocus={handleSearchInput}
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -1807,14 +1807,6 @@ babel-plugin-extract-import-names@^1.5.8:
  dependencies:
    "@babel/helper-plugin-utils" "7.8.3"

-babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
 bail@^1.0.0:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
@@ -2650,7 +2642,7 @@ core-js-compat@^3.6.2:
    browserslist "^4.8.5"
    semver "7.0.0"

-core-js@^2.4.0, core-js@^2.6.5:
+core-js@^2.6.5:
  version "2.6.11"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
  integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
@@ -5404,24 +5396,6 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3
  dependencies:
    js-tokens "^3.0.0 || ^4.0.0"

-lottie-api@bodymovin/lottie-api#master:
-  version "1.0.3"
-  resolved "https://codeload.github.com/bodymovin/lottie-api/tar.gz/3878f3acb1466a012553a08b929a12b11937c855"
-
-lottie-react-web@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/lottie-react-web/-/lottie-react-web-2.1.4.tgz#3159b4600b6baa858175a1c97daa595f85903d6e"
-  integrity sha512-/wcAxckdTo1uKUgv3hvUktDeeTQByNdRda+1iBQcteV3PyaIikCV0LleSOkBJccYA+v0mM/OZvoSbmQdWxt4+w==
-  dependencies:
-    babel-runtime "^6.26.0"
-    lottie-api bodymovin/lottie-api#master
-    lottie-web "^5.2.1"
-
-lottie-web@^5.2.1:
-  version "5.6.8"
-  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.6.8.tgz#4e19c4985076368ace3e2140ba599fdc4d927c52"
-  integrity sha512-2b7KDEIzpp3Y+u9BtFMHBkUFWe6TFgVdYvXvpfmbbxAL9XiwHUywAoWH1GhCCMmGqWqkxw8v4IxnOq/3hiOtJg==
-
 lower-case@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.1.tgz#39eeb36e396115cc05e29422eaea9e692c9408c7"
@@ -7303,13 +7277,6 @@ raw-body@2.4.0:
    iconv-lite "0.4.24"
    unpipe "1.0.0"

-react-dark-mode-toggle@^0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/react-dark-mode-toggle/-/react-dark-mode-toggle-0.0.3.tgz#9725357c19674fca93a7e00b9126d474b50d8126"
-  integrity sha512-DMdd/ClnVs+i0iV5u0UdLwUHHbUzg2TQCqQB9HFypftfo+S5MU6jtFzqo6gDGl8kIISYqMDAkdmw6nszAUQs7w==
-  dependencies:
-    lottie-react-web "^2.1.4"
-
 react-dev-utils@^10.2.1:
  version "10.2.1"
  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19"
@@ -7515,11 +7482,6 @@ regenerate@^1.4.0:
  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
  integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==

-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
-  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
-
 regenerator-runtime@^0.13.4:
  version "0.13.5"
  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"