fix current site highlighting in nav for rendered html
This commit is contained in:
parent
1650f188af
commit
92b1e1c822
|
@ -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} />
|
||||
</>
|
||||
|
|
|
@ -4,33 +4,40 @@ 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 () => (
|
||||
<>
|
||||
<div className={navStyles.header}>
|
||||
<div className={navStyles.headerContent}>
|
||||
<span className={navStyles.chaos}>Chaostreff</span> Dortmund
|
||||
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}>
|
||||
<span className={navStyles.chaos}>Chaostreff</span> Dortmund
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={navStyles.nav}>
|
||||
<div className={navStyles.navContent}>
|
||||
{pages.map(([title, link]) => (
|
||||
<Link
|
||||
key={title}
|
||||
className={navStyles.navItem}
|
||||
activeClassName={navStyles.navItemActive}
|
||||
activeStyle={{ textDecoration: `solid underline white 0.2em` }}
|
||||
to={`/${link}`}
|
||||
>
|
||||
{title}
|
||||
</Link>
|
||||
))}
|
||||
<div className={navStyles.nav}>
|
||||
<div className={navStyles.navContent}>
|
||||
{pages.map(([title, link]) => (
|
||||
<Link
|
||||
key={title}
|
||||
className={navStyles.navItem + activeClasses(link)}
|
||||
activeClassName={navStyles.navItemActive}
|
||||
activeStyle={{ textDecoration: `solid underline white 0.2em` }}
|
||||
to={`/${link}`}
|
||||
>
|
||||
{title}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue