diff --git a/components/Layout.tsx b/components/Layout.tsx index cd0bcea44..ce4be2393 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -1,10 +1,9 @@ -import React, { useContext, useState } from 'react' +import React, { useContext } from 'react' import Head from 'next/head' import Link from 'next/link' import classnames from 'classnames' import { useRouter } from 'next/router' import { DocSearch } from '@docsearch/react' -import { HOST } from '~/lib/config' import useStore from '~/store' import { SectionContext } from '~/context' @@ -17,11 +16,12 @@ type Props = { hideAds?: boolean } -const responsiveClasses = 'w-screen' +// const responsiveClasses = 'w-screen' export default function Layout({ children, mainClassName, metaTitle, whiteBg, hideAds }: Props) { - const showMobileNav = useStore(s => s.overlayNavigation === 'docs') + const showMobileNav = useStore((s: any) => s.overlayNavigation === 'docs') + const router = useRouter() React.useEffect(() => useStore.setState({ overlayNavigation: null }), [router.asPath]) @@ -35,10 +35,10 @@ export default function Layout({ children, mainClassName, metaTitle, whiteBg, hi
-
-
+
+
@@ -83,69 +83,77 @@ export const Search = () => { ) } -const MainNavLink = ({ uri, label, isActive, className }: { uri: string, label: string, isActive: boolean, className?: string }) => { +/* eslint-disable @typescript-eslint/no-unused-vars */ +const MainNavLink = ({ uri, label, className, isActive }: { uri: string, label: string, isActive: boolean, className?: string }) => { + const router = useRouter() return ( - - {label} + + {label} + ) } + const MainNavigation = () => { const section = useContext(SectionContext) - // const docsAreActive = section === 'docs' - const showMobileNav = useStore(s => s.overlayNavigation === 'docs') + const showMobileNav = useStore((s: any) => s.overlayNavigation === 'docs') + return ( -
+
- {showMobileNav === false ? (
useStore.setState({ overlayNavigation: 'docs' })} - > -
-
-
-
-
+ {showMobileNav === false ? ( +
useStore.setState({ overlayNavigation: 'docs' })} + > +
+
+
+
+
-
+
) :
{ uri='/specification' label='Specification' isActive={section === 'specification'} + />
) } -export const DocsNav = () => { - - const [active, setActive] = useState(false) - const handleClick = () => { - setActive(!active) - } - - const [activeGet, setActiveGet] = useState(false) - const handleClickGet = () => { - setActiveGet(!activeGet) - } - const [activeReference, setActiveReference] = useState(false) - const handleClickReference = () => { - setActiveReference(!activeReference) - } - const [activeSpec, setActiveSpec] = useState(false) - const handleClickSpec = () => { - setActiveSpec(!activeSpec) - } - - const rotate = active ? 'rotate(180deg)' : 'rotate(0)' - - const rotateG = activeGet ? 'rotate(180deg)' : 'rotate(0)' - - const rotateR = activeReference ? 'rotate(180deg)' : 'rotate(0)' - - const rotateSpec = activeSpec ? 'rotate(180deg)' : 'rotate(0)' - - return ( - - - ) -} export const SegmentHeadline = ({ label }: { label: string }) => { return ( @@ -352,34 +214,9 @@ export const SegmentHeadline = ({ label }: { label: string }) => {
) } -const SegmentSubtitle = ({ label }: { label: string }) => { - return ( -
- {label} -
- ) -} -const DocLink = ({ uri, label }: { uri: string, label: string | React.ReactNode }) => { - const router = useRouter() - const url = new URL(`${router.asPath}`, HOST) - url.search = '' - url.hash = '' - const stringUrl = url.toString().substr(HOST.length, Infinity) - const isActive = uri === stringUrl - return ( - - {label} - - ) -} const Footer = () => ( -