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/"],
-  ["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>
-  </>
-)
+    </>
+  )
+}

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 { 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
       }
     }
   }