diff --git a/docs/src/pages/styles.module.css b/docs/src/pages/styles.module.css
index 4732b3d..4d6f613 100755
--- a/docs/src/pages/styles.module.css
+++ b/docs/src/pages/styles.module.css
@@ -34,6 +34,13 @@
width: 200px;
}
-.getStarted[class]:hover {
- color: var(--ifm-color-content-secondary);
+.getStarted[class][class]:not(.button--active):not(:hover) {
+ color: white;
+ border-color: white;
+}
+
+.getStarted[class]:hover {
+ background-color: var(--ifm-color-secondary);
+ color: white;
+ border-color: none;
}
diff --git a/docs/src/theme/Navbar/index.js b/docs/src/theme/Navbar/index.js
new file mode 100644
index 0000000..5b6aa8e
--- /dev/null
+++ b/docs/src/theme/Navbar/index.js
@@ -0,0 +1,217 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useCallback, useState } from "react";
+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 useTheme from "@theme/hooks/useTheme";
+import useHideableNavbar from "@theme/hooks/useHideableNavbar";
+
+import Logo from "../../components/Logo";
+import styles from "./styles.module.css";
+
+function NavLink({ to, href, label, position, ...props }) {
+ const toUrl = useBaseUrl(to);
+ return (
+
+ {label}
+
+ );
+}
+
+function Navbar() {
+ const context = useDocusaurusContext();
+ const { siteConfig = {} } = context;
+ const { baseUrl, themeConfig = {} } = siteConfig;
+ const { navbar = {}, disableDarkMode = false } = themeConfig;
+ const { title, logo = {}, links = [], hideOnScroll = false } = navbar;
+ const [sidebarShown, setSidebarShown] = useState(false);
+ const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false);
+ const [theme, setTheme] = useTheme();
+ const { pathname } = useLocation();
+
+ const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll);
+
+ const showSidebar = useCallback(() => {
+ document.body.style.overflow = "hidden";
+ setSidebarShown(true);
+ }, [setSidebarShown]);
+ const hideSidebar = useCallback(() => {
+ document.body.style.overflow = "visible";
+ setSidebarShown(false);
+ }, [setSidebarShown]);
+
+ const onToggleChange = useCallback(e => setTheme(e.target.checked ? "dark" : ""), [setTheme]);
+
+ const logoUrl = useBaseUrl(logo.src);
+ const logoDark = useBaseUrl(logo.dark);
+ return (
+
+ );
+}
+
+export default Navbar;
diff --git a/docs/src/theme/Navbar/styles.module.css b/docs/src/theme/Navbar/styles.module.css
new file mode 100644
index 0000000..3ce1e64
--- /dev/null
+++ b/docs/src/theme/Navbar/styles.module.css
@@ -0,0 +1,71 @@
+@media screen and (max-width: 997px) {
+ .displayOnlyInLargeViewport {
+ display: none !important;
+ }
+}
+
+@media (max-width: 360px) {
+ .hideLogoText {
+ display: none;
+ }
+}
+
+.navbarHideable {
+ transition: top 0.2s ease-in-out;
+}
+
+.navbarHidden {
+ top: calc(var(--ifm-navbar-height) * -1) !important;
+}
+.navbarItems {
+ justify-content: space-between;
+}
+
+.navLink[class] {
+ position: relative;
+}
+
+.navLink[class]:hover {
+ color: var(--ifm-color-white);
+}
+
+html[data-theme="dark"] .navLink[class]:hover {
+ color: var(--ifm-color-secondary);
+}
+
+.navLink[class]:global(.navbar__link--active) {
+ color: inherit;
+ font-weight: bold;
+}
+.navLink[class]:global(.navbar__link--active)::after {
+ position: absolute;
+ left: 0;
+ width: 100%;
+ height: 1px;
+ background: var(--ifm-color-content);
+ content: "";
+ transition: width 0.5s, opacity 0.5s, transform 0.5s;
+ transform: translateY(-6px);
+}
+
+.toggle {
+ margin-right: 20px;
+}
+
+.navbarMain {
+ background-color: var(--ifm-color-primary);
+ box-shadow: none;
+}
+
+.logo {
+ margin: 4px;
+ fill: var(--ifm-color-content);
+}
+
+html[data-theme="dark"] .navbarOther {
+ background-color: var(--ifm-background-color);
+}
+
+.navbarOther {
+ background-color: var(--ifm-color-white);
+}