Files
vue3-element-admin/src/layout/components/NavBar/index.vue
hxr a2c858ecca fix: 🐛 点击菜单栏显示/隐藏时transition动画失效的问题
Former-commit-id: b1cbf2e7385ebf5b56e29c466c7d172364d015ae
2023-08-28 23:06:39 +08:00

43 lines
773 B
Vue

<script setup lang="ts">
import { useAppStore } from "@/store/modules/app";
const appStore = useAppStore();
/**
* 左侧菜单栏显示/隐藏
*/
function toggleSideBar() {
appStore.toggleSidebar();
}
</script>
<template>
<!-- 顶部导航栏 -->
<div class="navbar">
<!-- 左侧面包屑 -->
<div class="flex">
<hamburger
:is-active="appStore.sidebar.opened"
@toggle-click="toggleSideBar"
/>
<breadcrumb />
</div>
<!-- 右侧导航设置 -->
<div class="flex">
<NavRight />
</div>
</div>
</template>
<style lang="scss" scoped>
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
background-color: #fff;
box-shadow: 0 0 1px #0003;
}
</style>