link

hendrik-boerma · Nov 10, 2023 · 83157f5 · 83157f5
1 parent 6b2d92f
commit 83157f5
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 48 deletions.
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -1,19 +1,19 @@
 {
   "files": {
     "main.css": "/capstone-course-coursera/static/css/main.205e5408.css",
-    "main.js": "/capstone-course-coursera/static/js/main.88a78b42.js",
+    "main.js": "/capstone-course-coursera/static/js/main.57dce955.js",
     "static/js/787.505cc4c5.chunk.js": "/capstone-course-coursera/static/js/787.505cc4c5.chunk.js",
     "static/media/bruchetta.jpeg": "/capstone-course-coursera/static/media/bruchetta.6f51ed243117bebb2d12.jpeg",
     "static/media/restaurant chef B.jpg": "/capstone-course-coursera/static/media/restaurant chef B.0173ed674438ddb385d4.jpg",
     "static/media/greek salad.jpg": "/capstone-course-coursera/static/media/greek salad.41cb65093dacb7f2600b.jpg",
     "static/media/Logo.svg": "/capstone-course-coursera/static/media/Logo.6c132dfefa69396bba43f72aa595e62f.svg",
     "index.html": "/capstone-course-coursera/index.html",
     "main.205e5408.css.map": "/capstone-course-coursera/static/css/main.205e5408.css.map",
-    "main.88a78b42.js.map": "/capstone-course-coursera/static/js/main.88a78b42.js.map",
+    "main.57dce955.js.map": "/capstone-course-coursera/static/js/main.57dce955.js.map",
     "787.505cc4c5.chunk.js.map": "/capstone-course-coursera/static/js/787.505cc4c5.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.205e5408.css",
-    "static/js/main.88a78b42.js"
+    "static/js/main.57dce955.js"
   ]
 }
diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/capstone-course-coursera/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Enjoy our amazing food!"/><meta name="og:title" content="Little Lemon"/><meta name="og:description" content="Enjoy our amazing food!"/><meta name="og:image" content="../src/images/logo.svg"/><link rel="apple-touch-icon" href="/capstone-course-coursera/logo192.png"/><script src="https://raw.githubusercontent.com/Meta-Front-End-Developer-PC/capstone/master/api.js"></script><link rel="manifest" href="/capstone-course-coursera/manifest.json"/><title>React App</title><script defer="defer" src="/capstone-course-coursera/static/js/main.88a78b42.js"></script><link href="/capstone-course-coursera/static/css/main.205e5408.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/capstone-course-coursera/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Enjoy our amazing food!"/><meta name="og:title" content="Little Lemon"/><meta name="og:description" content="Enjoy our amazing food!"/><meta name="og:image" content="../src/images/logo.svg"/><link rel="apple-touch-icon" href="/capstone-course-coursera/logo192.png"/><script src="https://raw.githubusercontent.com/Meta-Front-End-Developer-PC/capstone/master/api.js"></script><link rel="manifest" href="/capstone-course-coursera/manifest.json"/><title>React App</title><script defer="defer" src="/capstone-course-coursera/static/js/main.57dce955.js"></script><link href="/capstone-course-coursera/static/css/main.205e5408.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "homepage" : "https://hendrik-boerma.github.io/capstone-course-coursera/",
+  "homepage": "https://hendrik-boerma.github.io/capstone-course-coursera/",
   "name": "capstone-course",
   "version": "0.1.0",
   "private": true,
@@ -9,7 +9,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.10.0",
+    "react-router-dom": "^6.18.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -18,8 +18,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "predeploy" : "npm run build",
-    "deploy" : "gh-pages -d build"
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   },
   "eslintConfig": {
     "extends": [

diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -1,26 +1,45 @@
-import './Navbar.css';
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import logo from '../images/Logo.svg'
-import { useState } from "react";
+import logo from "../images/Logo.svg";
+import "./Navbar.css";
 
-function Navbar () {
+function Navbar() {
+  const [toggleMenu, setToggleMenu] = useState(false);
 
-    const [toggleMenu, setToggleMenu] = useState(false);
-
-    return (
-        <nav>
-      <div className='navheader'>
-            <button  aria-label={toggleMenu ? "close menu" : "open menu"} id='hamburger' onClick={() => setToggleMenu(!toggleMenu)} >{toggleMenu ? "Close" : "Menu"}</button>
-            <a href="/"><img src={logo} id='navlogo' alt="little lemon logo" /></a>
-        </div>
-      <ul id='openmenu' className={toggleMenu ? "navlist-mobile" : "navlist"} onClick={() => setToggleMenu(false)}>
-        <Link to="/" className="nav-item">Home</Link>
-        <Link to="/about" className="nav-item">About</Link>
-        <Link to="/menu" className="nav-item">Menu</Link>
-        <Link to="/booking" className="nav-item">Reserve</Link>
+  return (
+    <nav>
+      <div className="navheader">
+        <button
+          aria-label={toggleMenu ? "close menu" : "open menu"}
+          id="hamburger"
+          onClick={() => setToggleMenu(!toggleMenu)}
+        >
+          {toggleMenu ? "Close" : "Menu"}
+        </button>
+        <Link to="/">
+          <img src={logo} id="navlogo" alt="little lemon logo" />
+        </Link>
+      </div>
+      <ul
+        id="openmenu"
+        className={toggleMenu ? "navlist-mobile" : "navlist"}
+        onClick={() => setToggleMenu(false)}
+      >
+        <Link to="/" className="nav-item">
+          Home
+        </Link>
+        <Link to="/about" className="nav-item">
+          About
+        </Link>
+        <Link to="/menu" className="nav-item">
+          Menu
+        </Link>
+        <Link to="/booking" className="nav-item">
+          Reserve
+        </Link>
       </ul>
     </nav>
-    );
+  );
 }
 
 export default Navbar;
diff --git a/src/components/Routing.js b/src/components/Routing.js
@@ -1,4 +1,4 @@
-import { Routes, Route } from "react-router-dom";
+import { Route, Routes } from "react-router-dom";
 import Home from '../pages/Home';
 import About from '../pages/About';
 import Menu from '../pages/Menu';
@@ -9,11 +9,11 @@ function Routing () {
 
     return (
       <Routes basename="/capstone-course-coursera">
-        <Route path="/" element={<Home />}></Route>
-        <Route path="/about" element={<About />}></Route>
-        <Route path="/menu" element={<Menu />}></Route>
-        <Route path="/booking" element={<BookingPage/>}></Route>
-        <Route path="/confirmation" element={<BookingConfirmation />}></Route>
+        <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+        <Route path="/menu" element={<Menu />} />
+        <Route path="/booking" element={<BookingPage/>} />
+        <Route path="/confirmation" element={<BookingConfirmation />} />
       </Routes>
     );
 }