Set active nav link correctly

eddiesigner · Jan 14, 2021 · 3188042 · 3188042
1 parent faa90ae
commit 3188042
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/src/components/common/Header.js b/src/components/common/Header.js
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { Wrapper } from '.'
 import { mediaQueries } from '../../utils/mediaQueries'
 
-const Header = ({ location, navigation, logo, title }) => (
+const Header = ({ canonicalLocation, location, navigation, logo, title }) => (
   <Container>
     <Wrapper>
       <Content>
@@ -17,8 +17,12 @@ const Header = ({ location, navigation, logo, title }) => (
             <MainNavigation aria-label="Main navigation">
               <NavigationList>
                 {navigation.map((navItem, i) => {
-                  const isCurrent =
-                    location.pathname === new URL(navItem.url).pathname
+                  const canonicalPathname = new URL(
+                    `${canonicalLocation}${location.pathname}`
+                  ).pathname.slice(0, -1)
+                  const navItemPathname = new URL(navItem.url).pathname
+                  console.log(canonicalPathname, navItemPathname)
+                  const isCurrent = canonicalPathname === navItemPathname
 
                   return (
                     <NavItem key={i} current={isCurrent}>
@@ -204,6 +208,7 @@ const NavLink = styled.a`
 `
 
 Header.propTypes = {
+  canonicalLocation: PropTypes.string.isRequired,
   location: PropTypes.shape({
     pathname: PropTypes.string.isRequired,
   }).isRequired,

diff --git a/src/components/common/Layout.js b/src/components/common/Layout.js
@@ -60,6 +60,7 @@ const GlobalStyle = createGlobalStyle`
  */
 const DefaultLayout = ({ data, children, location, isHome }) => {
   const site = data.allGhostSettings.edges[0].node
+  const canonicalLocation = data.site.siteMetadata.siteUrl
 
   return (
     <>
@@ -74,6 +75,7 @@ const DefaultLayout = ({ data, children, location, isHome }) => {
       <MainContainer>
         <Header
           location={location}
+          canonicalLocation={canonicalLocation}
           navigation={site.navigation}
           logo={site.logo}
           title={site.title}
@@ -114,6 +116,11 @@ DefaultLayout.propTypes = {
   }).isRequired,
   isHome: PropTypes.bool,
   data: PropTypes.shape({
+    site: PropTypes.shape({
+      siteMetadata: PropTypes.shape({
+        siteUrl: PropTypes.string.isRequired,
+      }).isRequired,
+    }).isRequired,
     allGhostSettings: PropTypes.object.isRequired,
   }).isRequired,
 }
@@ -122,6 +129,11 @@ const DefaultLayoutSettingsQuery = props => (
   <StaticQuery
     query={graphql`
       query GhostSettings {
+        site {
+          siteMetadata {
+            siteUrl
+          }
+        }
         allGhostSettings {
           edges {
             node {