From 4593559a4b8e71e68e2264ef4a55df1b601dfb5a Mon Sep 17 00:00:00 2001
From: Joshua Hsueh <joshua12696@gmail.com>
Date: Sat, 10 Apr 2021 15:55:35 -0400
Subject: [PATCH] navbar

---
 package-lock.json      |  31 ++++++++++
 package.json           |   1 +
 src/components/Nav.tsx | 135 ++++++++++++++++++++++++++++-------------
 yarn.lock              |   9 ++-
 4 files changed, 133 insertions(+), 43 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b7205ed..57dc7c1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@material-ui/core": "^4.11.3",
+        "@material-ui/icons": "^4.11.2",
         "@testing-library/jest-dom": "^5.11.4",
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",
@@ -1726,6 +1727,28 @@
       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
       "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
     },
+    "node_modules/@material-ui/icons": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
+      "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.4.4"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "@material-ui/core": "^4.0.0",
+        "@types/react": "^16.8.6 || ^17.0.0",
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@material-ui/styles": {
       "version": "4.11.3",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz",
@@ -20759,6 +20782,14 @@
         }
       }
     },
+    "@material-ui/icons": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
+      "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
     "@material-ui/styles": {
       "version": "4.11.3",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz",
diff --git a/package.json b/package.json
index 1b47b3e..960b5bc 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 2ea8292..44260b9 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -1,49 +1,100 @@
-import AppBar from '@material-ui/core/AppBar';
+import { AppBar, Toolbar } from '@material-ui/core';
+import { IconButton } from '@material-ui/core';
+import { Home } from '@material-ui/icons';
+import { List, ListItem, ListItemText } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core';
+import { Container } from '@material-ui/core';
 
+const useStyles = makeStyles({
+	navbarDisplayFlex: {
+		display: `flex`,
+		justifyContent: `space-between`,
+	},
+	navDisplayFlex: {
+		display: `flex`,
+		justifyContent: `space-between`,
+	},
+	linkText: {
+		textDecoration: `none`,
+		textTransform: `uppercase`,
+		color: `white`,
+	},
+});
+const navLinks = [
+	{ title: `Carpool`, path: `/` },
+	{ title: `Profile`, path: `/profile` },
+	{ title: `Groups`, path: `/groups` },
+	{ title: `MyGroups`, path: `/mygroups` },
+	{ title: `MyPools`, path: `/mypools` },
+];
 const Nav = () => {
+	const classes = useStyles();
 	return (
-		<AppBar className="navbar navbar-expand-lg navbar-dark bg-dark">
-			<button
-				className="navbar-toggler"
-				type="button"
-				data-toggle="collapse"
-				data-target="#navbarNavDropdown"
-				aria-controls="navbarNavDropdown"
-				aria-expanded="false"
-				aria-label="Toggle navigation"
-			>
-				<span className="navbar-toggler-icon"></span>
-			</button>
-			<div className="collapse navbar-collapse" id="navbarNavDropdown">
-				<ul className="navbar-nav mr-auto">
-					<li className="nav-item">
-						<a className="nav-link text-white" href="/">
-							Carpool <span className="sr-only">(current)</span>
-						</a>
-					</li>
-					<li className="nav-item">
-						<a className="nav-link text-white" href="/profile">
-							Profile <span className="sr-only">(current)</span>
-						</a>
-					</li>
-					<li className="nav-item">
-						<a className="nav-link text-white" href="/groups">
-							Groups
-						</a>
-					</li>
-					<li className="nav-item">
-						<a className="nav-link text-white" href="/mygroups">
-							MyGroups
-						</a>
-					</li>
-					<li className="nav-item">
-						<a className="nav-link text-white" href="/mypools">
-							MyPools
-						</a>
-					</li>
-				</ul>
-			</div>
+		<AppBar position="static" style={{ background: '#40E0D0' }}>
+			<Toolbar>
+				<Container maxWidth="xl" className={classes.navbarDisplayFlex}>
+					<IconButton href="/" edge="start" color="inherit" aria-label="home">
+						<Home fontSize="large" />
+					</IconButton>
+					<List
+						component="nav"
+						aria-labelledby="main navigation"
+						className={classes.navbarDisplayFlex} // this
+					>
+						{navLinks.map(({ title, path }) => (
+							<a href={path} key={title} className={classes.linkText}>
+								<ListItem button>
+									<ListItemText primary={title} />
+								</ListItem>
+							</a>
+						))}
+					</List>
+				</Container>
+			</Toolbar>
 		</AppBar>
+
+		// <AppBar className="navbar navbar-expand-lg navbar-dark bg-dark">
+		// 	<button
+		// 		className="navbar-toggler"
+		// 		type="button"
+		// 		data-toggle="collapse"
+		// 		data-target="#navbarNavDropdown"
+		// 		aria-controls="navbarNavDropdown"
+		// 		aria-expanded="false"
+		// 		aria-label="Toggle navigation"
+		// 	>
+		// 		<span className="navbar-toggler-icon"></span>
+		// 	</button>
+		// 	<div className="collapse navbar-collapse" id="navbarNavDropdown">
+		// 		<ul className="navbar-nav mr-auto">
+		// 			<li className="nav-item">
+		// 				<a className="nav-link text-white" href="/">
+		// 					Carpool <span className="sr-only">(current)</span>
+		// 				</a>
+		// 			</li>
+		// 			<li className="nav-item">
+		// 				<a className="nav-link text-white" href="/profile">
+		// 					Profile <span className="sr-only">(current)</span>
+		// 				</a>
+		// 			</li>
+		// 			<li className="nav-item">
+		// 				<a className="nav-link text-white" href="/groups">
+		// 					Groups
+		// 				</a>
+		// 			</li>
+		// 			<li className="nav-item">
+		// 				<a className="nav-link text-white" href="/mygroups">
+		// 					MyGroups
+		// 				</a>
+		// 			</li>
+		// 			<li className="nav-item">
+		// 				<a className="nav-link text-white" href="/mypools">
+		// 					MyPools
+		// 				</a>
+		// 			</li>
+		// 		</ul>
+		// 	</div>
+		// </AppBar>
 	);
 };
 
diff --git a/yarn.lock b/yarn.lock
index 31e76ce..f0e4556 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1373,7 +1373,7 @@
     "@types/yargs" "^15.0.0"
     "chalk" "^4.0.0"
 
-"@material-ui/core@^4.11.3":
+"@material-ui/core@^4.0.0", "@material-ui/core@^4.11.3":
   "integrity" "sha512-Adt40rGW6Uds+cAyk3pVgcErpzU/qxc7KBR94jFHBYretU4AtWZltYcNsbeMn9tXL86jjVL1kuGcIHsgLgFGRw=="
   "resolved" "https://registry.npmjs.org/@material-ui/core/-/core-4.11.3.tgz"
   "version" "4.11.3"
@@ -1391,6 +1391,13 @@
     "react-is" "^16.8.0 || ^17.0.0"
     "react-transition-group" "^4.4.0"
 
+"@material-ui/icons@^4.11.2":
+  "integrity" "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ=="
+  "resolved" "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz"
+  "version" "4.11.2"
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+
 "@material-ui/styles@^4.11.3":
   "integrity" "sha512-HzVzCG+PpgUGMUYEJ2rTEmQYeonGh41BYfILNFb/1ueqma+p1meSdu4RX6NjxYBMhf7k+jgfHFTTz+L1SXL/Zg=="
   "resolved" "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz"