I am creating a template and its frontend only using React and Next.js . So I have dashboard with header bar and login button. Once logged in , the login button should be logout and also the links in header should be different. Moreover I have MUI drawer side nav, that should also be only visible once logged in .For logging in I have hard coded email and pw , as I don't have any database .
Loggin form
import Dashboard from "@/app/(routes)/dashboard/page";import { LockOutlined } from "@mui/icons-material";import { Container, CssBaseline, Box, Avatar, Typography, TextField, Button, Grid,} from "@mui/material";import Link from "next/link";import { useState } from "react";const LoginForm = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [isLoggedIn, setIsLoggedIn] = useState(false); const handleLogin = () => { if (email === 'aa@yahoo.com'&& password === 'aaa') { setIsLoggedIn(true); alert('Login successful!'); } else { alert('Invalid email or password'); } console.log('Email:', email); console.log('Password:', password); }; const handleLogout = () => { setIsLoggedIn(false); setEmail(''); setPassword(''); }; if (isLoggedIn) { return (<Dashboard/> ); } return (<><Container maxWidth="xs"><CssBaseline /><Box sx={{ mt: 20, display: "flex", flexDirection: "column", alignItems: "center", }}><Avatar sx={{ m: 1, bgcolor: "primary.light" }}><LockOutlined /></Avatar><Typography variant="h5">Login</Typography><Box sx={{ mt: 1 }}><TextField margin="normal" required fullWidth id="email" label="Email Address" name="email" autoFocus value={email} onChange={(e) => setEmail(e.target.value)} /><TextField margin="normal" required fullWidth id="password" name="password" label="Password" type="password" value={password} onChange={(e) => { setPassword(e.target.value); }} /><Button fullWidth variant="contained" sx={{ mt: 3, mb: 2 }} onClick={handleLogin}> Login</Button><Grid container justifyContent={"flex-end"}><Grid item><Link href="/signup" passHref> Don't have an account? Register</Link></Grid></Grid></Box></Box></Container></> );};export default LoginForm;**Header Component**"use client"import * as React from 'react';import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';import Box from '@mui/material/Box';import Toolbar from '@mui/material/Toolbar';import Typography from '@mui/material/Typography';import Button from '@mui/material/Button';import IconButton from '@mui/material/IconButton';import MenuIcon from '@mui/icons-material/Menu';import Drawer from '@mui/material/Drawer';import SideNav from '../SideNav/SideNav';import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';import ChevronRightIcon from '@mui/icons-material/ChevronRight';import { styled, useTheme } from '@mui/material/styles';type Anchor = 'left' ;const drawerWidth = 240;const DrawerHeader = styled('div')(({ theme }) => ({ display: 'flex', alignItems: 'center', padding: theme.spacing(0, 1), // necessary for content to be below app bar ...theme.mixins.toolbar, justifyContent: 'flex-end',}));interface AppBarProps extends MuiAppBarProps { open?: boolean;}const AppBar = styled(MuiAppBar, { shouldForwardProp: (prop) => prop !== 'open',})<AppBarProps>(({ theme, open }) => ({ transition: theme.transitions.create(['margin', 'width'], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), ...(open && { width: `calc(100% - ${drawerWidth}px)`, marginLeft: `${drawerWidth}px`, transition: theme.transitions.create(['margin', 'width'], { easing: theme.transitions.easing.easeOut, duration: theme.transitions.duration.enteringScreen, }), }),}));export default function Header() { const theme = useTheme(); const [open, setOpen] = React.useState(false); const handleDrawerOpen = () => { setOpen(true); }; const handleDrawerClose = () => { setOpen(false); }; return (<Box sx={{ flexGrow: 1 }}><AppBar position="static" open={open} sx={{ bgcolor: 'primary.dark', color: 'secondary.dark'}}> <Toolbar><IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2, ...(open && { display: 'none' })}} // onClick={toggleDrawer(true)} onClick={handleDrawerOpen} > <MenuIcon /> </IconButton><Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> News</Typography> <Drawer open={open} > <DrawerHeader ><IconButton onClick={handleDrawerClose}> {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}</IconButton> </DrawerHeader><SideNav/> </Drawer> <Button color="inherit">Login or Login</Button></Toolbar></AppBar></Box> );}