navigation bar

hackathon-app/package.json

@@ -8,7 +8,10 @@
     "@testing-library/user-event": "^12.8.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
+    "react-router-dom": "^6.1.1",
     "react-scripts": "4.0.3",
+    "styled-components": "^5.3.3",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

hackathon-app/src/App.css

@@ -0,0 +1,8 @@
+@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');
+
+* {
+  font-family: 'Sora', sans-serif;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}

hackathon-app/src/components/Navbar/NavbarElements.js

@@ -0,0 +1,78 @@
+import { FaBars } from 'react-icons/fa';
+import { NavLink as Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+export const Nav = styled.nav`
+  background: #000;
+  height: 80px;
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem calc((100vw - 1000px) / 2);
+  z-index: 10;
+`;
+
+export const NavLink = styled(Link)`
+  color: #fff;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  padding: 0 1rem;
+  height: 100%;
+  cursor: pointer;
+
+  &.active {
+    color: #15cdfc;
+  }
+`;
+
+export const Bars = styled(FaBars)`
+  display: none;
+  color: #fff;
+
+  @media screen and (max-width: 768px) {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(-100%, 75%);
+    font-size: 1.8rem;
+    cursor: pointer;
+  }
+`;
+
+export const NavMenu = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: -400px;
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+`;
+
+export const NavBtn = styled.nav`
+  display: flex;
+  align-items: center;
+  margin-right: 24px;
+
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+`;
+
+export const NavBtnLink = styled(Link)`
+  border-radius: 4px;
+  background: #256ce1;
+  padding: 10px 22px;
+  color: #fff;
+  outline: none;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  text-decoration: none;
+
+  &:hover {
+    transition: all 0.2s ease-in-out;
+    background: #fff;
+    color: #010606;
+  }
+`;

hackathon-app/src/components/Navbar/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import {
+  Nav,
+  NavLink,
+  Bars,
+  NavMenu,
+  NavBtn,
+  NavBtnLink
+} from './NavbarElements';
+
+const Navbar = () => {
+  return (
+    <>
+      <Nav>
+        <NavLink to='/'>
+          Gym Booking System
+        </NavLink>
+        <Bars />
+        <NavMenu>
+          <NavLink to='/' activeStyle>
+            My Bookings
+          </NavLink>
+        </NavMenu>
+        <NavBtn>
+          <NavBtnLink to='/newbookings'>Make New Booking</NavBtnLink>
+        </NavBtn>
+      </Nav>
+    </>
+  );
+};
+
+export default Navbar;

hackathon-app/src/index.js

@@ -3,6 +3,11 @@ import { useState } from "react";
 import ReactDOM from "react-dom";
 import Calendar from "react-calendar"
 import 'react-calendar/dist/Calendar.css';
+import './App.css';
+import Navbar from './components/Navbar';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Home from './pages';
+import NewBooking from './pages/newbookings';
 
 function Test() {
 
@@ -33,6 +38,15 @@ function Test() {
 
     return (
         <>
+            <Router>
+                <Navbar />
+                    <Routes>
+                        <Route path='/'  element={<Home/>} />
+                        <Route path='/newbookings' element={<NewBooking/>} />
+                    </Routes>
+            </Router>
+
+
             <Calendar/>
             <h1>My {car.brand}</h1>
             <p>

hackathon-app/src/pages/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const Home = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '90vh'
+      }}
+    >
+      <h1>Home</h1>
+    </div>
+  );
+};
+
+export default Home;

hackathon-app/src/pages/newbookings.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const NewBooking = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '90vh'
+      }}
+    >
+      <h1>New Booking</h1>
+    </div>
+  );
+};
+
+export default NewBooking;