feat(nav): active state

src/components/nav-item.js

@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "@emotion/styled";
-import { css } from "@emotion/react";
 import NavLink from "./nav-link";
 
 const SubList = styled.ul`
@@ -36,16 +35,28 @@ const ListItem = styled.li`
   }
 `;
 
-export default function NavItem({ children, subNav, index, open, ...other }) {
+export default function NavItem({
+  children,
+  subNav,
+  index,
+  open,
+  location,
+  to,
+  ...other
+}) {
   const hasChildren = subNav && subNav.length > 0;
   return (
     <ListItem open={open} index={index}>
-      <NavLink {...other}>{children}</NavLink>
+      <NavLink to={to} {...other}>
+        {children}
+      </NavLink>
       {hasChildren && (
         <SubList>
           {subNav.map((link, i) => (
             <ListItem key={i} index={i} open={open}>
-              <NavLink to={link.to}>{link.title}</NavLink>
+              <NavLink location={location} to={link.to}>
+                {link.title}
+              </NavLink>
             </ListItem>
           ))}
         </SubList>

src/components/nav-link.js

@@ -20,10 +20,13 @@ const Link = styled(GatsbyLink)`
     margin: 0 var(--spacing-x-xs);
     padding: 9px 0;
     border-bottom: 2px solid
-      ${props => (props.active ? `var(--color-white)` : `transparent`)};
+      ${props =>
+        props.active || props.partiallyActive
+          ? `var(--color-white)`
+          : `transparent`};
   }
 `;
 
-export default function NavLink({ children, to }) {
-  return <Link to={to}>{children}</Link>;
+export default function NavLink({ children, ...other }) {
+  return <Link {...other}>{children}</Link>;
 }

src/components/nav.js

@@ -104,7 +104,7 @@ const List = styled.ul`
   }
 `;
 
-export default function Nav({ data, open, setOpen }) {
+export default function Nav({ location, data, open, setOpen }) {
   const handleButtonClick = () => setOpen(!open);
   return (
     <Container open={open}>
@@ -124,6 +124,11 @@ export default function Nav({ data, open, setOpen }) {
                 index={i}
                 subNav={link.subNav}
                 to={link.to}
+                location={location}
+                active={location === link.to}
+                partiallyActive={
+                  link.subNav && location && location.indexOf(link.to) === 0
+                }
                 open={open}
               >
                 {link.title}

src/layout.js

@@ -83,7 +83,7 @@ const GlobalStyles = css`
   }
 `;
 
-export default function Layout({ children }) {
+export default function Layout({ location, children }) {
   const data = useStaticQuery(graphql`
     query HeaderQuery {
       site {
@@ -131,7 +131,12 @@ export default function Layout({ children }) {
         {children}
         <Footer />
       </main>
-      <Nav data={navData} open={navOpen} setOpen={setNavOpen} />
+      <Nav
+        location={location}
+        data={navData}
+        open={navOpen}
+        setOpen={setNavOpen}
+      />
     </>
   );
 }

src/pages/about.js

@@ -5,7 +5,7 @@ import { Header, Heading, Section, Text } from "../components";
 
 export default function Index({ data }) {
   return (
-    <Layout>
+    <Layout location="/about">
       <Header
         image={data.headerImage.childImageSharp.fluid}
         position="bottom right"

src/pages/contact.js

@@ -49,7 +49,7 @@ export default function Index({ data }) {
       .catch(error => console.log(error));
   };
   return (
-    <Layout>
+    <Layout location="/contact">
       <Header
         image={data.headerImage.childImageSharp.fluid}
         position="bottom right"

src/pages/index.js

@@ -14,7 +14,7 @@ import {
 
 export default function Index({ data }) {
   return (
-    <Layout>
+    <Layout location="/">
       <Header image={data.headerImage.childImageSharp.fluid}>
         <HeaderLogo transition={true} />
       </Header>

src/pages/services/bathrooms.js

@@ -5,7 +5,7 @@ import { Header } from "../../components";
 
 export default function Index({ data }) {
   return (
-    <Layout>
+    <Layout location="/services/bathrooms">
       <Header image={data.headerImage.childImageSharp.fluid}>
         <h1>Bathrooms</h1>
       </Header>

src/pages/services/index.js

@@ -5,7 +5,7 @@ import { Header } from "../../components";
 
 export default function Index({ data }) {
   return (
-    <Layout>
+    <Layout location="/services">
       <Header image={data.headerImage.childImageSharp.fluid}>
         <h1>Services</h1>
       </Header>