2022-08-28 18:26:56 +02:00
|
|
|
import classNames from 'clsx'
|
2021-10-24 06:09:43 +02:00
|
|
|
|
2022-08-31 21:44:33 +02:00
|
|
|
import type { ApplicationProps } from '..'
|
2021-10-24 06:09:43 +02:00
|
|
|
|
|
|
|
export type DirectionSidebar = 'left' | 'right'
|
|
|
|
|
|
|
|
export interface SidebarProps {
|
|
|
|
direction: DirectionSidebar
|
|
|
|
visible: boolean
|
|
|
|
path?: ApplicationProps
|
|
|
|
isMobile: boolean
|
|
|
|
}
|
|
|
|
|
2022-05-12 20:35:46 +02:00
|
|
|
export const Sidebar: React.FC<React.PropsWithChildren<SidebarProps>> = (
|
|
|
|
props
|
|
|
|
) => {
|
2021-10-24 06:09:43 +02:00
|
|
|
const { direction, visible, children, path, isMobile } = props
|
|
|
|
|
|
|
|
return (
|
|
|
|
<nav
|
|
|
|
className={classNames(
|
2022-03-21 21:42:11 +01:00
|
|
|
'h-full-without-header visible z-50 flex bg-gray-200 drop-shadow-2xl transition-all dark:bg-gray-800',
|
2021-10-24 06:09:43 +02:00
|
|
|
{
|
2023-04-03 00:11:19 +02:00
|
|
|
'scrollbar-firefox-support right-0 top-0 flex-col space-y-1 overflow-y-auto':
|
2021-10-24 06:09:43 +02:00
|
|
|
direction === 'right',
|
2022-02-09 23:27:54 +01:00
|
|
|
'w-72': direction === 'right' && visible,
|
2022-03-21 21:42:11 +01:00
|
|
|
'invisible w-0 opacity-0': !visible,
|
2021-10-24 06:09:43 +02:00
|
|
|
'w-80': direction === 'left' && visible,
|
|
|
|
'max-w-max': typeof path !== 'string' && direction === 'left',
|
2023-04-03 00:11:19 +02:00
|
|
|
'right-0 top-0': direction === 'right' && isMobile,
|
2021-10-24 06:09:43 +02:00
|
|
|
absolute: isMobile
|
|
|
|
}
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</nav>
|
|
|
|
)
|
|
|
|
}
|