-
Notifications
You must be signed in to change notification settings - Fork 97
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
27 changed files
with
551 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import React from 'react'; | ||
| import clsx from 'clsx'; | ||
| import useIsBrowser from '@docusaurus/useIsBrowser'; | ||
| import {translate} from '@docusaurus/Translate'; | ||
| import IconLightMode from '@theme/Icon/LightMode'; | ||
| import IconDarkMode from '@theme/Icon/DarkMode'; | ||
| import styles from './styles.module.css'; | ||
| function ColorModeToggle({className, buttonClassName, value, onChange, github}) { | ||
|
|
||
| const isBrowser = useIsBrowser(); | ||
| const title = translate( | ||
| { | ||
| message: 'Switch between dark and light mode (currently {mode})', | ||
| id: 'theme.colorToggle.ariaLabel', | ||
| description: 'The ARIA label for the navbar color mode toggle', | ||
| }, | ||
| { | ||
| mode: | ||
| value === 'dark' | ||
| ? translate({ | ||
| message: 'dark mode', | ||
| id: 'theme.colorToggle.ariaLabel.mode.dark', | ||
| description: 'The name for the dark color mode', | ||
| }) | ||
| : translate({ | ||
| message: 'light mode', | ||
| id: 'theme.colorToggle.ariaLabel.mode.light', | ||
| description: 'The name for the light color mode', | ||
| }), | ||
| }, | ||
| ); | ||
| return ( | ||
| <div className={clsx(styles.toggle, className)}> | ||
| <button | ||
| className={clsx( | ||
| "clean-btn", | ||
| styles.toggleButton, | ||
| !isBrowser && styles.toggleButtonDisabled, | ||
| buttonClassName | ||
| )} | ||
| type="button" | ||
| onClick={() => onChange(value === "dark" ? "light" : "dark")} | ||
| disabled={!isBrowser} | ||
| title={title} | ||
| aria-label={title} | ||
| aria-live="polite" | ||
| > | ||
| <IconLightMode | ||
| className={clsx(styles.toggleIcon, styles.lightToggleIcon)} | ||
| /> | ||
| <IconDarkMode | ||
| className={clsx(styles.toggleIcon, styles.darkToggleIcon)} | ||
| /> | ||
| </button> | ||
| </div> | ||
| ); | ||
| } | ||
| export default React.memo(ColorModeToggle); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| .toggle { | ||
| width: 2rem; | ||
| height: 2rem; | ||
| } | ||
|
|
||
| .toggleButton { | ||
| -webkit-tap-highlight-color: transparent; | ||
| align-items: center; | ||
| display: flex; | ||
| justify-content: center; | ||
| width: 100%; | ||
| height: 100%; | ||
| border-radius: 50%; | ||
| transition: background var(--ifm-transition-fast); | ||
| } | ||
|
|
||
| .toggleButton:hover { | ||
| background: var(--ifm-color-emphasis-200); | ||
| } | ||
|
|
||
| [data-theme='light'] .darkToggleIcon, | ||
| [data-theme='dark'] .lightToggleIcon { | ||
| display: none; | ||
| } | ||
|
|
||
| .toggleButtonDisabled { | ||
| cursor: not-allowed; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import React from 'react'; | ||
| export default function IconDarkMode(props) { | ||
| return ( | ||
| <svg viewBox="0 0 24 24" width={24} height={24} {...props}> | ||
| <path | ||
| d="M20.0258 17.0012C17.2639 21.7848 11.1471 23.4238 6.3634 20.662C5.06068 19.9099 3.964 18.8924 3.12872 17.6794C2.84945 17.2739 3.0301 16.7138 3.49369 16.5479C7.26112 15.1995 9.27892 13.6369 10.4498 11.4018C11.6825 9.04884 12.001 6.47137 11.1387 2.93837C11.0195 2.44984 11.4053 1.98467 11.9075 2.01161C13.4645 2.09515 14.9856 2.54239 16.3649 3.33878C21.1486 6.10064 22.7876 12.2175 20.0258 17.0012ZM11.7785 12.0979C10.5272 14.4865 8.46706 16.1969 4.96104 17.5968C5.56929 18.2926 6.29275 18.8891 7.1134 19.3629C11.1796 21.7106 16.3791 20.3174 18.7267 16.2512C21.0744 12.1849 19.6812 6.98546 15.6149 4.63782C14.7379 4.13146 13.7951 3.79144 12.8228 3.62229C13.4699 7.00628 13.0525 9.66598 11.7785 12.0979Z" | ||
| fill="white" | ||
| /> | ||
| </svg> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import React from 'react'; | ||
| export default function IconLightMode(props) { | ||
| return ( | ||
| <svg viewBox="0 0 24 24" width={24} height={24} {...props}> | ||
| <path | ||
| d="M3.28034 2.21968C2.98745 1.92678 2.51257 1.92677 2.21968 2.21966C1.92678 2.51255 1.92677 2.98743 2.21966 3.28032L10.4125 11.4733C9.23612 13.6704 7.22138 15.214 3.49418 16.5481C3.03059 16.714 2.84994 17.274 3.12921 17.6796C3.96449 18.8925 5.06117 19.91 6.36388 20.6621C10.281 22.9237 15.092 22.2344 18.2229 19.2839L20.7194 21.7805C21.0123 22.0734 21.4872 22.0734 21.7801 21.7805C22.073 21.4876 22.073 21.0127 21.7801 20.7198L3.28034 2.21968ZM17.1614 18.2224C14.4994 20.7043 10.4298 21.2775 7.11388 19.3631C6.29324 18.8893 5.56978 18.2928 4.96153 17.5969C8.23004 16.2919 10.242 14.7169 11.5134 12.5742L17.1614 18.2224ZM15.6154 4.63795C19.5302 6.89814 20.9674 11.8017 18.974 15.7924L20.0831 16.9015C22.7652 12.1329 21.1159 6.0816 16.3654 3.33892C14.986 2.54252 13.465 2.09528 11.908 2.01174C11.4058 1.9848 11.02 2.44997 11.1392 2.9385C11.6444 5.00818 11.7443 6.74993 11.4926 8.31074L12.7585 9.57672C13.2129 7.81611 13.2551 5.88052 12.8232 3.62242C13.7956 3.79157 14.7384 4.13159 15.6154 4.63795Z" | ||
| fill="#242424" | ||
| /> | ||
| </svg> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import React from 'react'; | ||
| import {useColorMode, useThemeConfig} from '@docusaurus/theme-common'; | ||
| import ColorModeToggle from '@theme/ColorModeToggle'; | ||
| import styles from './styles.module.css'; | ||
| export default function NavbarColorModeToggle({className}) { | ||
| const navbarStyle = useThemeConfig().navbar.style; | ||
| const disabled = useThemeConfig().colorMode.disableSwitch; | ||
| const {colorMode, setColorMode} = useColorMode(); | ||
| if (disabled) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <ColorModeToggle | ||
| className={className} | ||
| buttonClassName={ | ||
| navbarStyle === 'dark' ? styles.darkNavbarColorModeToggle : undefined | ||
| } | ||
| value={colorMode} | ||
| onChange={setColorMode} | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .darkNavbarColorModeToggle:hover { | ||
| background: var(--ifm-color-gray-800); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| import React from "react"; | ||
| import { | ||
| useThemeConfig, | ||
| ErrorCauseBoundary, | ||
| useColorMode, | ||
| } from "@docusaurus/theme-common"; | ||
| import { | ||
| splitNavbarItems, | ||
| useNavbarMobileSidebar, | ||
| } from "@docusaurus/theme-common/internal"; | ||
| import NavbarItem from "@theme/NavbarItem"; | ||
| import NavbarColorModeToggle from "@theme/Navbar/ColorModeToggle"; | ||
| import SearchBar from "@theme/SearchBar"; | ||
| import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle"; | ||
| import NavbarLogo from "@theme/Navbar/Logo"; | ||
| import NavbarSearch from "@theme/Navbar/Search"; | ||
| import styles from "./styles.module.css"; | ||
| import clsx from "clsx"; | ||
| import useBaseUrl from "@docusaurus/useBaseUrl"; | ||
| function useNavbarItems() { | ||
| // TODO temporary casting until ThemeConfig type is improved | ||
| return useThemeConfig().navbar.items; | ||
| } | ||
| function NavbarItems({ items }) { | ||
| return ( | ||
| <> | ||
| {items.map((item, i) => ( | ||
| <ErrorCauseBoundary | ||
| key={i} | ||
| onError={(error) => | ||
| new Error( | ||
| `A theme navbar item failed to render. | ||
| Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config: | ||
| ${JSON.stringify(item, null, 2)}`, | ||
| { cause: error } | ||
| ) | ||
| } | ||
| > | ||
| <NavbarItem {...item} /> | ||
| </ErrorCauseBoundary> | ||
| ))} | ||
| </> | ||
| ); | ||
| } | ||
| function NavbarContentLayout({ left, right }) { | ||
| return ( | ||
| <div className="navbar__inner"> | ||
| <div className="navbar__items">{left}</div> | ||
| <div className="navbar__items navbar__items--right">{right}</div> | ||
| </div> | ||
| ); | ||
| } | ||
| export default function NavbarContent() { | ||
| const mobileSidebar = useNavbarMobileSidebar(); | ||
| const items = useNavbarItems(); | ||
| const [leftItems, rightItems] = splitNavbarItems(items); | ||
| const searchBarItem = items.find((item) => item.type === "search"); | ||
| const { colorMode, setColorMode } = useColorMode(); | ||
| return ( | ||
| <NavbarContentLayout | ||
| left={ | ||
| // TODO stop hardcoding items? | ||
| <> | ||
| {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />} | ||
| <NavbarLogo /> | ||
| {colorMode != "dark" ? ( | ||
| <div style={{ borderLeft: "1px solid black", height: "25px" }} /> | ||
| ) : ( | ||
| <div style={{ borderLeft: "1px solid white", height: "25px" }} /> | ||
| )} | ||
| <NavbarItems items={leftItems} /> | ||
| </> | ||
| } | ||
| right={ | ||
| // TODO stop hardcoding items? | ||
| // Ask the user to add the respective navbar items => more flexible | ||
| <> | ||
| <NavbarColorModeToggle className={styles.colorModeToggle} /> | ||
| <div style={{ padding: "0 12px" }}> | ||
| <button | ||
| className={clsx("clean-btn", styles.colorModeToggle)} | ||
| onClick={() => { | ||
| window.open("https://github.com/Azure/awesome-azd", "_blank"); | ||
| }} | ||
| value={colorMode} | ||
| onChange={setColorMode} | ||
| > | ||
| {colorMode != "dark" ? ( | ||
| <img src={useBaseUrl("/img/githubLight.svg")} alt="Github" /> | ||
| ) : ( | ||
| <img src={useBaseUrl("/img/github.svg")} alt="Github" /> | ||
| )} | ||
| </button> | ||
| </div> | ||
| <NavbarItems items={rightItems} /> | ||
| {!searchBarItem && ( | ||
| <NavbarSearch> | ||
| <SearchBar /> | ||
| </NavbarSearch> | ||
| )} | ||
| </> | ||
| } | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| /* | ||
| Hide color mode toggle in small viewports | ||
| */ | ||
| @media (max-width: 996px) { | ||
| .colorModeToggle { | ||
| display: none; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import React from 'react'; | ||
| import clsx from 'clsx'; | ||
| import {useThemeConfig} from '@docusaurus/theme-common'; | ||
| import { | ||
| useHideableNavbar, | ||
| useNavbarMobileSidebar, | ||
| } from '@docusaurus/theme-common/internal'; | ||
| import {translate} from '@docusaurus/Translate'; | ||
| import NavbarMobileSidebar from '@theme/Navbar/MobileSidebar'; | ||
| import styles from './styles.module.css'; | ||
| function NavbarBackdrop(props) { | ||
| return ( | ||
| <div | ||
| role="presentation" | ||
| {...props} | ||
| className={clsx('navbar-sidebar__backdrop', props.className)} | ||
| /> | ||
| ); | ||
| } | ||
| export default function NavbarLayout({children}) { | ||
| const { | ||
| navbar: {hideOnScroll, style}, | ||
| } = useThemeConfig(); | ||
| const mobileSidebar = useNavbarMobileSidebar(); | ||
| const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll); | ||
| return ( | ||
| <nav | ||
| ref={navbarRef} | ||
| aria-label={translate({ | ||
| id: 'theme.NavBar.navAriaLabel', | ||
| message: 'Main', | ||
| description: 'The ARIA label for the main navigation', | ||
| })} | ||
| className={clsx( | ||
| 'navbar', | ||
| 'navbar--fixed-top', | ||
| hideOnScroll && [ | ||
| styles.navbarHideable, | ||
| !isNavbarVisible && styles.navbarHidden, | ||
| ], | ||
| { | ||
| 'navbar--dark': style === 'dark', | ||
| 'navbar--primary': style === 'primary', | ||
| 'navbar-sidebar--show': mobileSidebar.shown, | ||
| }, | ||
| )}> | ||
| {children} | ||
| <NavbarBackdrop onClick={mobileSidebar.toggle} /> | ||
| <NavbarMobileSidebar /> | ||
| </nav> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| .navbarHideable { | ||
| transition: transform var(--ifm-transition-fast) ease; | ||
| } | ||
|
|
||
| .navbarHidden { | ||
| transform: translate3d(0, calc(-100% - 2px), 0); | ||
| } |
Oops, something went wrong.