dan
3 years ago
committed by
GitHub
GitHub
11 changed files with 294 additions and 418 deletions
@ -1,79 +0,0 @@ |
|||||
/* |
|
||||
* Copyright (c) Facebook, Inc. and its affiliates. |
|
||||
*/ |
|
||||
|
|
||||
import * as React from 'react'; |
|
||||
import cn from 'classnames'; |
|
||||
import {RouteItem} from 'components/Layout/useRouteMeta'; |
|
||||
import {useRouter} from 'next/router'; |
|
||||
import {useActiveSection} from 'hooks/useActiveSection'; |
|
||||
import {SidebarRouteTree} from '../Sidebar'; |
|
||||
import sidebarHome from '../../../sidebarHome.json'; |
|
||||
import sidebarLearn from '../../../sidebarLearn.json'; |
|
||||
import sidebarReference from '../../../sidebarReference.json'; |
|
||||
|
|
||||
export function MobileNav() { |
|
||||
// This is where we actually are according to the router.
|
|
||||
const section = useActiveSection(); |
|
||||
|
|
||||
// Let the user switch tabs there and back without navigating.
|
|
||||
// Seed the tab state from the router, but keep it independent.
|
|
||||
const [tab, setTab] = React.useState(section); |
|
||||
|
|
||||
let tree = null; |
|
||||
switch (tab) { |
|
||||
case 'home': |
|
||||
tree = sidebarHome.routes[0]; |
|
||||
break; |
|
||||
case 'learn': |
|
||||
tree = sidebarLearn.routes[0]; |
|
||||
break; |
|
||||
case 'apis': |
|
||||
tree = sidebarReference.routes[0]; |
|
||||
break; |
|
||||
} |
|
||||
|
|
||||
return ( |
|
||||
<> |
|
||||
<div className="sticky top-0 px-5 mb-2 bg-wash dark:bg-wash-dark flex justify-end border-b border-border dark:border-border-dark items-center self-center w-full z-10"> |
|
||||
<TabButton isActive={tab === 'home'} onClick={() => setTab('home')}> |
|
||||
Home |
|
||||
</TabButton> |
|
||||
<TabButton isActive={tab === 'learn'} onClick={() => setTab('learn')}> |
|
||||
Learn |
|
||||
</TabButton> |
|
||||
<TabButton isActive={tab === 'apis'} onClick={() => setTab('apis')}> |
|
||||
API |
|
||||
</TabButton> |
|
||||
</div> |
|
||||
{/* No fallback UI so need to be careful not to suspend directly inside. */} |
|
||||
<React.Suspense fallback={null}> |
|
||||
<SidebarRouteTree routeTree={tree as RouteItem} isMobile={true} /> |
|
||||
</React.Suspense> |
|
||||
</> |
|
||||
); |
|
||||
} |
|
||||
|
|
||||
function TabButton({ |
|
||||
children, |
|
||||
onClick, |
|
||||
isActive, |
|
||||
}: { |
|
||||
children: any; |
|
||||
onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void; |
|
||||
isActive: boolean; |
|
||||
}) { |
|
||||
const classes = cn( |
|
||||
'inline-flex items-center w-full border-b-2 justify-center text-base leading-9 px-3 py-0.5 hover:text-link hover:gray-5', |
|
||||
{ |
|
||||
'text-link dark:text-link-dark dark:border-link-dark border-link font-bold': |
|
||||
isActive, |
|
||||
'border-transparent': !isActive, |
|
||||
} |
|
||||
); |
|
||||
return ( |
|
||||
<button className={classes} onClick={onClick}> |
|
||||
{children} |
|
||||
</button> |
|
||||
); |
|
||||
} |
|
||||
@ -1,56 +0,0 @@ |
|||||
/* |
|
||||
* Copyright (c) Facebook, Inc. and its affiliates. |
|
||||
*/ |
|
||||
|
|
||||
import * as React from 'react'; |
|
||||
import cn from 'classnames'; |
|
||||
import {SidebarContext} from 'components/Layout/useRouteMeta'; |
|
||||
import {MenuContext} from 'components/useMenu'; |
|
||||
import {useMediaQuery} from '../useMediaQuery'; |
|
||||
import {SidebarRouteTree} from './SidebarRouteTree'; |
|
||||
import {Search} from 'components/Search'; |
|
||||
import {MobileNav} from '../Nav/MobileNav'; |
|
||||
import {Feedback} from '../Feedback'; |
|
||||
|
|
||||
const SIDEBAR_BREAKPOINT = 1023; |
|
||||
|
|
||||
export function Sidebar() { |
|
||||
const {menuRef, isOpen} = React.useContext(MenuContext); |
|
||||
const isMobileSidebar = useMediaQuery(SIDEBAR_BREAKPOINT); |
|
||||
let routeTree = React.useContext(SidebarContext); |
|
||||
const isHidden = isMobileSidebar ? !isOpen : false; |
|
||||
|
|
||||
// HACK. Fix up the data structures instead.
|
|
||||
if ((routeTree as any).routes.length === 1) { |
|
||||
routeTree = (routeTree as any).routes[0]; |
|
||||
} |
|
||||
return ( |
|
||||
<aside |
|
||||
className={cn( |
|
||||
`lg:grow lg:flex flex-col w-full pt-4 pb-8 lg:pb-0 lg:max-w-xs fixed lg:sticky bg-wash dark:bg-wash-dark z-10 top-0`, |
|
||||
isOpen ? 'block z-40' : 'hidden lg:block' |
|
||||
)} |
|
||||
aria-hidden={isHidden}> |
|
||||
<div className="px-5 pt-16 sm:pt-10 lg:pt-0"> |
|
||||
<Search /> |
|
||||
</div> |
|
||||
<nav |
|
||||
role="navigation" |
|
||||
ref={menuRef} |
|
||||
style={{'--bg-opacity': '.2'} as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything)
|
|
||||
className="w-full h-screen lg:h-auto grow pr-0 lg:pr-5 pt-6 pb-44 lg:pb-0 lg:py-6 md:pt-4 lg:pt-4 overflow-y-scroll lg:overflow-y-auto scrolling-touch scrolling-gpu"> |
|
||||
{isMobileSidebar ? ( |
|
||||
<MobileNav /> |
|
||||
) : ( |
|
||||
/* No fallback UI so need to be careful not to suspend directly inside. */ |
|
||||
<React.Suspense fallback={null}> |
|
||||
<SidebarRouteTree routeTree={routeTree} /> |
|
||||
</React.Suspense> |
|
||||
)} |
|
||||
</nav> |
|
||||
<div className="sticky bottom-0 hidden lg:block"> |
|
||||
<Feedback /> |
|
||||
</div> |
|
||||
</aside> |
|
||||
); |
|
||||
} |
|
||||
@ -1,52 +0,0 @@ |
|||||
/* |
|
||||
* Copyright (c) Facebook, Inc. and its affiliates. |
|
||||
*/ |
|
||||
|
|
||||
import {useState, useCallback, useEffect} from 'react'; |
|
||||
|
|
||||
const useMediaQuery = (width: number) => { |
|
||||
const [targetReached, setTargetReached] = useState(false); |
|
||||
|
|
||||
const updateTarget = useCallback((e: MediaQueryListEvent) => { |
|
||||
if (e.matches) { |
|
||||
setTargetReached(true); |
|
||||
} else { |
|
||||
setTargetReached(false); |
|
||||
} |
|
||||
}, []); |
|
||||
|
|
||||
useEffect(() => { |
|
||||
const media = window.matchMedia(`(max-width: ${width}px)`); |
|
||||
|
|
||||
try { |
|
||||
// Chrome & Firefox
|
|
||||
media.addEventListener('change', updateTarget); |
|
||||
} catch { |
|
||||
// @deprecated method - Safari <= iOS12
|
|
||||
media.addListener(updateTarget); |
|
||||
} |
|
||||
|
|
||||
// Check on mount (callback is not called until a change occurs)
|
|
||||
if (media.matches) { |
|
||||
setTargetReached(true); |
|
||||
} |
|
||||
|
|
||||
return () => { |
|
||||
try { |
|
||||
// Chrome & Firefox
|
|
||||
media.removeEventListener('change', updateTarget); |
|
||||
} catch { |
|
||||
// @deprecated method - Safari <= iOS12
|
|
||||
media.removeListener(updateTarget); |
|
||||
} |
|
||||
}; |
|
||||
}, [updateTarget, width]); |
|
||||
|
|
||||
return targetReached; |
|
||||
}; |
|
||||
|
|
||||
const useIsMobile = () => { |
|
||||
return useMediaQuery(640); |
|
||||
}; |
|
||||
|
|
||||
export {useMediaQuery, useIsMobile}; |
|
||||
@ -1,72 +0,0 @@ |
|||||
/* |
|
||||
* Copyright (c) Facebook, Inc. and its affiliates. |
|
||||
*/ |
|
||||
|
|
||||
import * as React from 'react'; |
|
||||
import { |
|
||||
clearAllBodyScrollLocks, |
|
||||
disableBodyScroll, |
|
||||
enableBodyScroll, |
|
||||
} from 'body-scroll-lock'; |
|
||||
import {useRouter} from 'next/router'; |
|
||||
|
|
||||
/** |
|
||||
* Menu toggle that enables body scroll locking (for |
|
||||
* iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) |
|
||||
* without breaking scrolling of a target |
|
||||
* element. |
|
||||
*/ |
|
||||
export const useMenu = () => { |
|
||||
const [isOpen, setIsOpen] = React.useState(false); |
|
||||
const menuRef = React.useRef<HTMLDivElement>(null); |
|
||||
const router = useRouter(); |
|
||||
|
|
||||
const showSidebar = React.useCallback(() => { |
|
||||
setIsOpen(true); |
|
||||
if (menuRef.current != null) { |
|
||||
disableBodyScroll(menuRef.current); |
|
||||
} |
|
||||
}, []); |
|
||||
|
|
||||
const hideSidebar = React.useCallback(() => { |
|
||||
setIsOpen(false); |
|
||||
if (menuRef.current != null) { |
|
||||
enableBodyScroll(menuRef.current); |
|
||||
} |
|
||||
}, []); |
|
||||
|
|
||||
const toggleOpen = React.useCallback(() => { |
|
||||
if (isOpen) { |
|
||||
hideSidebar(); |
|
||||
} else { |
|
||||
showSidebar(); |
|
||||
} |
|
||||
}, [showSidebar, hideSidebar, isOpen]); |
|
||||
|
|
||||
React.useEffect(() => { |
|
||||
hideSidebar(); |
|
||||
return () => { |
|
||||
clearAllBodyScrollLocks(); |
|
||||
}; |
|
||||
}, [router.asPath, hideSidebar]); |
|
||||
|
|
||||
// Avoid top-level context re-renders
|
|
||||
return React.useMemo( |
|
||||
() => ({ |
|
||||
hideSidebar, |
|
||||
showSidebar, |
|
||||
toggleOpen, |
|
||||
menuRef, |
|
||||
isOpen, |
|
||||
}), |
|
||||
[hideSidebar, showSidebar, toggleOpen, menuRef, isOpen] |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
export const MenuContext = React.createContext<ReturnType<typeof useMenu>>( |
|
||||
{} as ReturnType<typeof useMenu> |
|
||||
); |
|
||||
|
|
||||
export function MenuProvider(props: {children: React.ReactNode}) { |
|
||||
return <MenuContext.Provider value={useMenu()} {...props} />; |
|
||||
} |
|
||||
Loading…
Reference in new issue