plan page has nav bar

db_app/src/App.js

@@ -2,6 +2,7 @@ import "./App.css";
 import Login from "./components/Login";
 import CreateAccount from "./components/CreateAccount";
 import Menus from "./components/Menus";
+import Plan from "./components/Plan";
 
 
 import {
@@ -21,6 +22,7 @@ function App() {
         <Route path='/' element={<Login/>}></Route>
         <Route path='/CreateAccount' element={<CreateAccount/>}></Route>
         <Route path='/Menus' element={<Menus/>}></Route>
+        <Route path='/Plan' element={<Plan/>}></Route>
       </Routes>
     </Router>
   );

db_app/src/components/Menus.js

@@ -26,7 +26,9 @@ const theme = createTheme({
     palette: {
       primary: {
         main: lightGreen[700],
+        apple: red[500],
       },
+
     },
   });
 
@@ -38,9 +40,22 @@ function Menus() {
     <ThemeProvider theme={theme}>
     <AppBar position="static">
   <Toolbar variant="dense">
-    <Button variant="h6" color="inherit" component="div">
+  <Button  variant="h6" color="main" position="right">
-      Photos
+   Home</Button> 
+    <Button variant="h6" color="main" component="div">
+      Menus
     </Button>
+    <Button  variant="h6" >
+    Past Plans</Button> 
+    <Button variant="h6" color="main" component="div" sx={{
+    ':hover': {
+      bgcolor: '#ffc6c4', // theme.palette.primary.main
+      color: 'red',
+    },
+  }}>
+        Log out
+    </Button>
+   
   </Toolbar>
 </AppBar>
 </ThemeProvider>

db_app/src/components/Plan.js

@@ -1,6 +1,36 @@
 import React,{useState} from 'react';
 import {Routes, Route, useNavigate} from 'react-router-dom';
 import './Login.css';
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import TextField from "@mui/material/TextField";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import Link from "@mui/material/Link";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Container from "@mui/material/Container";
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Avatar from '@mui/material/Avatar';
+import Tooltip from '@mui/material/Tooltip';
+import Menu from '@mui/material/Menu';
+import MenuIcon from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem';
+import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+    palette: {
+      primary: {
+        main: lightGreen[700],
+        apple: red[500],
+      },
+
+    },
+  });
 
 function MyPlan() {
 
@@ -10,32 +40,33 @@ function MyPlan() {
 		 navigate('/');
 	}
 
-  const [data,setData] = useState({
-    username:"",
-    password:"",
-    email:"",
-  })
-  
-  const {username,password,email} = data;
-  
-  const changeHandler = e => {
-    setData({...data,[e.target.name]:[e.target.value]});
-  }
-  
-  const submitHandler = e => {
-    e.preventDefault();
-    console.log(data);
-  }
   
   
     return (
+        <ThemeProvider theme={theme}>  
       <div>
-        <center>
+         <AppBar position="static">
-          <h1>My plan</h1>
+  <Toolbar variant="dense">
+  <Button  variant="h6" color="main" position="right">
+   Home</Button> 
+    <Button variant="h6" color="main" component="div">
+      Menus
+    </Button>
+    <Button  variant="h6" >
+    Past Plans</Button> 
+    <Button variant="h6" color="main" component="div" sx={{
+    ':hover': {
+      bgcolor: '#ffc6c4', // theme.palette.primary.main
+      color: 'red',
+    },
+  }}>
+        Log out
+    </Button>
    
-    
+  </Toolbar>
-        </center>
+</AppBar>
       </div>
+    </ThemeProvider>
   
     );
   }