fix current site highlighting in nav for rendered html

This commit is contained in:
neri 2020-01-23 21:28:26 +01:00
parent 1650f188af
commit 92b1e1c822
3 changed files with 44 additions and 34 deletions

View File

@ -3,9 +3,9 @@ import Nav from "../components/nav"
import Footer from "../components/footer"
import layoutStyles from "./layout.module.css"
export default ({ editLink, children }) => (
export default ({ path, editLink, children }) => (
<>
<Nav />
<Nav path={path} />
<div className={layoutStyles.layout}>{children}</div>
<Footer editLink={editLink} />
</>

View File

@ -4,13 +4,19 @@ import { Link } from "gatsby"
let pages = [
["home", ""],
["zeiten & location", "treff/"],
["events", "events/"],
["kontakt", "kontakt/"],
["verein", "verein/"],
["zeiten & location", "treff"],
["events", "events"],
["kontakt", "kontakt"],
["verein", "verein"],
]
export default () => (
export default ({ path }) => {
// nav items should always be active in the staticly generated html
const isSSR = typeof window === "undefined"
const activeClasses = link =>
isSSR && path === "/" + link ? " " + navStyles.navItemActive : ""
return (
<>
<div className={navStyles.header}>
<div className={navStyles.headerContent}>
@ -22,7 +28,7 @@ export default () => (
{pages.map(([title, link]) => (
<Link
key={title}
className={navStyles.navItem}
className={navStyles.navItem + activeClasses(link)}
activeClassName={navStyles.navItemActive}
activeStyle={{ textDecoration: `solid underline white 0.2em` }}
to={`/${link}`}
@ -34,3 +40,4 @@ export default () => (
</div>
</>
)
}

View File

@ -22,17 +22,19 @@ const components = {
export default function Template({
data, // this prop will be injected by the GraphQL query below.
}) {
const { mdx } = data // data.markdownRemark holds your post data
const { frontmatter, body } = mdx
const {
frontmatter: { title, edit, path },
body,
} = data.mdx
useEffect(() => {
document.title = `ctdo - ${frontmatter.title.toLowerCase()}`
}, [frontmatter.title])
document.title = `ctdo - ${title.toLowerCase()}`
}, [title])
const editLink = frontmatter.edit ? ide + frontmatter.edit.relativePath : null
const editLink = edit ? ide + edit : null
return (
<Layout editLink={editLink}>
<Layout path={path} editLink={editLink}>
<MDXProvider components={components}>
<MDXRenderer>{body}</MDXRenderer>
</MDXProvider>
@ -47,6 +49,7 @@ export const pageQuery = graphql`
frontmatter {
title
edit
path
}
}
}