81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
// components/SidebarLayout.tsx
|
|
import React from 'react';
|
|
import { styled } from '@mui/system';
|
|
import { Box, Typography, Button } from '@mui/material';
|
|
|
|
// Sidebar Container (styled using MUI System)
|
|
export const Sidebar = styled('div')(({ theme }) => ({
|
|
width: '240px',
|
|
backgroundColor: theme.palette.primary.main,
|
|
color: theme.palette.common.white,
|
|
padding: theme.spacing(2),
|
|
height: '100vh',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
}));
|
|
|
|
// Main Content Area
|
|
export const MainContent = styled('div')(({ theme }) => ({
|
|
marginLeft: '240px',
|
|
padding: theme.spacing(3),
|
|
backgroundColor: theme.palette.background.paper,
|
|
minHeight: '100vh',
|
|
}));
|
|
|
|
// Sidebar Navigation Items
|
|
export const SidebarItem = styled('div')(({ theme }) => ({
|
|
padding: theme.spacing(1.5),
|
|
cursor: 'pointer',
|
|
'&:hover': {
|
|
backgroundColor: theme.palette.primary.dark,
|
|
},
|
|
}));
|
|
|
|
// Page Wrapper that holds Sidebar and Content
|
|
export const LayoutWrapper = styled('div')({
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
height: '100vh',
|
|
});
|
|
|
|
// Sidebar Header
|
|
export const SidebarHeader = styled('div')(({ theme }) => ({
|
|
marginBottom: theme.spacing(2),
|
|
fontSize: '20px',
|
|
fontWeight: 600,
|
|
}));
|
|
|
|
const SidebarLayout = () => {
|
|
return (
|
|
<LayoutWrapper>
|
|
<Sidebar>
|
|
<SidebarHeader>Dashboard</SidebarHeader>
|
|
<SidebarItem>
|
|
<Typography variant="body1">Home</Typography>
|
|
</SidebarItem>
|
|
<SidebarItem>
|
|
<Typography variant="body1">Settings</Typography>
|
|
</SidebarItem>
|
|
<SidebarItem>
|
|
<Typography variant="body1">Profile</Typography>
|
|
</SidebarItem>
|
|
<Button variant="contained" color="secondary" fullWidth>
|
|
Logout
|
|
</Button>
|
|
</Sidebar>
|
|
|
|
<MainContent>
|
|
<Typography variant="h4" gutterBottom>
|
|
Welcome to the Dashboard!
|
|
</Typography>
|
|
<Typography variant="body1">
|
|
This is your main content area.
|
|
</Typography>
|
|
</MainContent>
|
|
</LayoutWrapper>
|
|
);
|
|
}
|
|
|
|
export default SidebarLayout;
|