session variable for eatery from menu

db_app/src/App.js

@@ -3,6 +3,7 @@ import Login from "./components/Login";
 import CreateAccount from "./components/CreateAccount";
 import Menus from "./components/Menus";
 import Plan from "./components/Plan";
+import MenuExpansion from "./components/MenuExpansion";
 import { ReactSession } from 'react-client-session';
 
 import {
@@ -15,8 +16,6 @@ import {
 ReactSession.setStoreType("sessionStorage");
 function App() {
 
-
-  
   return (
     <Router>
       <Routes>
@@ -24,6 +23,7 @@ function App() {
         <Route path='/CreateAccount' element={<CreateAccount/>}></Route>
         <Route path='/Menus' element={<Menus/>}></Route>
         <Route path='/Plan' element={<Plan/>}></Route>
+        <Route path='/MenuExpansion' element={<Plan/>}></Route>
       </Routes>
     </Router>
   );

db_app/src/components/MenuExpansion.js

@@ -0,0 +1,91 @@
+import React,{useState, useEffect} 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 { CardMedia, CardContent } from '@mui/material';
+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';
+import { ReactSession } from 'react-client-session';
+
+
+const theme = createTheme({
+    palette: {
+      primary: {
+        main: lightGreen[700],
+        apple: red[500],
+      },
+
+    },
+  });
+
+  
+
+  const getEatery = () => {
+    return ReactSession.get("eatery");
+ }
+
+  function MenuExpansion() {
+    const navigate = useNavigate();
+
+	const Home = () => {
+		 navigate('/Plan');
+	}
+    const Menus = () => {
+        navigate('/Menus');
+   }
+   const Past = () => {
+    navigate('/Past');
+}
+const navigateLogin = () => {
+    navigate('/');
+}
+
+
+
+
+
+return(
+
+
+    <ThemeProvider theme={theme}>
+    <AppBar className='bar' position="static">
+  <Toolbar variant="dense">
+  <Button  variant="h6" color="main" position="right" onClick={Home}>
+   Home</Button> 
+    <Button variant="h6" color="main" component="div" onClick={Menus}>
+      Menus
+    </Button>
+    <Button  variant="h6" onClick="Past">
+    Past Plans</Button> 
+    <Button variant="h6" color="main" component="div" onClick={navigateLogin} sx={{
+    ':hover': {
+      bgcolor: '#ffc6c4', // theme.palette.primary.main
+      color: 'red',
+    },
+  }}>
+        Log out
+    </Button>
+  </Toolbar>
+</AppBar>
+</ThemeProvider>
+)
+
+}
+export default MenuExpansion;

db_app/src/components/Menus.js

@@ -22,6 +22,8 @@ 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';
+import { ReactSession } from 'react-client-session';
+
 
 const theme = createTheme({
     palette: {
@@ -49,6 +51,40 @@ const navigateLogin = () => {
     navigate('/');
 }
 
+  const setStarbucks = () => {
+    ReactSession.set("eatery", "Starbucks");
+  }
+
+  const setChick = () => {
+    ReactSession.set("eatery", "Chick-fil-a");
+  }
+
+  const setABP = () => {
+    ReactSession.set("eatery", "Au Bon Pain");
+  }
+
+  const setMoma = () => {
+    ReactSession.set("eatery", "Modern Market");
+  }
+
+  const setTaco = () => {
+    ReactSession.set("eatery", "Taco Bell");
+  }
+
+  const setDH = () => {
+    ReactSession.set("eatery", "Dining Hall");
+  }
+
+  const setFlip = () => {
+    ReactSession.set("eatery", "Flip Kitchen");
+  }
+
+  const setSmash = () => {
+    ReactSession.set("eatery", "Smashburger");
+  }
+  
+ 
+
   return (
 
     <ThemeProvider theme={theme}>
@@ -94,7 +130,7 @@ const navigateLogin = () => {
         <Typography gutterBottom variant="h5" component="div">
           Dining Hall
         </Typography>
-        <Button>View Items</Button>
+        <Button onClick={setDH}>View Items</Button>
       </CardContent>
       </Card>
 
@@ -108,7 +144,7 @@ const navigateLogin = () => {
         <Typography gutterBottom variant="h5" component="div">
           Starbucks
         </Typography>
-        <Button>View Items</Button>
+        <Button onClick={setStarbucks}>View Items</Button>
       </CardContent>
       </Card>
       </Box>
@@ -128,7 +164,7 @@ const navigateLogin = () => {
         <Typography gutterBottom variant="h5" component="div">
           ABP
         </Typography>
-        <Button>View Items</Button>
+        <Button onClick={setABP}>View Items</Button>
       </CardContent>
       </Card>
 
@@ -142,7 +178,7 @@ const navigateLogin = () => {
         <Typography gutterBottom variant="h5" component="div">
           Chick-fil-a
         </Typography>
-        <Button>View Items</Button>
+        <Button onClick={setChick}>View Items</Button>
       </CardContent>
       </Card>
       </Box>
@@ -161,7 +197,7 @@ const navigateLogin = () => {
         <Typography gutterBottom variant="h5" component="div">
           Flip Kitchen
         </Typography>
-        <Button>View Items</Button>
+        <Button onClick={setFlip}>View Items</Button>
       </CardContent>
       </Card>
 
@@ -175,7 +211,7 @@ const navigateLogin = () => {
         <Typography gutterBottom variant="h5" component="div">
           Modern Market
         </Typography>
-        <Button>View Items</Button>
+        <Button onClick={setMoma}>View Items</Button>
       </CardContent>
       </Card>
       </Box>
@@ -194,7 +230,7 @@ const navigateLogin = () => {
         <Typography gutterBottom variant="h5" component="div">
           Taco Bell
         </Typography>
-        <Button>View Items</Button>
+        <Button onClick={setTaco}>View Items</Button>
       </CardContent>
       </Card>
 
@@ -208,7 +244,7 @@ const navigateLogin = () => {
         <Typography gutterBottom variant="h5" component="div">
           Smashburger
         </Typography>
-        <Button>View Items</Button>
+        <Button onClick={setSmash}>View Items</Button>
       </CardContent>
       </Card>
       </Box>

db_app/src/components/Plan.js

@@ -25,6 +25,7 @@ import { ReactSession } from 'react-client-session';
 
 
 
+
 const theme = createTheme({
     palette: {
       primary: {