80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { mdiClose } from '@mdi/js';
|
|
import BaseIcon from './BaseIcon';
|
|
import AsideMenuList from './AsideMenuList';
|
|
import { MenuAsideItem } from '../interfaces';
|
|
import { useAppSelector } from '../stores/hooks';
|
|
|
|
type Props = {
|
|
menu: MenuAsideItem[];
|
|
className?: string;
|
|
onAsideLgCloseClick: () => void;
|
|
};
|
|
|
|
export default function AsideMenuLayer({
|
|
menu,
|
|
className = '',
|
|
...props
|
|
}: Props) {
|
|
const asideStyle = useAppSelector((state) => state.style.asideStyle);
|
|
const asideScrollbarsStyle = useAppSelector(
|
|
(state) => state.style.asideScrollbarsStyle,
|
|
);
|
|
const darkMode = useAppSelector((state) => state.style.darkMode);
|
|
|
|
const handleAsideLgCloseClick = (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
props.onAsideLgCloseClick();
|
|
};
|
|
|
|
return (
|
|
<aside
|
|
id='asideMenu'
|
|
className={`${className} fixed top-0 z-40 flex h-screen w-72 overflow-hidden transition-position`}
|
|
>
|
|
<div
|
|
className={`flex flex-1 flex-col overflow-hidden ${asideStyle} dark:bg-dark-900`}
|
|
>
|
|
<div className='border-b border-slate-200 px-5 py-5'>
|
|
<div className='flex items-start justify-between gap-3'>
|
|
<div>
|
|
<p className='text-xs font-semibold uppercase tracking-[0.24em] text-emerald-700'>
|
|
Northstar
|
|
</p>
|
|
<h2 className='mt-2 text-lg font-bold text-slate-950 dark:text-white'>
|
|
Foodservice Ops
|
|
</h2>
|
|
<p className='mt-1 text-xs font-medium text-slate-500'>
|
|
Supplier / Distributor B2B Portal
|
|
</p>
|
|
</div>
|
|
<button
|
|
className='hidden rounded-lg border border-slate-200 p-2 text-slate-500 hover:bg-slate-100 lg:inline-block xl:hidden'
|
|
onClick={handleAsideLgCloseClick}
|
|
>
|
|
<BaseIcon path={mdiClose} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`flex-1 overflow-y-auto overflow-x-hidden px-3 py-4 ${
|
|
darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
|
|
}`}
|
|
>
|
|
<AsideMenuList menu={menu} />
|
|
</div>
|
|
|
|
<div className='border-t border-slate-200 px-5 py-4'>
|
|
<p className='text-xs font-semibold uppercase tracking-[0.18em] text-slate-400'>
|
|
Workspace
|
|
</p>
|
|
<p className='mt-1 text-sm font-semibold text-slate-700 dark:text-slate-200'>
|
|
Contract catalog + orders
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|