Uni/dps-webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added function to appBar Buttons (not search and user)

Browse Source
This commit is contained in:
FlorianSpeicher
2025-05-21 22:43:52 +02:00
parent 894099e7cd
commit fbb68101ad
2 changed files with 7 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
01-frontend/src/App.tsx
View File

@@ -19,7 +19,7 @@ export default function App() {
<Route path="/" element={<Home />} /> <Route path="/" element={<Home />} />
<Route path="*" element={<NoPage />} /> <Route path="*" element={<NoPage />} />
<Route path="/product/:id" element={<Product />} /> <Route path="/product/:id" element={<Product />} />
<Route path="/payment" element={<Payment />} /> <Route path="/checkout" element={<Payment />} />
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>
</BasketProvider> </BasketProvider>

25
01-frontend/src/helper/NavBar.tsx
View File

@@ -16,8 +16,8 @@ import { alpha, InputBase, styled } from '@mui/material';
import SearchIcon from '@mui/icons-material/Search'; import SearchIcon from '@mui/icons-material/Search';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
const pages = ['Products', 'Pricing', 'Contact']; const pages = ['Categories', 'Checkout', 'Contact'];
const settings = ['Profile', 'Account', 'Dashboard', 'Logout']; const settings = ['Account', 'Orders', 'Logout'];
const Search = styled('div')(({ theme }) => ({ const Search = styled('div')(({ theme }) => ({
position: 'relative', position: 'relative',
@@ -73,18 +73,15 @@ export default function NavBar() {
setAnchorElUser(event.currentTarget); setAnchorElUser(event.currentTarget);
}; };
const handleCloseNavMenu = () => { const handleCloseNavMenu = (link: string) => {
setAnchorElNav(null); setAnchorElNav(null);
navigate(`/${link.toLowerCase()}`);
}; };
const handleCloseUserMenu = () => { const handleCloseUserMenu = () => {
setAnchorElUser(null); setAnchorElUser(null);
}; };
const handleCheckout = () => {
navigate('/payment');
}
return ( return (
<AppBar> <AppBar>
@@ -147,7 +144,7 @@ export default function NavBar() {
sx={{ display: { xs: 'block', md: 'none' } }} sx={{ display: { xs: 'block', md: 'none' } }}
> >
{pages.map((page) => ( {pages.map((page) => (
<MenuItem key={page} onClick={handleCloseNavMenu}> <MenuItem key={page} onClick={() => handleCloseNavMenu(page)}>
<Typography sx={{ textAlign: 'center' }}>{page}</Typography> <Typography sx={{ textAlign: 'center' }}>{page}</Typography>
</MenuItem> </MenuItem>
))} ))}
@@ -176,23 +173,13 @@ export default function NavBar() {
{pages.map((page) => ( {pages.map((page) => (
<Button <Button
key={page} key={page}
onClick={handleCloseNavMenu} onClick={() => handleCloseNavMenu(page)}
sx={{ my: 2, color: 'white', display: 'block' }} sx={{ my: 2, color: 'white', display: 'block' }}
> >
{page} {page}
</Button> </Button>
))} ))}
</Box> </Box>
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
<Button
onClick={handleCheckout}
sx={{ my: 2, color: 'white', display: 'block' }}
>
Checkout
</Button>
</Box>
<Box sx={{ flexGrow: 0 }}> <Box sx={{ flexGrow: 0 }}>
<Tooltip title="Open settings"> <Tooltip title="Open settings">
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}> <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>