You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.1 KiB
52 lines
1.1 KiB
<script lang="ts" setup> |
|
import { Drawer } from 'ant-design-vue' |
|
import Sider from './LayoutSider.vue' |
|
import MixSider from './MixSider.vue' |
|
|
|
import { useAppInject } from '@/hooks/web/useAppInject' |
|
import { useMenuSetting } from '@/hooks/setting/useMenuSetting' |
|
import { useDesign } from '@/hooks/web/useDesign' |
|
|
|
defineOptions({ name: 'SiderWrapper' }) |
|
|
|
const { prefixCls } = useDesign('layout-sider-wrapper') |
|
const { getIsMobile } = useAppInject() |
|
const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar } = useMenuSetting() |
|
|
|
function handleClose() { |
|
setMenuSetting({ |
|
collapsed: true, |
|
}) |
|
} |
|
</script> |
|
|
|
<template> |
|
<Drawer |
|
v-if="getIsMobile" |
|
placement="left" |
|
:class="prefixCls" |
|
:width="getMenuWidth" |
|
:get-container="null" |
|
:open="!getCollapsed" |
|
@close="handleClose" |
|
> |
|
<Sider /> |
|
</Drawer> |
|
<MixSider v-else-if="getIsMixSidebar" /> |
|
<Sider v-else /> |
|
</template> |
|
|
|
<style lang="less"> |
|
@prefix-cls: ~'@{namespace}-layout-sider-wrapper'; |
|
|
|
.@{prefix-cls} { |
|
.ant-drawer-body { |
|
height: 100vh; |
|
padding: 0; |
|
} |
|
|
|
.ant-drawer-header-no-title { |
|
display: none; |
|
} |
|
} |
|
</style>
|
|
|