now header is able to be different visually based on pathname

src/components/Header/index.js

@@ -8,7 +8,9 @@ import Container from "../Container";
 import "./index.scss";
 import Shortcut from "../Shortcut";
 
+
 const Header = ({ hideShortcut }) => {
+  const pathname = window?.location?.pathname;
   return (
     <header className="header">
       <Container>
@@ -18,11 +20,21 @@ const Header = ({ hideShortcut }) => {
         {!hideShortcut && <Shortcut text="👀" />}
         <ul className="header-list">
           <li>
-            <Link to="/about">about</Link>
+            <Link
+              to="/about/"
+              className={pathname?.startsWith("/about") ? `-active` : ``}
+            >
+              about
+            </Link>
           </li>
 
           <li>
-            <Link to="/recruiter">for recruiters</Link>
+            <Link
+              to="/recruiter/"
+              className={pathname?.startsWith("/recruiter") ? `-active` : ``}
+            >
+              for recruiters
+            </Link>
           </li>
         </ul>
       </Container>

src/components/Header/index.scss

@@ -35,6 +35,13 @@
       &:last-of-type {
         margin-right: 0;
       }
+
+      a {
+        &.-active {
+          color: white;
+          text-decoration: underline;
+        }
+      }
     }
   }
 }

src/pages/about.js

@@ -127,4 +127,4 @@ const About = () => {
 
 export default About;
 
-export const Head = () => <title>sobre</title>;
+export const Head = () => <title>sobre | cesarolvr</title>;

src/pages/index.js

@@ -33,4 +33,4 @@ const IndexPage = () => {
 
 export default IndexPage;
 
-export const Head = () => <title>cesarolvr.com</title>;
+export const Head = () => <title>cesarolvr</title>;