import { Drawer } from 'ant-design-vue'
import SiderMenu, { privateSiderMenuProps, siderMenuProps } from './SiderMenu'
import type { CSSProperties } from 'vue'
const SiderMenuWrapper = defineComponent({
name: 'SiderMenuWrapper',
props: {
...siderMenuProps(),
...privateSiderMenuProps()
},
setup(props, { slots, attrs }) {
// TODO 计算 flatMenuKeys
// 当切换设备为手机时,会自动折叠菜单
watch(
() => props.isMobile,
() => {
if (props.isMobile == true) {
props.onCollapse?.(true)
}
},
{ immediate: true }
)
if (props.hide) {
return null
}
const drawerVisible = ref(false)
watchEffect(() => {
// @ts-ignore
drawerVisible.value = !props.collapsed
})
// @ts-ignore
return () =>
props.isMobile ? (
<>
props.onCollapse?.(true)}
style={{
padding: 0,
height: '100vh',
...(attrs.style as CSSProperties)
}}
closable={false}
getContainer={props.getContainer}
width={props.siderWidth}
bodyStyle={{ height: '100vh', padding: 0, display: 'flex', flexDirection: 'row' }}
>
{slots}
>
) : (
{slots}
)
}
})
export default SiderMenuWrapper