mirror of
https://github.com/myfatemi04/wheelshare-frontend.git
synced 2025-04-21 11:20:17 -04:00
navbar
This commit is contained in:
Joshua Hsueh
parent
aceb5ea1e4
commit
4593559a4b
31
package-lock.json
generated
31
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
<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
|
||||
>
|
||||
<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>
|
||||
{navLinks.map(({ title, path }) => (
|
||||
<a href={path} key={title} className={classes.linkText}>
|
||||
<ListItem button>
|
||||
<ListItemText primary={title} />
|
||||
</ListItem>
|
||||
</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>
|
||||
))}
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user