rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-21 11:20:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

navbar

Browse Source
This commit is contained in:
Joshua Hsueh 2021-04-10 15:55:35 -04:00
parent aceb5ea1e4
commit 4593559a4b
4 changed files with 133 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@material-ui/core": "^4.11.3", "@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.11.4", "@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@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", "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
"integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==" "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": { "node_modules/@material-ui/styles": {
"version": "4.11.3", "version": "4.11.3",
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz", "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": { "@material-ui/styles": {
"version": "4.11.3", "version": "4.11.3",
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz", "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz",

1
package.json
View File

@ -4,6 +4,7 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@material-ui/core": "^4.11.3", "@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.11.4", "@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",

131
src/components/Nav.tsx
View File

@ -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 Nav = () => {
const classes = useStyles();
return ( return (
<AppBar className="navbar navbar-expand-lg navbar-dark bg-dark"> <AppBar position="static" style={{ background: '#40E0D0' }}>
<button <Toolbar>
className="navbar-toggler" <Container maxWidth="xl" className={classes.navbarDisplayFlex}>
type="button" <IconButton href="/" edge="start" color="inherit" aria-label="home">
data-toggle="collapse" <Home fontSize="large" />
data-target="#navbarNavDropdown" </IconButton>
aria-controls="navbarNavDropdown" <List
aria-expanded="false" component="nav"
aria-label="Toggle navigation" aria-labelledby="main navigation"
className={classes.navbarDisplayFlex} // this
> >
<span className="navbar-toggler-icon"></span> {navLinks.map(({ title, path }) => (
</button> <a href={path} key={title} className={classes.linkText}>
<div className="collapse navbar-collapse" id="navbarNavDropdown"> <ListItem button>
<ul className="navbar-nav mr-auto"> <ListItemText primary={title} />
<li className="nav-item"> </ListItem>
<a className="nav-link text-white" href="/">
Carpool <span className="sr-only">(current)</span>
</a> </a>
</li> ))}
<li className="nav-item"> </List>
<a className="nav-link text-white" href="/profile"> </Container>
Profile <span className="sr-only">(current)</span> </Toolbar>
</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> </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>
); );
}; };

9
yarn.lock
View File

@ -1373,7 +1373,7 @@
"@types/yargs" "^15.0.0" "@types/yargs" "^15.0.0"
"chalk" "^4.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==" "integrity" "sha512-Adt40rGW6Uds+cAyk3pVgcErpzU/qxc7KBR94jFHBYretU4AtWZltYcNsbeMn9tXL86jjVL1kuGcIHsgLgFGRw=="
"resolved" "https://registry.npmjs.org/@material-ui/core/-/core-4.11.3.tgz" "resolved" "https://registry.npmjs.org/@material-ui/core/-/core-4.11.3.tgz"
"version" "4.11.3" "version" "4.11.3"
@ -1391,6 +1391,13 @@
"react-is" "^16.8.0 || ^17.0.0" "react-is" "^16.8.0 || ^17.0.0"
"react-transition-group" "^4.4.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": "@material-ui/styles@^4.11.3":
"integrity" "sha512-HzVzCG+PpgUGMUYEJ2rTEmQYeonGh41BYfILNFb/1ueqma+p1meSdu4RX6NjxYBMhf7k+jgfHFTTz+L1SXL/Zg==" "integrity" "sha512-HzVzCG+PpgUGMUYEJ2rTEmQYeonGh41BYfILNFb/1ueqma+p1meSdu4RX6NjxYBMhf7k+jgfHFTTz+L1SXL/Zg=="
"resolved" "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz" "resolved" "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz"