Add active prop to determine actively styled page

BrettJay · May 16, 2019 · 3f93b8f · 3f93b8f
1 parent da5c657
commit 3f93b8f
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 29 deletions.
diff --git a/src/components/responsive-menu/header.js b/src/components/responsive-menu/header.js
@@ -3,11 +3,12 @@ import Menu from "./menu.module.scss"
 import React from "react"
 
 function MilligramHeader(props) {
+  const { active } = props
   return (
     <React.Fragment>
       <div className={Menu.header}/>
       <nav className={Menu.navigation}>
-        <a className={Menu.active}>
+        <a className={active === 'home' && `${Menu.active}`}>
           <div className={`${Menu.icon} ${Menu.home}`}/>
           <div className={Menu.label}>Feed</div>
         </a>
@@ -23,7 +24,7 @@ function MilligramHeader(props) {
           <div className={`${Menu.icon} ${Menu.notifications}`}/>
           <div className={Menu.label}>Notifications</div>
         </a>
-        <a>
+        <a className={active === 'profile' && `${Menu.active}`}>
           <div className={`${Menu.icon} ${Menu.profile}`}/>
           <div className={Menu.label}>Profile</div>
         </a>

diff --git a/src/pages/brew-print.mdx b/src/pages/brew-print.mdx
@@ -1,31 +1,7 @@
 import Menu from "../components/responsive-menu/menu.module.scss"
+import Header from "../components/responsive-menu/header"
 
 <div className={Menu.container}>
-  <div className={Menu.header}/>
-  <nav className={Menu.navigation}>
-    <a>
-      <div className={`${Menu.icon} ${Menu.home}`}/>
-      <div className={Menu.label}>Feed</div>
-    </a>
-    <a>
-      <div className={`${Menu.icon} ${Menu.search}`}/>
-      <div className={Menu.label}>Search</div>
-    </a>
-    <a>
-      <div className={`${Menu.icon} ${Menu.add}`}/>
-      <div className={Menu.label}>New</div>
-    </a>
-    <a>
-      <div className={`${Menu.icon} ${Menu.notifications}`}/>
-      <div className={Menu.label}>Notifications</div>
-    </a>
-    <a className={Menu.active}>
-      <div className={`${Menu.icon} ${Menu.profile}`}/>
-      <div className={Menu.label}>Profile</div>
-    </a>
-  </nav>
-
-hello
+  <Header active={'profile'} />
 
-aaa
 </div>
diff --git a/src/pages/may-9.mdx b/src/pages/may-9.mdx
@@ -14,7 +14,7 @@ import Metatags from "../components/metatags"
 />
 
 <div className={Menu.container}>
-  <Header />
+  <Header active={'home'} />
   <div className={Menu.posts}>
     <Image
       account="brettjay"