Skip to content

Commit 7586bc2

Browse files
ngjiayuanngjiayuan
committed
add navbar
1 parent d02acb9 commit 7586bc2

File tree

13 files changed

+715
-116
lines changed

13 files changed

+715
-116
lines changed

‎package-lock.json‎

Lines changed: 527 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@emotion/react": "^11.11.1",
7+
"@emotion/styled": "^11.11.0",
8+
"@mui/icons-material": "^5.14.8",
9+
"@mui/material": "^5.14.8",
610
"@testing-library/jest-dom": "^5.17.0",
711
"@testing-library/react": "^13.4.0",
812
"@testing-library/user-event": "^13.5.0",

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>Peer Prep</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.css‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎src/App.test.tsx‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎src/App.tsx‎

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,12 @@
1-
import React from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
1+
import React from "react";
2+
import { Container } from "@mui/material";
3+
import Navbar from "./components/Navbar";
44

5-
function App() {
5+
export default function App() {
66
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.tsx</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
22-
</div>
7+
<>
8+
<Navbar />
9+
<Container>hello world!</Container>
10+
</>
2311
);
2412
}
25-
26-
export default App;

‎src/components/Navbar.tsx‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
import * as React from "react";
2+
import AppBar from "@mui/material/AppBar";
3+
import Box from "@mui/material/Box";
4+
import Toolbar from "@mui/material/Toolbar";
5+
import IconButton from "@mui/material/IconButton";
6+
import Typography from "@mui/material/Typography";
7+
import Menu from "@mui/material/Menu";
8+
import MenuIcon from "@mui/icons-material/Menu";
9+
import Container from "@mui/material/Container";
10+
import Button from "@mui/material/Button";
11+
import MenuItem from "@mui/material/MenuItem";
12+
import AdbIcon from "@mui/icons-material/Adb";
13+
14+
const pages = ["Products", "Pricing", "Blog"];
15+
const authPages = ["Login", "Sign Up"];
16+
const settings = ["Profile", "Account", "Dashboard", "Logout"];
17+
18+
function Navbar() {
19+
const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
20+
null
21+
);
22+
const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(
23+
null
24+
);
25+
26+
const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
27+
setAnchorElNav(event.currentTarget);
28+
};
29+
const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
30+
setAnchorElUser(event.currentTarget);
31+
};
32+
33+
const handleCloseNavMenu = () => {
34+
setAnchorElNav(null);
35+
};
36+
37+
const handleCloseUserMenu = () => {
38+
setAnchorElUser(null);
39+
};
40+
41+
return (
42+
<AppBar position="static">
43+
<Container maxWidth="xl">
44+
<Toolbar disableGutters>
45+
<AdbIcon sx={{ display: { xs: "none", md: "flex" }, mr: 1 }} />
46+
<Typography
47+
variant="h6"
48+
noWrap
49+
component="a"
50+
href="/"
51+
sx={{
52+
mr: 2,
53+
display: { xs: "none", md: "flex" },
54+
fontFamily: "monospace",
55+
fontWeight: 700,
56+
letterSpacing: ".3rem",
57+
color: "inherit",
58+
textDecoration: "none",
59+
}}
60+
>
61+
LOGO
62+
</Typography>
63+
64+
<Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
65+
<IconButton
66+
size="large"
67+
aria-label="account of current user"
68+
aria-controls="menu-appbar"
69+
aria-haspopup="true"
70+
onClick={handleOpenNavMenu}
71+
color="inherit"
72+
>
73+
<MenuIcon />
74+
</IconButton>
75+
<Menu
76+
id="menu-appbar"
77+
anchorEl={anchorElNav}
78+
anchorOrigin={{
79+
vertical: "bottom",
80+
horizontal: "left",
81+
}}
82+
keepMounted
83+
transformOrigin={{
84+
vertical: "top",
85+
horizontal: "left",
86+
}}
87+
open={Boolean(anchorElNav)}
88+
onClose={handleCloseNavMenu}
89+
sx={{
90+
display: { xs: "block", md: "none" },
91+
}}
92+
>
93+
{pages.map((page) => (
94+
<MenuItem key={page} onClick={handleCloseNavMenu}>
95+
<Typography textAlign="center">{page}</Typography>
96+
</MenuItem>
97+
))}
98+
</Menu>
99+
</Box>
100+
<AdbIcon sx={{ display: { xs: "flex", md: "none" }, mr: 1 }} />
101+
<Typography
102+
variant="h5"
103+
noWrap
104+
component="a"
105+
href="/"
106+
sx={{
107+
mr: 2,
108+
display: { xs: "flex", md: "none" },
109+
flexGrow: 1,
110+
fontFamily: "monospace",
111+
fontWeight: 700,
112+
letterSpacing: ".3rem",
113+
color: "inherit",
114+
textDecoration: "none",
115+
}}
116+
>
117+
LOGO
118+
</Typography>
119+
<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
120+
{pages.map((page) => (
121+
<Button
122+
key={page}
123+
onClick={handleCloseNavMenu}
124+
sx={{ my: 2, color: "white", display: "block" }}
125+
>
126+
{page}
127+
</Button>
128+
))}
129+
</Box>
130+
131+
<Box sx={{ flexGrow: 0 }}>
132+
<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
133+
{authPages.map((page) => (
134+
<Button
135+
key={page}
136+
onClick={handleCloseNavMenu}
137+
sx={{ my: 2, color: "white", display: "block" }}
138+
>
139+
{page}
140+
</Button>
141+
))}
142+
</Box>
143+
<Menu
144+
sx={{ mt: "45px" }}
145+
id="menu-appbar"
146+
anchorEl={anchorElUser}
147+
anchorOrigin={{
148+
vertical: "top",
149+
horizontal: "right",
150+
}}
151+
keepMounted
152+
transformOrigin={{
153+
vertical: "top",
154+
horizontal: "right",
155+
}}
156+
open={Boolean(anchorElUser)}
157+
onClose={handleCloseUserMenu}
158+
>
159+
{settings.map((setting) => (
160+
<MenuItem key={setting} onClick={handleCloseUserMenu}>
161+
<Typography textAlign="center">{setting}</Typography>
162+
</MenuItem>
163+
))}
164+
</Menu>
165+
</Box>
166+
</Toolbar>
167+
</Container>
168+
</AppBar>
169+
);
170+
}
171+
export default Navbar;

‎src/index.css‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/index.tsx‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,12 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom/client';
3-
import './index.css';
4-
import App from './App';
5-
import reportWebVitals from './reportWebVitals';
1+
import React from "react";
2+
import ReactDOM from "react-dom/client";
3+
import App from "./App";
64

75
const root = ReactDOM.createRoot(
8-
document.getElementById('root') as HTMLElement
6+
document.getElementById("root") as HTMLElement
97
);
108
root.render(
119
<React.StrictMode>
1210
<App />
1311
</React.StrictMode>
1412
);
15-
16-
// If you want to start measuring performance in your app, pass a function
17-
// to log results (for example: reportWebVitals(console.log))
18-
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
19-
reportWebVitals();

‎src/logo.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)