<script setup lang="ts">
import { useAppStore } from "@/store/modules/app";
import Fullscreen from "@/layout/components/Navbar/Fullscreen.vue";
import UserInfo from "@/layout/components/Navbar/UserInfo.vue";

const appStore = useAppStore();
/**
 * 左侧菜单栏显示/隐藏
 */
function toggleSideBar() {
  appStore.toggleSidebar(true);
}
</script>

<template>
  <!-- 顶部导航栏 -->
  <div class="navbar">
    <!-- 左侧面包屑 -->
    <div class="flex">
      <Hamburger
        :is-active="appStore.sidebar.opened"
        @toggle-click="toggleSideBar"
      />
      <Breadcrumb />
    </div>
    <!-- 右侧导航设置 -->
    <div class="flex">
      <!-- 导航栏设置(窄屏隐藏),全屏等-->
      <Fullscreen />
      <!-- 用户信息 -->
      <UserInfo />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  background: #ffffff;
  box-shadow: 0 0 10px #eee;
  position: relative;
  z-index: 10;
}
</style>
