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,33 +4,40 @@ 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
-    <div className={navStyles.header}>
+  const isSSR = typeof window === "undefined"
-      <div className={navStyles.headerContent}>
+  const activeClasses = link =>
-        <span className={navStyles.chaos}>Chaostreff</span> Dortmund
+    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.nav}>
+        <div className={navStyles.navContent}>
-      <div className={navStyles.navContent}>
+          {pages.map(([title, link]) => (
-        {pages.map(([title, link]) => (
+            <Link
-          <Link
+              key={title}
-            key={title}
+              className={navStyles.navItem + activeClasses(link)}
-            className={navStyles.navItem}
+              activeClassName={navStyles.navItemActive}
-            activeClassName={navStyles.navItemActive}
+              activeStyle={{ textDecoration: `solid underline white 0.2em` }}
-            activeStyle={{ textDecoration: `solid underline white 0.2em` }}
+              to={`/${link}`}
-            to={`/${link}`}
+            >
-          >
+              {title}
-            {title}
+            </Link>
-          </Link>
+          ))}
-        ))}
+        </div>
       </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
       }
     }
   }