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.
49 lines
1.1 KiB
49 lines
1.1 KiB
2 years ago
|
<template>
|
||
|
|
<Drawer
|
||
|
|
v-if="getIsMobile"
|
||
|
|
placement="left"
|
||
|
|
:class="prefixCls"
|
||
|
|
:width="getMenuWidth"
|
||
|
|
:getContainer="null"
|
||
|
|
:visible="!getCollapsed"
|
||
|
|
@close="handleClose"
|
||
|
|
>
|
||
|
|
<Sider />
|
||
|
|
</Drawer>
|
||
|
|
<MixSider v-else-if="getIsMixSidebar" />
|
||
|
|
<Sider v-else />
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup name="SiderWrapper">
|
||
|
|
import Sider from './LayoutSider.vue'
|
||
|
|
import MixSider from './MixSider.vue'
|
||
|
|
import { Drawer } from 'ant-design-vue'
|
||
|
|
|
||
|
|
import { useAppInject } from '@/hooks/web/useAppInject'
|
||
|
|
import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
|
||
|
|
import { useDesign } from '@/hooks/web/useDesign'
|
||
|
|
|
||
|
|
const { prefixCls } = useDesign('layout-sider-wrapper')
|
||
|
|
const { getIsMobile } = useAppInject()
|
||
|
|
const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar } = useMenuSetting()
|
||
|
|
|
||
|
|
function handleClose() {
|
||
|
|
setMenuSetting({
|
||
|
|
collapsed: true
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<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>
|