56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import DashboardIcon from '@mui/icons-material/Dashboard';
|
|
import { styled } from '@mui/system';
|
|
import { SIDEBAR_LINKS } from '@/constants/SidebarLink.constants';
|
|
import SidebarLink from './SideBarLink';
|
|
|
|
const SideBarContainer = styled('aside')(({ theme }) => ({
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
width: 240,
|
|
height: '100vh',
|
|
backgroundColor: theme.palette.background.primary,
|
|
color: theme.palette.text.primary,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
padding: theme.spacing(2),
|
|
zIndex: 1100,
|
|
borderRight: `1px solid ${theme.palette.divider}`,
|
|
}));
|
|
|
|
const SidebarHeader = styled('div')(({ theme }) => ({
|
|
fontSize: '20px',
|
|
fontWeight: 600,
|
|
marginBottom: theme.spacing(3),
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
color: theme.palette.text.primary,
|
|
}));
|
|
|
|
const IconSpacing = styled(DashboardIcon)(({ theme }) => ({
|
|
marginLeft: theme.spacing(1),
|
|
}));
|
|
|
|
const SideBar = () => {
|
|
return (
|
|
<SideBarContainer>
|
|
<SidebarHeader>
|
|
PaymentIQ <IconSpacing fontSize="small" />
|
|
</SidebarHeader>
|
|
{SIDEBAR_LINKS.map((link) => (
|
|
<SidebarLink
|
|
key={link.path}
|
|
title={link.title}
|
|
path={link.path}
|
|
icon={link.icon}
|
|
/>
|
|
))}
|
|
</SideBarContainer>
|
|
);
|
|
};
|
|
|
|
export default SideBar;
|