41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { styled } from '@mui/system';
|
|
import { ISidebarLink } from '@/interfaces/SidebarLink.interfaces';
|
|
|
|
const LinkContainer = styled('div')(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
padding: '12px 1px',
|
|
// borderRadius: theme.shape.borderRadius,s
|
|
// color: theme.palette.text.primary,
|
|
textDecoration: 'none',
|
|
transition: 'background 0.2s ease-in-out',
|
|
|
|
'&:hover': {
|
|
color: 'rgb(255, 255, 255)',
|
|
background: 'rgba(255, 255, 255, 0.08)',
|
|
// backgroundColor: theme.palette.action.hover,
|
|
cursor: 'pointer',
|
|
},
|
|
}));
|
|
// background-color: rgb(69, 190, 171);
|
|
const LinkText = styled('span')({
|
|
marginLeft: '12px',
|
|
fontWeight: 500,
|
|
});
|
|
|
|
export default function SidebarLink({ title, path, icon: Icon }: ISidebarLink) {
|
|
return (
|
|
<Link href={path} passHref legacyBehavior>
|
|
<a style={{ textDecoration: 'none' }}>
|
|
<LinkContainer>
|
|
{Icon && <Icon />}
|
|
<LinkText>{title}</LinkText>
|
|
</LinkContainer>
|
|
</a>
|
|
</Link>
|
|
);
|
|
}
|