plan page has nav bar

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>
-          <h1>My plan</h1>
-        
-    
-        </center>
+         <AppBar position="static">
+  <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>
+</AppBar>
       </div>
+    </ThemeProvider>
   
     );
   }