make navbar responsive

src/components/navbar.js

@@ -1,41 +1,59 @@
 import React from 'react'
 
 function Navbar(props) {
-  // props are passed from App as {...this.state}
   return (
-    <nav className="navbar navbar-light bg-light">
-      <div className="navbar-brand ml-2">{props.appname}</div>
-
-      <div
-        className={`nav-item mr-3 ${props.component === 'about' ? 'active' : ''}`}
-        onClick={() => props.navigate('projects')}
+    <nav className="navbar navbar-expand-lg navbar-light bg-light">
+      <a
+        className="navbar-brand"
+        href="#profile"
+        onClick={() => props.navigate('profile')}
       >
+        {`Hello, ${props.user.name}!`}
+      </a>
+      <button
+        className="navbar-toggler"
+        type="button"
+        data-toggle="collapse"
+        data-target="#navbarText"
+        aria-controls="navbarText"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span className="navbar-toggler-icon" />
+      </button>
+      <div className="collapse navbar-collapse" id="navbarText">
+        <ul className="navbar-nav mr-auto">
+          <li
+            className={`nav-item  ${
+              props.component === 'project' ? 'active' : ''
+            }`}
+            onClick={() => props.navigate('project')}
+          >
+            <a className="nav-link" href="#project">
               Projects
-      </div>
-
-      <div
-        className={`nav-item mr-3 ${props.component === 'tasks' ? 'active' : ''}`}
+            </a>
+          </li>
+          <li
+            className={`nav-item  ${
+              props.component === 'tasks' ? 'active' : ''
+            }`}
             onClick={() => props.navigate('tasks')}
           >
+            <a className="nav-link" href="#tasks">
               Tasks
-      </div>
-
-      <div
-        className={`nav-item mr-3 ${props.component === 'about' ? 'active' : ''}`}
+            </a>
+          </li>
+          <li
+            className={`nav-item  ${
+              props.component === 'about' ? 'active' : ''
+            }`}
             onClick={() => props.navigate('about')}
           >
+            <a className="nav-link" href="#about">
               About
-      </div>
-
-      <div className="ml-auto>" onClick={() => props.navigate('profile')}>
-        <img
-          className="rounded-circle mr-1"
-          alt={props.user.name}
-          width="16px"
-          height="16px"
-          src="/img/default-user-image.png"
-        />
-        {`Hello, ${props.user.name}!`}
+            </a>
+          </li>
+        </ul>
       </div>
     </nav>
   )