Add burgerIcon prop

mustofa-id · Jul 14, 2019 · 3a413b4 · 3a413b4
1 parent d5590cf
commit 3a413b4
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/src/assets/icons/feather.svg b/src/assets/icons/feather.svg
diff --git a/src/components/navbar.js b/src/components/navbar.js
@@ -4,21 +4,33 @@ import { Helmet } from 'react-helmet'
 import { Link } from 'gatsby'
 import Icon from './widget/icon'
 
-const BurgerButton = ({ onClick, isActive }) => (
+const BurgerButton = ({ onClick, isActive, burgerIcon }) => (
   <div
     onClick={onClick}
     role='button'
     className={`navbar-burger burger${isActive ? ' is-active' : ''}`}
     aria-label='menu'
     aria-expanded='false'
     data-target='griddy-nav-menu'>
-    <span aria-hidden='true' />
-    <span aria-hidden='true' />
-    <span aria-hidden='true' />
+    {burgerIcon ? (
+      <div className='column is-vcentered'>
+        <Icon
+          name={burgerIcon}
+          size='24'
+          color='#0a0a0a'
+          strokeWidth='1' />
+      </div>
+    ) : (
+      <>
+        <span aria-hidden='true' />
+        <span aria-hidden='true' />
+        <span aria-hidden='true' />
+      </>
+    )}
   </div>
 )
 
-const Navbar = ({ backTo = '/', title, subtitle, children }) => {
+const Navbar = ({ backTo = '/', title, subtitle, children, burgerIcon }) => {
   const [menuShown, setMenuShown] = useState(false)
 
   function toggleMenu () {
@@ -47,7 +59,7 @@ const Navbar = ({ backTo = '/', title, subtitle, children }) => {
             </div>
             {/* Burger button */}
             {children ? (
-              <BurgerButton onClick={toggleMenu} isActive={menuShown} />
+              <BurgerButton onClick={toggleMenu} isActive={menuShown} burgerIcon={burgerIcon} />
             ) : null}
           </div>
           <div