fix current site highlighting in nav for rendered html

src/components/layout.js

@@ -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} />
   </>

src/components/nav.js

@@ -4,13 +4,19 @@ import { Link } from "gatsby"
 
 let pages = [
   ["home", ""],
-  ["zeiten & location", "treff/"],
+  ["zeiten & location", "treff"],
-  ["events", "events/"],
+  ["events", "events"],
-  ["kontakt", "kontakt/"],
+  ["kontakt", "kontakt"],
-  ["verein", "verein/"],
+  ["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}`}
@@ -33,4 +39,5 @@ export default () => (
         </div>
       </div>
     </>
-)
+  )
+}

src/templates/siteTemplate.js

@@ -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 {
-  const { frontmatter, body } = mdx
+    frontmatter: { title, edit, path },
+    body,
+  } = data.mdx
 
   useEffect(() => {
-    document.title = `ctdo - ${frontmatter.title.toLowerCase()}`
+    document.title = `ctdo - ${title.toLowerCase()}`
-  }, [frontmatter.title])
+  }, [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
       }
     }
   }