mirror of
https://github.com/thatmattlove/hyperglass.git
synced 2026-01-17 00:38:06 +00:00
docs updates
This commit is contained in:
checktheroads
parent
666bc8c091
commit
e413152203
11 changed files with 487 additions and 23 deletions
|
|
@ -7,7 +7,7 @@ description: Welcome to hyperglass
|
|||
import Link from "@docusaurus/Link";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import classnames from "classnames";
|
||||
import styles from "../src/pages/styles.module.css";
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
# What is hyperglass?
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,10 @@ description: hyperglass query types
|
|||
|
||||
import Link from "@docusaurus/Link";
|
||||
import Code from "../src/components/JSXCode";
|
||||
import MiniNote from "../src/components/MiniNote";
|
||||
import RP from "../src/components/RegexPattern";
|
||||
|
||||
Each query type may be disabled, enabled, or customized.
|
||||
Each query type may be disabled, enabled, or customized. The `display_name` parameter defines how the query type will be displayed in the UI's Query Type select element.
|
||||
|
||||
## `bgp_route`
|
||||
|
||||
|
|
@ -21,18 +23,38 @@ Each query type may be disabled, enabled, or customized.
|
|||
## `bgp_community`
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
| :------------- | :-----: | :---------------- | :--------------------------------------------------------- |
|
||||
| :------------- | :-----: | :---------------- | :------------------------------------------------------------------------------ |
|
||||
| `enable` | Boolean | `true` | Enable or disable the BGP Community query type. |
|
||||
| `display_name` | String | `'BGP Community'` | Text displayed for the BGP Community query type in the UI. |
|
||||
| `pattern` | | | |
|
||||
| `pattern` | | | <Link to="#community-patterns">BGP Community Regular Expression Patterns</Link> |
|
||||
|
||||
### Community Patterns
|
||||
|
||||
hyperglass allows you to override the default regular expression patterns used to validate UI and API queries. hyperglass supports [Decimal (well known)](https://tools.ietf.org/html/rfc1997) communities, [Extended AS](https://tools.ietf.org/html/rfc4360) communities, and [Large](https://tools.ietf.org/html/rfc8092) communities.
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
| :------------ | :----: | :--------------------------------- | :----------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `decimal` | String | <RP pattern="community_decimal"/> | Regular expression pattern for validating decimal type BGP Community strings. |
|
||||
| `extended_as` | String | <RP pattern="community_extended"/> | Regular expression pattern for validating extended AS type BGP Community strings, e.g. `65000:1` |
|
||||
| `large` | String | <RP pattern="community_large"/> | Regular expression pattern for validating [large community](http://largebgpcommunities.net/) strings, e.g. `65000:65001:65002` |
|
||||
|
||||
## `bgp_aspath`
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
| :------------- | :-----: | :-------------- | :------------------------------------------------------- |
|
||||
| :------------- | :-----: | :-------------- | :------------------------------------------------------------------------------------- |
|
||||
| `enable` | Boolean | `true` | Enable or disable the BGP AS Path query type. |
|
||||
| `display_name` | String | `'BGP AS Path'` | Text displayed for the BGP AS Path query type in the UI. |
|
||||
| `pattern` | | | |
|
||||
| `pattern` | | | <Link to="#as-path-patterns">BGP AS Path Settings & Regular Expression Patterns</Link> |
|
||||
|
||||
### AS Path Patterns
|
||||
|
||||
AS Path regular expression patterns may also be customized, should you wish to more granularly control what your network considers a valid AS Path pattern. hyperglass makes two "modes" available for validation - [**`asplain`** and **`asdot`**](https://tools.ietf.org/html/rfc5396).
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
| :-------- | :----: | :----------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `mode` | String | `'asplain'` | Set ASN display mode. This field is dependent on how your network devices are configured. <MiniNote>Must be <Code>asplain</Code> or <Code>asdot</Code></MiniNote> |
|
||||
| `asplain` | String | <RP pattern="aspath_asplain"/> | Regular expression pattern for validating **asplain** type BGP AS Path queries. |
|
||||
| `asdot` | String | <RP pattern="aspath_asdot"/> | Regular expression pattern for validating **asdot** type BGP AS Path queries. |
|
||||
|
||||
## `ping`
|
||||
|
||||
|
|
@ -47,3 +69,32 @@ Each query type may be disabled, enabled, or customized.
|
|||
| :------------- | :-----: | :------------- | :------------------------------------------------------ |
|
||||
| `enable` | Boolean | `true` | Enable or disable the Traceroute query type. |
|
||||
| `display_name` | String | `'Traceroute'` | Text displayed for the Traceroute query type in the UI. |
|
||||
|
||||
## Example
|
||||
|
||||
```yaml
|
||||
queries:
|
||||
bgp_aspath:
|
||||
display_name: BGP AS Path
|
||||
enable: true
|
||||
pattern:
|
||||
asdot: '^(\^|^\_)((\d+\.\d+)\_|(\d+\.\d+)\$|(\d+\.\d+)\(\_\.\+\_\))+$'
|
||||
asplain: '^(\^|^\_)(\d+\_|\d+\$|\d+\(\_\.\+\_\))+$'
|
||||
mode: asplain
|
||||
bgp_community:
|
||||
display_name: BGP Community
|
||||
enable: true
|
||||
pattern:
|
||||
decimal: "^[0-9]{1,10}$"
|
||||
extended_as: '^([0-9]{0,5})\:([0-9]{1,5})$'
|
||||
large: '^([0-9]{1,10})\:([0-9]{1,10})\:[0-9]{1,10}$'
|
||||
bgp_route:
|
||||
display_name: BGP Route
|
||||
enable: true
|
||||
ping:
|
||||
display_name: Ping
|
||||
enable: true
|
||||
traceroute:
|
||||
display_name: Traceroute
|
||||
enable: true
|
||||
```
|
||||
|
|
|
|||
3
docs/docs/styles.module.css
Normal file
3
docs/docs/styles.module.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.getStarted[class][class]:not(.button--active):not(:hover) {
|
||||
color: var(--ifm-color-secondary);
|
||||
}
|
||||
|
|
@ -22,11 +22,6 @@ module.exports = {
|
|||
href: "https://demo.hyperglass.io",
|
||||
label: "Demo",
|
||||
position: "left"
|
||||
},
|
||||
{
|
||||
href: githubURL,
|
||||
label: "GitHub",
|
||||
position: "right"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
52
docs/src/components/Logo.js
Normal file
52
docs/src/components/Logo.js
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import React from "react";
|
||||
|
||||
export default ({ color = "inherit", size = 32, className }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
width={size}
|
||||
viewBox="0 0 1014 1014"
|
||||
xmlSpace="preserve"
|
||||
fill={color}
|
||||
className={className}
|
||||
>
|
||||
<g transform="translate(0.000000,1014.000000) scale(0.100000,-0.100000)">
|
||||
<path
|
||||
d="M4809,10126c-2-2-51-7-109-10c-92-6-211-18-305-30c-16-3-52-8-80-11c-27-4-138-24-245-46
|
||||
c-516-102-1052-302-1491-556c-48-27-93-53-100-56c-30-14-217-138-333-220c-432-307-811-676-1130-1102c-213-283-391-582-540-905
|
||||
c-145-311-255-631-331-956c-19-82-37-167-41-189c-3-22-7-42-9-45s-6-24-9-46c-4-22-8-51-11-64c-3-14-14-92-24-175
|
||||
c-18-134-24-193-37-380c-5-75-5-429,1-520c11-199,29-383,45-470c5-27,11-69,14-92c16-128,97-477,156-668c133-435,341-881,591-1267
|
||||
c40-62,76-115,79-118s20-27,39-55c44-64,226-300,267-345c17-19,67-75,111-125c143-160,349-359,508-490c33-28,62-53,65-56
|
||||
s59-46,125-96c552-416,1168-712,1831-877c99-25,193-47,209-50c17-3,68-12,115-21c47-8,99-17,115-20c17-2,62-8,100-14
|
||||
c39-5,102-13,140-16c39-4,81-8,95-10c152-23,651-23,890-1c83,8,186,19,201,21c9,2,40,6,69,10s60,8,69,10c9,1,36,6,61,9
|
||||
c25,4,99,18,165,32c66,13,129,26,140,28c211,43,664,194,900,301c125,57,372,182,458,233c49,28,91,52,93,52c10,0,306,199,410,275
|
||||
c457,338,859,756,1177,1221c178,262,372,614,472,859c20,50,43,104,50,120c76,172,208,608,251,830c2,11,6,31,9,45
|
||||
c16,76,42,229,50,299c4,30,8,61,10,70c1,9,6,50,9,91c4,41,9,91,11,110c21,173,21,731,1,860c-3,14-7,59-11,100s-8,86-10,100
|
||||
s-6,41-9,60c-2,19-8,58-11,85c-6,41-66,351-80,405c-39,163-145,506-188,610c-6,14-11,27-12,30c-26,78-121,289-205,455
|
||||
c-197,391-422,723-735,1085c-78,91-413,416-522,507c-272,227-507,389-805,556c-126,70-359,186-436,216c-27,11-69,29-93,39
|
||||
c-255,114-781,267-1059,307c-24,4-47,8-50,10c-4,2-35,6-71,10c-35,3-72,8-81,11c-18,5-50,9-168,19c-41,4-91,9-110,12
|
||||
C5419,10122,4814,10131,4809,10126z M5336,9116c67-4,133-9,145-11c13-2,45-6,72-9c26-3,68-9,95-12c187-23,542-109,759-185
|
||||
c215-76,581-243,675-310c14-11,28-19,31-19c21,0,304-191,441-298c108-83,126-99,236-196c185-166,420-427,563-626c9-14,37-53,62-87
|
||||
c180-251,389-667,504-1008c72-215,146-522,165-690c2-16,7-50,10-75c22-146,31-304,30-540c-1-214-7-354-19-420c-2-14-7-52-11-85
|
||||
c-3-33-8-69-10-80c-2-10-6-37-9-60c-35-241-152-645-260-900c-59-138-178-378-233-469c-23-37-42-70-42-71c0-14-267-396-290-415
|
||||
c-3-3-15-17-26-32c-72-93-203-236-334-364c-508-494-1148-850-1839-1023c-168-42-380-81-521-95c-25-3-76-8-115-13
|
||||
c-142-15-691-8-792,11c-10,2-43,7-74,10c-31,4-65,8-75,10c-11,2-41,7-68,10c-27,4-52,9-55,10c-3,2-27,7-52,10
|
||||
c-81,11-389,93-529,141c-413,142-798,346-1145,609c-327,248-663,597-888,926c-376,548-621,1187-692,1805c-3,28-8,64-10,80
|
||||
c-25,188-25,664,0,840c3,17,7,53,10,80c29,264,110,602,211,880c292,808,844,1513,1560,1993c194,130,481,286,654,356
|
||||
c36,15,74,31,85,36c110,52,496,172,662,205c133,27,269,49,374,61c30,3,65,8,79,10s86,7,160,10c74,4,136,8,138,9
|
||||
C4972,9128,5212,9122,5336,9116z"
|
||||
/>
|
||||
<path
|
||||
d="M3445,8398c-84-32-397-246-566-388c-223-187-442-415-652-680c-123-155-312-465-420-690
|
||||
c-74-154-190-440-202-500c-1-3-15-50-32-105c-30-96-77-280-87-337c-3-15-11-63-20-105c-15-79-20-108-31-198c-4-27-8-60-10-73
|
||||
c-13-79-20-239-20-457c0-280,5-309,70-377c55-60,102-79,191-79c88-1,173,52,217,135c20,38,22,56,23,261c2,262,11,413,34,555
|
||||
c5,30,12,73,15,94s7,48,10,60s7,33,10,49c12,64,17,88,46,197c124,482,347,931,658,1325c151,191,360,403,534,543c40,31,74,59,77,63
|
||||
c12,13,222,159,300,208c103,65,136,94,162,145c60,117,16,265-97,332C3602,8407,3497,8418,3445,8398z"
|
||||
/>
|
||||
<path
|
||||
d="M1691,4003c-91-33-161-138-161-241c0-74,135-389,275-641c107-195,164-243,285-244c138-1,246,98,254,232
|
||||
c4,63-12,111-73,216c-68,117-166,320-226,467c-50,124-86,172-153,204C1842,4020,1745,4023,1691,4003z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
15
docs/src/components/RegexPattern.js
Normal file
15
docs/src/components/RegexPattern.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import React from "react";
|
||||
import Code from "./JSXCode";
|
||||
|
||||
const patternMap = {
|
||||
aspath_asdot: String.raw`^(\^|^\_)((\d+\.\d+)\_|(\d+\.\d+)\$|(\d+\.\d+)\(\_\.\+\_\))+$`,
|
||||
aspath_asplain: String.raw`^(\^|^\_)(\d+\_|\d+\$|\d+\(\_\.\+\_\))+$`,
|
||||
community_decimal: String.raw`^[0-9]{1,10}$`,
|
||||
community_extended: String.raw`^([0-9]{0,5})\:([0-9]{1,5})$`,
|
||||
community_large: String.raw`^([0-9]{1,10})\:([0-9]{1,10})\:[0-9]{1,10}$`
|
||||
};
|
||||
|
||||
export default ({ pattern }) => {
|
||||
const thisPattern = patternMap[pattern];
|
||||
return <Code>'{thisPattern}'</Code>;
|
||||
};
|
||||
|
|
@ -7,13 +7,20 @@
|
|||
/* You can override the default Infima variables here. */
|
||||
:root {
|
||||
--ifm-font-size-sm: 12px;
|
||||
--ifm-color-secondary: #314cb6;
|
||||
/* --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-lightest: #5a72d3; */
|
||||
--ifm-color-secondary: #69a2b0;
|
||||
--ifm-color-secondary-dark: #5796a6;
|
||||
--ifm-color-secondary-darker: #528e9c;
|
||||
--ifm-color-secondary-darkest: #447581;
|
||||
--ifm-color-secondary-light: #7badba;
|
||||
--ifm-color-secondary-lighter: #85b3bf;
|
||||
--ifm-color-secondary-lightest: #a0c4cd;
|
||||
--ifm-color-primary: #ff5e5b;
|
||||
--ifm-color-primary-dark: #ff3c38;
|
||||
--ifm-color-primary-darker: #ff2b27;
|
||||
|
|
@ -24,6 +31,39 @@
|
|||
--ifm-code-font-size: 95%;
|
||||
}
|
||||
|
||||
:root {
|
||||
--ifm-code-background: rgba(0, 0, 0, 0.04);
|
||||
--ifm-code-color: var(--ifm-color-secondary-darker);
|
||||
--ifm-footer-color: var(--ifm-secondary-lightest);
|
||||
--ifm-footer-link-color: var(--ifm-secondary-lightest);
|
||||
--ifm-footer-title-color: var(--ifm-color-emphasis-800);
|
||||
--ifm-footer-background-color: var(--ifm-color-emphasis-100);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .footer.footer--dark {
|
||||
--ifm-footer-color: var(--ifm-color-emphasis-300);
|
||||
}
|
||||
|
||||
.footer.footer--dark {
|
||||
--ifm-footer-color: var(--ifm-color-emphasis-600);
|
||||
--ifm-footer-link-color: var(--ifm-footer-color);
|
||||
--ifm-footer-title-color: var(--ifm-color-emphasis-800);
|
||||
--ifm-footer-background-color: var(--ifm-color-emphasis-100);
|
||||
}
|
||||
|
||||
.footer.footer--dark .footer__items {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--ifm-code-background: rgba(255, 255, 255, 0.08);
|
||||
--ifm-code-color: var(--ifm-color-secondary-lightest);
|
||||
/* #ace8cd
|
||||
#b6a7e2
|
||||
#dc7381
|
||||
*/
|
||||
}
|
||||
|
||||
.docusaurus-highlight-code-line {
|
||||
background-color: rgb(72, 77, 91);
|
||||
display: block;
|
||||
|
|
@ -31,6 +71,19 @@
|
|||
padding: 0 var(--ifm-pre-padding);
|
||||
}
|
||||
|
||||
table {
|
||||
margin-top: var(--ifm-spacing-vertical);
|
||||
}
|
||||
|
||||
table td:nth-child(1) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
h1 code,
|
||||
h2 code,
|
||||
h3 code,
|
||||
h4 code,
|
||||
h5 code,
|
||||
h6 code {
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,8 +66,8 @@ function Home() {
|
|||
<div className={styles.buttons}>
|
||||
<Link
|
||||
className={classnames(
|
||||
"button button--outline button--secondary button--lg",
|
||||
styles.getStarted
|
||||
styles.getStarted,
|
||||
"button button--outline button--secondary button--lg"
|
||||
)}
|
||||
to={useBaseUrl("docs/introduction")}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
217
docs/src/theme/Navbar/index.js
Normal file
217
docs/src/theme/Navbar/index.js
Normal file
|
|
@ -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 (
|
||||
<Link
|
||||
className={classnames(styles.navLink, "navbar__item navbar__link")}
|
||||
{...(href
|
||||
? {
|
||||
target: "_blank",
|
||||
rel: "noopener noreferrer",
|
||||
href
|
||||
}
|
||||
: {
|
||||
activeClassName: "navbar__link--active",
|
||||
to: toUrl
|
||||
})}
|
||||
{...props}
|
||||
>
|
||||
{label}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
<nav
|
||||
ref={navbarRef}
|
||||
className={classnames("navbar", "navbar--light", "navbar--fixed-top", {
|
||||
[styles.navbarMain]: pathname === "/",
|
||||
[styles.navbarOther]: pathname !== "/",
|
||||
"navbar-sidebar--show": sidebarShown,
|
||||
[styles.navbarHideable]: hideOnScroll,
|
||||
[styles.navbarHidden]: !isNavbarVisible
|
||||
})}
|
||||
>
|
||||
<div className="navbar__inner">
|
||||
<div className={classnames("navbar__items", styles.navbarItems)}>
|
||||
<Link className="navbar__brand" to={baseUrl}>
|
||||
<Logo color="#fff" size={32} className={styles.logo} />
|
||||
{title != null && (
|
||||
<strong className={isSearchBarExpanded ? styles.hideLogoText : ""}>
|
||||
{title}
|
||||
</strong>
|
||||
)}
|
||||
</Link>
|
||||
<div
|
||||
aria-label="Navigation bar toggle"
|
||||
className="navbar__toggle"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={showSidebar}
|
||||
onKeyDown={showSidebar}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="30"
|
||||
height="30"
|
||||
viewBox="0 0 30 30"
|
||||
role="img"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Menu</title>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeMiterlimit="10"
|
||||
strokeWidth="2"
|
||||
d="M4 7h22M4 15h22M4 23h22"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{links
|
||||
.filter(linkItem => linkItem.position !== "right")
|
||||
.map((linkItem, i) => (
|
||||
<NavLink {...linkItem} key={i} />
|
||||
))}
|
||||
</div>
|
||||
<div className="navbar__items navbar__items--right">
|
||||
{!disableDarkMode && (
|
||||
<Toggle
|
||||
className={classnames(styles.displayOnlyInLargeViewport, styles.toggle)}
|
||||
aria-label="Dark mode toggle"
|
||||
checked={theme === "dark"}
|
||||
onChange={onToggleChange}
|
||||
/>
|
||||
)}
|
||||
{links
|
||||
.filter(linkItem => linkItem.position === "right")
|
||||
.map((linkItem, i) => (
|
||||
<NavLink {...linkItem} key={i} />
|
||||
))}
|
||||
|
||||
<a
|
||||
className={classnames(
|
||||
styles.displayOnlyInLargeViewport,
|
||||
"button button--primary",
|
||||
styles.button
|
||||
)}
|
||||
href={`https://github.com/${siteConfig.organizationName}/${siteConfig.projectName}`}
|
||||
style={{ margin: 0, marginLeft: 15 }}
|
||||
>
|
||||
GITHUB →
|
||||
</a>
|
||||
<SearchBar
|
||||
handleSearchBarToggle={setIsSearchBarExpanded}
|
||||
isSearchBarExpanded={isSearchBarExpanded}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div role="presentation" className="navbar-sidebar__backdrop" onClick={hideSidebar} />
|
||||
<div className="navbar-sidebar">
|
||||
<div className="navbar-sidebar__brand">
|
||||
<Link className="navbar__brand" onClick={hideSidebar} to={baseUrl}>
|
||||
{logo != null && (
|
||||
<img
|
||||
className="navbar__logo logo--light"
|
||||
src={logoUrl}
|
||||
alt={logo.alt}
|
||||
/>
|
||||
)}
|
||||
{logoDark != null && (
|
||||
<img
|
||||
className="navbar__logo logo--dark"
|
||||
src={logoDark}
|
||||
alt={logo.alt}
|
||||
/>
|
||||
)}
|
||||
{title != null && <strong>{title}</strong>}
|
||||
</Link>
|
||||
{!disableDarkMode && sidebarShown && (
|
||||
<Toggle
|
||||
aria-label="Dark mode toggle in sidebar"
|
||||
checked={theme === "dark"}
|
||||
onChange={onToggleChange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="navbar-sidebar__items">
|
||||
<div className="menu">
|
||||
<ul className="menu__list">
|
||||
{links.map((linkItem, i) => (
|
||||
<li className="menu__list-item" key={i}>
|
||||
<NavLink
|
||||
className="menu__link"
|
||||
{...linkItem}
|
||||
onClick={hideSidebar}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
|
||||
<div style={{ margin: 5, marginTop: 15 }}></div>
|
||||
<a
|
||||
className={classnames(
|
||||
"button button--block button--primary",
|
||||
styles.button
|
||||
)}
|
||||
href={siteConfig.url}
|
||||
>
|
||||
GITHUB →
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navbar;
|
||||
71
docs/src/theme/Navbar/styles.module.css
Normal file
71
docs/src/theme/Navbar/styles.module.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue