From 13df2e8cb8e929a508240cf965a75fec6fa3f330 Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Tue, 31 Oct 2023 04:48:06 +0700
Subject: [PATCH] Add Navbar

---
 frontend/src/App.jsx                   |  36 ++---
 frontend/src/components/Nav/Navbar.jsx | 177 +++++++++++++++++++++++++
 frontend/src/main.jsx                  |   5 +-
 3 files changed, 187 insertions(+), 31 deletions(-)
 create mode 100644 frontend/src/components/Nav/Navbar.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 7adcaeb..0ac97eb 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,38 +1,18 @@
-// import './App.css';
-// import { Routes, Route, Link } from "react-router-dom";
-// import Login from "./components/login";
-// import TestAuth from './components/testAuth';
-
-// function App() {
-//   return (
-//     <div className="App">
-//       <nav>
-//         <Link className={"nav-link"} to={"/"}>Home</Link>
-//         <Link className={"nav-link"} to={"/login"}>Login</Link>
-//         <Link className={"nav-link"} to={"/testAuth"}>testAuth</Link>
-//       </nav>
-//       <Routes>
-//         <Route exact path={"/login"} element={Login} />
-//         <Route exact path={"/testAuth"} element={TestAuth} />
-//         <Route path={"/"} render={() => <h1>This is Home page!</h1>} />
-//       </Routes>
-//     </div>
-//   );
-// }
-
-// export default App;
-
 import './App.css';
-import {BrowserRouter, Route, Routes, Link} from "react-router-dom";
+import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
+
 import TestAuth from './components/testAuth';
-import IconSideNav from "./components/IconSideNav";
-import AuthenticantionPage from "./components/authentication/AuthenticationPage"
-import SignUpPage from "./components/authentication/SignUpPage"
+import IconSideNav from './components/IconSideNav';
+import AuthenticantionPage from './components/authentication/AuthenticationPage';
+import SignUpPage from './components/authentication/SignUpPage';
+import NavBar from './components/Nav/Navbar';
+
 
 const App = () => {
     return (
         <BrowserRouter>
         <div className="App">
+                    <NavBar/>
                     <nav>
                         <Link className={"nav-link"} to={"/"}>Home</Link>
                         <Link className={"nav-link"} to={"/login"}>Login</Link>
diff --git a/frontend/src/components/Nav/Navbar.jsx b/frontend/src/components/Nav/Navbar.jsx
new file mode 100644
index 0000000..93cbd08
--- /dev/null
+++ b/frontend/src/components/Nav/Navbar.jsx
@@ -0,0 +1,177 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import Menu from '@mui/material/Menu';
+import MenuIcon from '@mui/icons-material/Menu';
+import Container from '@mui/material/Container';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
+import MenuItem from '@mui/material/MenuItem';
+import AdbIcon from '@mui/icons-material/Adb';
+
+const pages = {
+    TestAuth: '/testAuth',
+
+};
+const settings = {
+    Profile: '/profile',
+    Account: '/account',
+    Dashboard: '/dashboard',
+    Logout: '/logout',
+  };
+
+function NavBar() {
+  const [anchorElNav, setAnchorElNav] = React.useState(null);
+  const [anchorElUser, setAnchorElUser] = React.useState(null);
+
+  const handleOpenNavMenu = (event) => {
+    setAnchorElNav(event.currentTarget);
+  };
+  const handleOpenUserMenu = (event) => {
+    setAnchorElUser(event.currentTarget);
+  };
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
+
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+
+  return (
+    <AppBar position="static">
+      <Container maxWidth="xl">
+        <Toolbar disableGutters>
+          <AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
+          <Typography
+            variant="h6"
+            noWrap
+            component="a"
+            href="/"
+            sx={{
+              mr: 2,
+              display: { xs: 'none', md: 'flex' },
+              fontFamily: 'monospace',
+              fontWeight: 700,
+              letterSpacing: '.3rem',
+              color: 'inherit',
+              textDecoration: 'none',
+            }}
+          >
+            LOGO
+          </Typography>
+
+          <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+            <IconButton
+              size="large"
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleOpenNavMenu}
+              color="inherit"
+            >
+              <MenuIcon />
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorElNav}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'left',
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'left',
+              }}
+              open={Boolean(anchorElNav)}
+              onClose={handleCloseNavMenu}
+              sx={{
+                display: { xs: 'block', md: 'none' },
+              }}
+            >
+            {Object.entries(pages).map(([page, path]) => (
+            <MenuItem key={page} onClick={handleCloseNavMenu}>
+                <Link to={path} className="nav-link">
+                <Typography textAlign="center">{page}</Typography>
+                </Link>
+            </MenuItem>
+            ))}
+            </Menu>
+          </Box>
+          <AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
+          <Typography
+            variant="h5"
+            noWrap
+            component="a"
+            href="#app-bar-with-responsive-menu"
+            sx={{
+              mr: 2,
+              display: { xs: 'flex', md: 'none' },
+              flexGrow: 1,
+              fontFamily: 'monospace',
+              fontWeight: 700,
+              letterSpacing: '.3rem',
+              color: 'inherit',
+              textDecoration: 'none',
+            }}
+          >
+            LOGO
+          </Typography>
+          <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
+          {Object.entries(pages).map(([page, path]) => (
+            <Button
+                key={page}
+                component={Link} // Use the Link component
+                to={path} // Specify the target path
+                onClick={handleCloseNavMenu}
+                sx={{ my: 2, color: 'white', display: 'block' }}
+            >
+                {page}
+            </Button>
+            ))}
+          </Box>
+
+          <Box sx={{ flexGrow: 0 }}>
+            <Tooltip title="Open settings">
+              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                <Avatar alt="Bullet" src="https://us-tuna-sounds-images.voicemod.net/f322631f-689a-43ac-81ab-17a70f27c443-1692187175560.png" />
+              </IconButton>
+            </Tooltip>
+            <Menu
+              sx={{ mt: '45px' }}
+              id="menu-appbar"
+              anchorEl={anchorElUser}
+              anchorOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+              open={Boolean(anchorElUser)}
+              onClose={handleCloseUserMenu}
+            >
+            {Object.entries(settings).map(([setting, path]) => (
+            <MenuItem key={setting} onClick={handleCloseUserMenu}>
+                <Link to={path} className="nav-link">
+                <Typography textAlign="center">{setting}</Typography>
+                </Link>
+            </MenuItem>
+            ))}
+            </Menu>
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+}
+export default NavBar;
\ No newline at end of file
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index af048e7..7aa4bf4 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,13 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
-import { GoogleLogin, GoogleOAuthProvider} from '@react-oauth/google';
+import { GoogleOAuthProvider} from '@react-oauth/google';
 
 const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID
 
-
 ReactDOM.createRoot(document.getElementById("root")).render(
   <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
-    <App />
+      <App />
   </GoogleOAuthProvider>
 );
\ No newline at end of file