use an editable svg as the navbar toggle icon

by default, the background image rendered by the "navbar-toggler-icon"
class is a dark colored hamburger menu icon. since it uses an image, it
was incapable of being dynamically styled with css alone. this commit
replaces the "navbar-toggler-icon" class inside "navbar-toggler" with an
editable svg, allowing us to change the color.

- ref: #207

Author: alishaevn

src/assets/svg/ToggleIcon.jsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import themeColors from '../theme/default-colors.module.scss'
+
+const ToggleIcon = ({ linkColor }, props) => {
+  const fill = themeColors[linkColor]
+
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      xmlSpace='preserve'
+      style={{
+        enableBackground: 'new 0 0 227 163.3',
+      }}
+      viewBox='0 0 227 163.3'
+      fill={fill}
+      width={25}
+      height={25}
+      {...props}
+    >
+      <path d='M113.1 33h-95C5.8 33-2.1 22.1 2.2 11.3 4.6 5.2 9.3 1.8 15.8 1.1c1.5-.2 3-.1 4.5-.1h185.5c2.2 0 4.4-.1 6.5.3 8.1 1.6 13.6 9.2 12.7 17.2-.8 8.1-7.5 14.3-15.9 14.3-21 .1-42 0-63 .1-11 .1-22 .1-33 .1zM113 65h95c12.7 0 20.7 11.7 15.6 22.6-3.1 6.6-8.5 9.4-15.7 9.4H18.4C5.8 97-2.2 86 2.2 75.1c2.6-6.4 8.3-10 16.3-10.1H113zM113.3 129c31.7 0 63.3-.1 95 0 13.2 0 21.1 13.3 14.5 24.1-3.5 5.8-9 7.9-15.7 7.9-45.8-.1-91.7 0-137.5 0H19.1c-10.7 0-17.9-6.4-18-15.9C1 135.5 8.3 129 19.3 129h94z' />
+    </svg>
+  )
+}
+
+export default ToggleIcon

src/compounds/Header/Header.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Container, Nav, Navbar } from 'react-bootstrap'
+import ToggleIcon from '../../assets/svg/ToggleIcon'
 import Logo from '../Logo/Logo'
 
 const Header = ({ auth, linkColor, logo, navLinks, userSession }) => {
@@ -12,7 +13,9 @@ const Header = ({ auth, linkColor, logo, navLinks, userSession }) => {
         <Navbar.Brand className='w-50'>
           <Logo src={src} alt={alt} height={45} />
         </Navbar.Brand>
-        <Navbar.Toggle aria-controls='basic-navbar-nav' />
+        <Navbar.Toggle aria-controls='basic-navbar-nav'>
+          <ToggleIcon linkColor={linkColor} />
+        </Navbar.Toggle>
         <Navbar.Collapse id='basic-navbar-nav'>
           <Nav className='ms-auto'>
             {navLinks.map((nav) => (