ant-design-vue 侧边导航栏隐藏

Ant Design Vue 的侧边导航栏隐藏可以通过 `Layout` 和 `Menu` 组件以及一些 CSS 样式实现。以下是一个简单的示例：

<template>
  <a-layout :style="{ minHeight: '100vh' }">
    <a-layout-sider :style="{ display: collapsed ? 'none' : 'block' }">
      <a-menu :default-selected-keys="['1']" mode="inline">
        <a-menu-item key="1">
          <a-icon type="user" />
          <span slot="title">用户管理</span>
        </a-menu-item>
        <a-menu-item key="2">
          <a-icon type="team" />
          <span slot="title">团队管理</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout-content>
      <a-icon
        class="trigger"
        type="menu-fold"
        v-show="collapsed"
        @click="collapsed = false"
      />
      <a-icon
        class="trigger"
        type="menu-unfold"
        v-show="!collapsed"
        @click="collapsed = true"
      />
      Content
    </a-layout-content>
  </a-layout>
</template>

<script>
export default {
  data() {
    return {
      collapsed: false,
    };
  },
};
</script>

<style>
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}
</style>

在这个示例中，我们使用了 `Layout` 和 `Menu` 组件来实现侧边导航栏。`Layout` 组件用于布局，`LayoutSider` 组件用于设置侧边栏的位置和宽度。通过 `:style="{ display: collapsed ? 'none' : 'block' }"` 控制侧边栏的显示和隐藏。其中，`:style` 是一个动态绑定的样式对象，根据 `collapsed` 的值来设置侧边栏的显示和隐藏。通过两个 `a-icon` 组件来切换侧边栏的显示和隐藏，通过 `v-show` 控制两个组件的显示和隐藏。

您可以根据自己的需求对侧边导航栏进行进一步的定制。