xiaodou-ai-admin/src/layout/components/Sidebar/index.vue

<template>
  <a-button
    v-if="isMobile"
    class="open-icon"
    type="primary"
    @click="openDrawer"
  >
    <right-outlined />
  </a-button>
  <a-drawer
      placement="left"
      :closable="false"
      :open="drawerVisible"
      :get-container="false"
      :style="{ position: 'absolute' }"
      width="240px"
      @close="drawerVisible = false"
    >
    <a-layout-sider
        :trigger="null"
        v-model:collapsed="collapsed"
        collapsible
        :style="{backgroundColor: bgColor, overflow: 'hidden'}"
      >
        <a-menu
          v-model:selectedKeys="selectedKeys"
          :openKeys="openKeys"
          mode="inline"
          :style="{ borderRight: 0 }"
        >
          <sidebar-item
            :item="route"
            v-for="route in sidebarRoute"
            :key="route.path"
            :base-path="route.path"
          />
        </a-menu>
    </a-layout-sider>
  </a-drawer>

  <a-layout-sider
    v-if="!isMobile"
    v-model:collapsed="collapsed"
    collapsible
    :style="{backgroundColor: bgColor, overflow: 'hidden', overflowY: 'scroll'}"
    breakpoint="lg"
  >
    <div class="logo" >
      <img :src="logoPng" alt="">
    </div>
    <a-menu
      v-model:selectedKeys="selectedKeys"
      :openKeys="openKeys"
      mode="inline"
      :style="{ borderRight: 0 }"
    >
      <sidebar-item
        :item="route"
        v-for="route in sidebarRoute"
        :key="route.path"
        :base-path="route.path"
      />
    </a-menu>
  </a-layout-sider>

</template>

<script lang="ts" setup >

import { ref, computed, watch } from 'vue'
import SidebarItem from './SidebarItem.vue'
import { useRouter, useRoute } from 'vue-router'
import { useDesignStore } from '@/store'
import { useDeviceType } from '@/hooks'
import { RightOutlined } from '@ant-design/icons-vue'
import { routes } from '@/router/index'

const logoPng = require('@/assets/logo.png')

const designStore = useDesignStore()

const isMobile = useDeviceType()

const bgColor = computed(() => designStore.theme ? '#141414' : '#fff')

const route = useRoute()

const router = useRouter()

const collapsed = ref<boolean>(true)

const sidebarRoute = ref<any>()

const selectedKeys = ref<string[]>()

const openKeys = ref<string[]>()

const drawerVisible = ref<boolean>(false)

watch(
  () => route.path,
  () => {
    sidebarRoute.value = isMobile ? routes : router.getRoutes().find(item => item.path === route.matched[0].path)?.children
    selectedKeys.value = [route.path]
    openKeys.value = [route.matched[1].path]
  },
  {
    immediate: true
  }
)

const openDrawer = () => drawerVisible.value = true

</script>

<style lang="less" scoped >
/deep/ .ant-layout-sider-children {
  margin-top: -4px;
}

.ant-layout-sider::-webkit-scrollbar {
  width: 0;
}

.logo {
  width: 100%;
  height: 64px;
  margin: 20px 0px;
  margin-top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  img {
    width: 150px;
    height: 50px;
  }
}

.mobile-sider {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.open-icon {
  width: 50px;
  height: 50px;
  position: fixed;
  top: 200px;
  left: 0px;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

</style>