59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import classNames from 'classnames'
|
|
import Drawer from '@/components/ui/Drawer'
|
|
import SidePanelContent, { SidePanelContentProps } from './SidePanelContent'
|
|
import withHeaderItem from '@/utils/hoc/withHeaderItem'
|
|
import { useStoreState, useStoreActions } from '@/store'
|
|
import type { CommonProps } from '@/@types/common'
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
|
import { FcEngineering } from 'react-icons/fc'
|
|
import { Tooltip } from '@/components/ui'
|
|
|
|
type SidePanelProps = SidePanelContentProps & CommonProps
|
|
|
|
const _SidePanel = (props: SidePanelProps) => {
|
|
const { setPanelExpand } = useStoreActions((actions) => actions.theme)
|
|
|
|
const { translate } = useLocalization()
|
|
|
|
const { className, ...rest } = props
|
|
|
|
const panelExpand = useStoreState((state) => state.theme.panelExpand)
|
|
|
|
const direction = useStoreState((state) => state.theme.direction)
|
|
|
|
const openPanel = () => {
|
|
setPanelExpand(true)
|
|
}
|
|
|
|
const closePanel = () => {
|
|
setPanelExpand(false)
|
|
const bodyClassList = document.body.classList
|
|
if (bodyClassList.contains('drawer-lock-scroll')) {
|
|
bodyClassList.remove('drawer-lock-scroll', 'drawer-open')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Tooltip title={translate('::SidePanel.Title')}>
|
|
<div className={classNames('text-2xl', className)} onClick={openPanel} {...rest}>
|
|
<FcEngineering />
|
|
</div>
|
|
</Tooltip>
|
|
<Drawer
|
|
title={translate('::SidePanel.Title')}
|
|
isOpen={panelExpand}
|
|
placement={direction === 'rtl' ? 'left' : 'right'}
|
|
width={375}
|
|
onClose={closePanel}
|
|
onRequestClose={closePanel}
|
|
>
|
|
<SidePanelContent callBackClose={closePanel} />
|
|
</Drawer>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const SidePanel = withHeaderItem(_SidePanel)
|
|
|
|
export default SidePanel
|