94 lines
3.0 KiB
TypeScript
94 lines
3.0 KiB
TypeScript
import React from 'react'
|
|
import { mdiLogout, mdiClose } from '@mdi/js'
|
|
import BaseIcon from './BaseIcon'
|
|
import AsideMenuList from './AsideMenuList'
|
|
import { MenuAsideItem } from '../interfaces'
|
|
import { useAppSelector , useAppDispatch } from '../stores/hooks'
|
|
import Link from 'next/link';
|
|
|
|
import { createAsyncThunk } from '@reduxjs/toolkit';
|
|
import axios from 'axios';
|
|
|
|
|
|
type Props = {
|
|
menu: MenuAsideItem[]
|
|
className?: string
|
|
onAsideLgCloseClick: () => void
|
|
}
|
|
|
|
export default function AsideMenuLayer({ menu, className = '', ...props }: Props) {
|
|
const corners = useAppSelector((state) => state.style.corners);
|
|
const asideStyle = useAppSelector((state) => state.style.asideStyle)
|
|
const asideBrandStyle = useAppSelector((state) => state.style.asideBrandStyle)
|
|
const asideScrollbarsStyle = useAppSelector((state) => state.style.asideScrollbarsStyle)
|
|
const darkMode = useAppSelector((state) => state.style.darkMode)
|
|
|
|
const handleAsideLgCloseClick = (e: React.MouseEvent) => {
|
|
e.preventDefault()
|
|
props.onAsideLgCloseClick()
|
|
}
|
|
|
|
const dispatch = useAppDispatch();
|
|
const { currentUser } = useAppSelector((state) => state.auth);
|
|
const organizationsId = currentUser?.organizations?.id;
|
|
const [organizations, setOrganizations] = React.useState(null);
|
|
|
|
const fetchOrganizations = createAsyncThunk('/org-for-auth', async () => {
|
|
try {
|
|
const response = await axios.get('/org-for-auth');
|
|
setOrganizations(response.data);
|
|
return response.data;
|
|
} catch (error) {
|
|
console.error(error.response);
|
|
throw error;
|
|
}
|
|
});
|
|
|
|
React.useEffect(() => {
|
|
dispatch(fetchOrganizations());
|
|
}, [dispatch]);
|
|
|
|
let organizationName = organizations?.find(item => item.id === organizationsId)?.name;
|
|
if(organizationName?.length > 25){
|
|
organizationName = organizationName?.substring(0, 25) + '...';
|
|
}
|
|
|
|
|
|
return (
|
|
<aside
|
|
id='asideMenu'
|
|
className={`${className} zzz lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden`}
|
|
>
|
|
<div
|
|
className={`flex-1 flex flex-col overflow-hidden dark:bg-dark-900 ${asideStyle} ${corners}`}
|
|
>
|
|
<div
|
|
className={`flex flex-row h-14 items-center justify-between ${asideBrandStyle}`}
|
|
>
|
|
<div className="text-center flex-1 lg:text-left lg:pl-6 xl:text-center xl:pl-0">
|
|
|
|
<b className="font-black">Appeal Control</b>
|
|
|
|
|
|
{organizationName && <p>{organizationName}</p>}
|
|
|
|
</div>
|
|
<button
|
|
className="hidden lg:inline-block xl:hidden p-3"
|
|
onClick={handleAsideLgCloseClick}
|
|
>
|
|
<BaseIcon path={mdiClose} />
|
|
</button>
|
|
</div>
|
|
<div
|
|
className={`flex-1 overflow-y-auto overflow-x-hidden ${
|
|
darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
|
|
}`}
|
|
>
|
|
<AsideMenuList menu={menu} />
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|