From 92b1e1c822a6f99668f4dee9a451599c1bf2a620 Mon Sep 17 00:00:00 2001
From: neri <neri@ctdo.de>
Date: Thu, 23 Jan 2020 21:28:26 +0100
Subject: [PATCH] fix current site highlighting in nav for rendered html

---
 src/components/layout.js      |  4 +--
 src/components/nav.js         | 59 ++++++++++++++++++++---------------
 src/templates/siteTemplate.js | 15 +++++----
 3 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/src/components/layout.js b/src/components/layout.js
index 75fbd5a..8abcc28 100644
--- a/src/components/layout.js
+++ b/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} />
   </>
diff --git a/src/components/nav.js b/src/components/nav.js
index 8be2441..a0e1e96 100644
--- a/src/components/nav.js
+++ b/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>
-  </>
-)
+    </>
+  )
+}
diff --git a/src/templates/siteTemplate.js b/src/templates/siteTemplate.js
index 83d2e02..ebf440d 100644
--- a/src/templates/siteTemplate.js
+++ b/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
       }
     }
   }