From 13a50325fc2d2aa0b8ed3d5d814f8473a92e6889 Mon Sep 17 00:00:00 2001 From: Christopher Dodge Date: Fri, 5 Mar 2021 06:43:32 -0500 Subject: [PATCH] Add navbar --- client/package.json | 1 + client/src/App.css | 6 + client/src/App.js | 13 +- client/src/Components/Navbar/Navbar.jsx | 211 ++++++++++++++++++++++++ client/yarn.lock | 7 + 5 files changed, 232 insertions(+), 6 deletions(-) create mode 100644 client/src/Components/Navbar/Navbar.jsx diff --git a/client/package.json b/client/package.json index 2e0e551..1ec0377 100644 --- a/client/package.json +++ b/client/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@material-ui/core": "^4.11.0", + "@material-ui/icons": "^4.11.2", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", diff --git a/client/src/App.css b/client/src/App.css index a49208b..c4a5b55 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -18,6 +18,12 @@ transform: translate(-50%, -50%); } +/* Temp styling for dev - find a better way for dep */ +.MuiAppBar-colorPrimary { + color: #000 !important; + background-color: #fff !important; +} + /* .center { color: rgb(242 16 90); margin: 0; diff --git a/client/src/App.js b/client/src/App.js index 71f5250..a7291ae 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -5,6 +5,7 @@ import QuoteButton from './Components/QuoteButton/QuoteButton'; import Splash from './Pages/Splash/Splash'; import { BrowserRouter as Router, Switch, Route} from 'react-router-dom'; import './App.css'; +import Navbar from './Components/Navbar/Navbar'; function App() { // Hard-coded seed quotes for testing @@ -50,13 +51,13 @@ function App() { }, []); return ( - -
-
- { showQuote && } - -
+
+ +
+ { showQuote && } +
+
); } diff --git a/client/src/Components/Navbar/Navbar.jsx b/client/src/Components/Navbar/Navbar.jsx new file mode 100644 index 0000000..e751de6 --- /dev/null +++ b/client/src/Components/Navbar/Navbar.jsx @@ -0,0 +1,211 @@ +import React from 'react'; +import { fade, makeStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; +import InputBase from '@material-ui/core/InputBase'; +import Badge from '@material-ui/core/Badge'; +import MenuItem from '@material-ui/core/MenuItem'; +import Menu from '@material-ui/core/Menu'; +import MenuIcon from '@material-ui/icons/Menu'; +import SearchIcon from '@material-ui/icons/Search'; +import AccountCircleIcon from '@material-ui/icons/AccountCircle'; +import MailIcon from '@material-ui/icons/Mail'; +import NotificationsIcon from '@material-ui/icons/Notifications'; +import MoreIcon from '@material-ui/icons/MoreVert'; + +const useStyles = makeStyles((theme) => ({ + grow: { + flexGrow: 1, + }, + menuButton: { + marginRight: theme.spacing(2), + }, + title: { + display: 'none', + [theme.breakpoints.up('sm')]: { + display: 'block', + }, + }, + search: { + position: 'relative', + borderRadius: theme.shape.borderRadius, + backgroundColor: fade(theme.palette.common.white, 0.15), + '&:hover': { + backgroundColor: fade(theme.palette.common.white, 0.25), + }, + marginRight: theme.spacing(2), + marginLeft: 0, + width: '100%', + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing(3), + width: 'auto', + }, + }, + searchIcon: { + padding: theme.spacing(0, 2), + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + inputRoot: { + color: 'inherit', + }, + inputInput: { + padding: theme.spacing(1, 1, 1, 0), + // vertical padding + font size from searchIcon + paddingLeft: `calc(1em + ${theme.spacing(4)}px)`, + transition: theme.transitions.create('width'), + width: '100%', + [theme.breakpoints.up('md')]: { + width: '20ch', + }, + }, + sectionDesktop: { + display: 'none', + [theme.breakpoints.up('md')]: { + display: 'flex', + }, + }, + sectionMobile: { + display: 'flex', + [theme.breakpoints.up('md')]: { + display: 'none', + }, + }, +})); + +export default function Navbar() { + const classes = useStyles(); + const [anchorEl, setAnchorEl] = React.useState(null); + const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null); + + const isMenuOpen = Boolean(anchorEl); + const isMobileMenuOpen = Boolean(mobileMoreAnchorEl); + + const handleProfileMenuOpen = (event) => { + setAnchorEl(event.currentTarget); + }; + + const handleMobileMenuClose = () => { + setMobileMoreAnchorEl(null); + }; + + const handleMenuClose = () => { + setAnchorEl(null); + handleMobileMenuClose(); + }; + + const handleMobileMenuOpen = (event) => { + setMobileMoreAnchorEl(event.currentTarget); + }; + + const menuId = 'primary-search-account-menu'; + const renderMenu = ( + + Profile + My account + + ); + + const mobileMenuId = 'primary-search-account-menu-mobile'; + const renderMobileMenu = ( + + + + + + +

Profile

+ + + ); + + return ( +
+ + + + + + + Inspire + +
+
+ +
+ +
+
+
+ + + + + + +
+
+ + + +
+ + + {renderMobileMenu} + {renderMenu} +
+ ); +} diff --git a/client/yarn.lock b/client/yarn.lock index 4bdd2f8..29c05d0 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -1354,6 +1354,13 @@ react-is "^16.8.0 || ^17.0.0" react-transition-group "^4.4.0" +"@material-ui/icons@^4.11.2": + version "4.11.2" + resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5" + integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/styles@^4.11.3": version "4.11.3" resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.3.tgz#1b8d97775a4a643b53478c895e3f2a464e8916f2"