155 lines
4.0 KiB
TypeScript
155 lines
4.0 KiB
TypeScript
import { ReactElement, useContext } from 'react';
|
|
import {
|
|
Link,
|
|
List,
|
|
ListItem,
|
|
ListItemButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Stack,
|
|
} from '@mui/material';
|
|
|
|
import IconifyIcon from 'components/base/IconifyIcon';
|
|
import logo from 'assets/logo/favicon-logo.png';
|
|
import Image from 'components/base/Image';
|
|
|
|
import NavButton from './NavButton';
|
|
import { axiosInstance } from '../../../axiosApi.js';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { AuthContext } from 'contexts/AuthContext';
|
|
import { AccountContext } from 'contexts/AccountContext.js';
|
|
|
|
import navItems from 'data/nav-items';
|
|
import vendorNavItems from 'data/vendor-nav-items.js';
|
|
import basicNavItems from 'data/basic-nav-items.js';
|
|
import { NavItem } from 'types.js';
|
|
import attorneyNavItems from 'data/attorney-nav-items.js';
|
|
import publicNavItems from 'data/public-nav-items.js';
|
|
|
|
const Sidebar = (): ReactElement => {
|
|
const navigate = useNavigate();
|
|
const { authenticated, setAuthentication, setNeedsNewPassword } = useContext(AuthContext);
|
|
const { account, accountLoading } = useContext(AccountContext);
|
|
|
|
let nav_items: NavItem[] = [];
|
|
if (account && !accountLoading) {
|
|
if (account.user_type === 'property_owner') {
|
|
if (account.tier === 'premium') {
|
|
nav_items = navItems;
|
|
} else {
|
|
nav_items = basicNavItems;
|
|
}
|
|
} else if (account.user_type === 'vendor') {
|
|
nav_items = vendorNavItems;
|
|
} else if (account.user_type === 'attorney') {
|
|
nav_items = attorneyNavItems;
|
|
}
|
|
} else {
|
|
nav_items = publicNavItems;
|
|
}
|
|
|
|
const handleSignOut = async () => {
|
|
try {
|
|
const response = await axiosInstance.post('/logout/', {
|
|
refresh_token: localStorage.getItem('refresh_token'),
|
|
});
|
|
localStorage.removeItem('access_token');
|
|
localStorage.removeItem('refresh_token');
|
|
axiosInstance.defaults.headers['Authorization'] = null;
|
|
setAuthentication(false);
|
|
} finally {
|
|
navigate('/authentication/login/');
|
|
}
|
|
};
|
|
return (
|
|
<Stack
|
|
justifyContent="space-between"
|
|
bgcolor="background.paper"
|
|
height={1}
|
|
boxShadow={(theme) => theme.shadows[4]}
|
|
sx={{
|
|
overflow: 'hidden',
|
|
margin: { xs: 0, lg: 3.75 },
|
|
borderRadius: { xs: 0, lg: 5 },
|
|
'&:hover': {
|
|
overflowY: 'auto',
|
|
},
|
|
width: 218,
|
|
}}
|
|
>
|
|
<Link
|
|
href="/"
|
|
sx={{
|
|
position: 'fixed',
|
|
zIndex: 5,
|
|
mt: 6.25,
|
|
mx: 4.0625,
|
|
mb: 3.75,
|
|
bgcolor: 'background.paper',
|
|
borderRadius: 5,
|
|
}}
|
|
>
|
|
<Image src={logo} width={1} />
|
|
</Link>
|
|
<Stack
|
|
justifyContent="space-between"
|
|
mt={16.25}
|
|
height={1}
|
|
sx={{
|
|
overflow: 'hidden',
|
|
'&:hover': {
|
|
overflowY: 'auto',
|
|
},
|
|
width: 218,
|
|
}}
|
|
>
|
|
<List
|
|
sx={{
|
|
mx: 2.5,
|
|
py: 1.25,
|
|
flex: '1 1 auto',
|
|
width: 178,
|
|
}}
|
|
>
|
|
{nav_items.map((navItem, index) => (
|
|
<NavButton key={index} navItem={navItem} Link={Link} />
|
|
))}
|
|
</List>
|
|
<List
|
|
sx={{
|
|
mx: 2.5,
|
|
}}
|
|
>
|
|
<ListItem
|
|
sx={{
|
|
mx: 0,
|
|
my: 2.5,
|
|
}}
|
|
>
|
|
<ListItemButton
|
|
LinkComponent={Link}
|
|
href="/"
|
|
sx={{
|
|
backgroundColor: 'background.default',
|
|
color: 'common.white',
|
|
'&:hover': {
|
|
backgroundColor: 'primary.main',
|
|
color: 'common.white',
|
|
opacity: 1.5,
|
|
},
|
|
}}
|
|
>
|
|
<ListItemIcon>
|
|
<IconifyIcon icon="ri:logout-circle-line" />
|
|
</ListItemIcon>
|
|
<ListItemText onClick={handleSignOut}>Log out</ListItemText>
|
|
</ListItemButton>
|
|
</ListItem>
|
|
</List>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|