time-convertor

commit d70f133907a7465aa46ef1e2adb17008fd7b50cf
parent e09fa3cd13a600d47456c616fd1e4618eeb3d47d
Author: Agastya Chandrakant <me@hanabi.in>
Date:   Mon, 18 May 2020 07:33:27 +0530

update header

Diffstat:
M
src/comp/header.js
 | 
42
+++++++++++++++++++++++++++++++++++++-----

1 file changed, 37 insertions(+), 5 deletions(-)
diff --git a/src/comp/header.js b/src/comp/header.js
@@ -1,13 +1,45 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 function Header() {
   return (
-    <header className="mb-5">
-      <div className="page-header mt-3">
-        <h1 aria-label="1">time convertor</h1>
-        <hr />
+    <nav className="navbar navbar-expand-lg navbar-dark bg-dark mb-5">
+      <Link className="navbar-brand" to="/">
+        <span role="img" aria-label="time convertor">
+          🌐
+        </span>
+      </Link>
+      {/* <button
+        className="navbar-toggler"
+        type="button"
+        data-toggle="collapse"
+        data-target="#navbarNav"
+        aria-controls="navbarNav"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span className="navbar-toggler-icon"></span>
+      </button> */}
+      <div className="collapse navbar-collapse" id="navbarNav">
+        <ul className="navbar-nav">
+          <li className="nav-item">
+            <Link className="nav-link" to="/help">
+              Help
+            </Link>
+          </li>
+          <li className="nav-item">
+            <Link className="nav-link" to="/future">
+              Future
+            </Link>
+          </li>
+          <li className="nav-item">
+            <Link className="nav-link" to="/from-to">
+              From-to
+            </Link>
+          </li>
+        </ul>
       </div>
-    </header>
+    </nav>
   );
 }