forked from denoland/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: Replace "Back to main menu" navigation on mobile Navbar to provi…
…de clearer context (denoland#137) Co-authored-by: Kevin Whinnery <[email protected]>
- Loading branch information
Showing
11 changed files
with
325 additions
and
38 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| export const products = [ | ||
| { | ||
| name: "Deno Runtime", | ||
| shortName: "Runtime", | ||
| slug: "runtime", | ||
| }, | ||
| { | ||
| name: "Deno Deploy", | ||
| shortName: "Deploy", | ||
| slug: "deploy", | ||
| }, | ||
| { | ||
| name: "Deno KV", | ||
| shortName: "KV", | ||
| slug: "kv", | ||
| }, | ||
| ]; |
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
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,101 @@ | ||
| import React from 'react'; | ||
| import {useThemeConfig, ErrorCauseBoundary} 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 { useLocation } from "@docusaurus/router"; | ||
| import { products } from "../../../../sidebars/products"; | ||
|
|
||
| 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> | ||
| ); | ||
| } | ||
|
|
||
| function NavbarProduct(){ | ||
| const location = useLocation(); | ||
| const currentProduct = products.find((product) => | ||
| location.pathname.includes(product.slug) | ||
| ); | ||
| return ( | ||
| <div className="navbar__product"> | ||
| {currentProduct && ( | ||
| <> | ||
| <div className="navbar__product__split">/</div> | ||
| <a className="navbar__product_link" href={`/${currentProduct.slug}/manual`}> | ||
| {currentProduct.shortName} | ||
| </a> | ||
| </> | ||
| )} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default function NavbarContent() { | ||
| const mobileSidebar = useNavbarMobileSidebar(); | ||
| const items = useNavbarItems(); | ||
| const [leftItems, rightItems] = splitNavbarItems(items); | ||
| const searchBarItem = items.find((item) => item.type === 'search'); | ||
|
|
||
| return ( | ||
| <NavbarContentLayout | ||
| left={ | ||
| // TODO stop hardcoding items? | ||
| <> | ||
| {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />} | ||
| <NavbarLogo /> | ||
| <NavbarProduct /> | ||
| <NavbarItems items={leftItems} /> | ||
| </> | ||
| } | ||
| right={ | ||
| // TODO stop hardcoding items? | ||
| // Ask the user to add the respective navbar items => more flexible | ||
| <> | ||
| <NavbarItems items={rightItems} /> | ||
| <NavbarColorModeToggle className={styles.colorModeToggle} /> | ||
| {!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,59 @@ | ||
| import React from 'react'; | ||
| import {useThemeConfig} from '@docusaurus/theme-common'; | ||
| import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal'; | ||
| import { useLocation } from "@docusaurus/router"; | ||
| import { products } from "../../../../../sidebars/products"; | ||
|
|
||
| function SecondaryMenuBackButton(props) { | ||
| return ( | ||
| <button | ||
| type="button" | ||
| {...props} | ||
| className="secondary-menu__product__button" | ||
| > | ||
| All docs | ||
| </button> | ||
| ); | ||
| } | ||
|
|
||
| function ProductNameWithSwitcher() { | ||
| const secondaryMenu = useNavbarSecondaryMenu(); | ||
| const location = useLocation(); | ||
|
|
||
| const currentProduct = products.find((product) => | ||
| location.pathname.includes(product.slug) | ||
| ); | ||
|
|
||
| return ( | ||
| <div> | ||
| {currentProduct && ( | ||
| <div className="secondary-menu__product"> | ||
| <div className="secondary-menu__product__name"> | ||
| {currentProduct.name} | ||
| </div> | ||
| <SecondaryMenuBackButton onClick={() => secondaryMenu.hide()} /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| // The secondary menu slides from the right and shows contextual information | ||
| // such as the docs sidebar | ||
| export default function NavbarMobileSidebarSecondaryMenu() { | ||
| const isPrimaryMenuEmpty = useThemeConfig().navbar.items.length === 0; | ||
| const secondaryMenu = useNavbarSecondaryMenu(); | ||
|
|
||
| return ( | ||
| <> | ||
| <ProductNameWithSwitcher /> | ||
| {/* edge-case: prevent returning to the primaryMenu when it's empty */} | ||
| { | ||
| /* {!isPrimaryMenuEmpty && ( | ||
| <SecondaryMenuBackButton onClick={() => secondaryMenu.hide()} /> | ||
| )} */ | ||
| } | ||
| {secondaryMenu.content} | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.