130 lines
3.7 KiB
Vue
130 lines
3.7 KiB
Vue
<template>
|
|
<el-aside
|
|
v-if="!navTabs.state.tabFullScreen"
|
|
:class="[
|
|
config.layout.menuCollapse ? '' : 'layout-aside-collapse',
|
|
'layout-aside-' + config.layout.layoutMode + ' ' + (config.layout.shrink ? 'shrink' : ''),
|
|
]"
|
|
>
|
|
<Logo v-if="config.layout.menuShowTopBar" />
|
|
|
|
<MenuVerticalChildren v-if="config.layout.layoutMode == 'Double'" />
|
|
<MenuVertical v-else />
|
|
<div class="layout-toggle-bar" @click="onMenuCollapse">
|
|
<div class="layout-toggle-bar__top"></div>
|
|
<div class="layout-toggle-bar__bottom"></div>
|
|
</div>
|
|
</el-aside>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import Logo from '/@/layouts/backend/components/logo.vue'
|
|
import MenuVertical from '/@/layouts/backend/components/menus/menuVertical.vue'
|
|
import MenuVerticalChildren from '/@/layouts/backend/components/menus/menuVerticalChildren.vue'
|
|
import { useConfig } from '/@/stores/config'
|
|
import { useNavTabs } from '/@/stores/navTabs'
|
|
|
|
defineOptions({
|
|
name: 'layout/aside',
|
|
})
|
|
|
|
const config = useConfig()
|
|
const navTabs = useNavTabs()
|
|
|
|
const menuWidth = computed(() => config.menuWidth())
|
|
|
|
const onMenuCollapse = () => {
|
|
if (config.layout.menuCollapse) {
|
|
config.setLayout('menuCollapse', false)
|
|
} else {
|
|
config.setLayout('menuCollapse', true)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.layout-aside-Default {
|
|
background: var(--ba-bg-color-overlay);
|
|
margin: 16px 0 16px 16px;
|
|
height: calc(100vh - 32px);
|
|
box-shadow: var(--el-box-shadow-light);
|
|
border-radius: var(--el-border-radius-base);
|
|
overflow: hidden;
|
|
transition: width 0.3s ease;
|
|
width: v-bind(menuWidth);
|
|
}
|
|
.layout-aside-Classic,
|
|
.layout-aside-Double {
|
|
background-image: linear-gradient(90deg, #eaf6ff 0%, #fbfdff 100%) !important;
|
|
margin: 0;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
transition: width 0.3s ease;
|
|
width: v-bind(menuWidth);
|
|
position: relative;
|
|
}
|
|
.shrink {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 9999999;
|
|
}
|
|
.layout-toggle-bar {
|
|
cursor: pointer;
|
|
height: 72px;
|
|
width: 32px;
|
|
position: absolute;
|
|
top: calc(50% - 36px);
|
|
|
|
right: -9px;
|
|
.layout-toggle-bar__top {
|
|
background-color: rgba(191, 191, 191, 1);
|
|
position: absolute;
|
|
width: 4px;
|
|
border-radius: 2px;
|
|
height: 38px;
|
|
left: 14px;
|
|
transition:
|
|
background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.layout-toggle-bar__bottom {
|
|
background-color: rgba(191, 191, 191, 1);
|
|
position: absolute;
|
|
width: 4px;
|
|
border-radius: 2px;
|
|
height: 38px;
|
|
left: 14px;
|
|
top: 34px;
|
|
transition:
|
|
background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
&:hover {
|
|
.layout-toggle-bar__top {
|
|
background-color: rgba(153, 153, 153, 1);
|
|
transform: rotate(-12deg) scale(1.15) translateY(-2px);
|
|
}
|
|
.layout-toggle-bar__bottom {
|
|
background-color: rgba(153, 153, 153, 1);
|
|
transform: rotate(12deg) scale(1.15) translateY(2px);
|
|
}
|
|
}
|
|
}
|
|
.layout-aside-collapse {
|
|
.layout-toggle-bar {
|
|
&:hover {
|
|
.layout-toggle-bar__top {
|
|
background-color: rgba(153, 153, 153, 1);
|
|
transform: rotate(12deg) scale(1.15) translateY(-2px);
|
|
}
|
|
.layout-toggle-bar__bottom {
|
|
background-color: rgba(153, 153, 153, 1);
|
|
transform: rotate(-12deg) scale(1.15) translateY(2px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|