mirror of https://github.com/sunface/rust-course
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.8 KiB
68 lines
1.8 KiB
import { Badge, Box, chakra } from "@chakra-ui/react"
|
|
import { SkipNavContent, SkipNavLink } from "@chakra-ui/skip-nav"
|
|
import Container from "components/container"
|
|
import Footer from "./footer"
|
|
import Nav from "./nav/nav"
|
|
import SEO from "components/seo"
|
|
import { useRouter } from "next/router"
|
|
import * as React from "react"
|
|
import PageTransition from "src/components/page-transition"
|
|
import siteConfig from "configs/site-config"
|
|
|
|
function useHeadingFocusOnRouteChange() {
|
|
const router = useRouter()
|
|
|
|
React.useEffect(() => {
|
|
const onRouteChange = () => {
|
|
const [heading] = Array.from(document.getElementsByTagName("h1"))
|
|
heading?.focus()
|
|
}
|
|
router.events.on("routeChangeComplete", onRouteChange)
|
|
return () => {
|
|
router.events.off("routeChangeComplete", onRouteChange)
|
|
}
|
|
}, [])
|
|
}
|
|
|
|
interface PageContainerProps {
|
|
children: React.ReactNode
|
|
nav?: any
|
|
}
|
|
|
|
function PageContainer(props: PageContainerProps) {
|
|
const { children ,nav} = props
|
|
useHeadingFocusOnRouteChange()
|
|
|
|
return (
|
|
<>
|
|
<SEO
|
|
title={siteConfig.seo.title}
|
|
description={siteConfig.seo.description}
|
|
/>
|
|
<SkipNavLink zIndex={20}>Skip to Content</SkipNavLink>
|
|
{nav ? nav : <Nav />}
|
|
<Container as="main" className="main-content">
|
|
<Box display={{ base: "block", md: "flex" }}>
|
|
<div style={{ flex: 1 }}>
|
|
<SkipNavContent />
|
|
<Box
|
|
id="content"
|
|
pt={3}
|
|
px={{base:0,md:3}}
|
|
mt="4.5rem"
|
|
mx="auto"
|
|
>
|
|
<PageTransition>
|
|
{children}
|
|
</PageTransition>
|
|
</Box>
|
|
{/* <Footer /> */}
|
|
</div>
|
|
</Box>
|
|
</Container>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default PageContainer
|