<script lang="ts" setup name="TopMenu">
import TopMenuItem from './topMenuItem.vue'
import useSettingsStore from '@/store/modules/settings'
import useMenuStore from '@/store/modules/menu'

const settingsStore = useSettingsStore()
const menuStore = useMenuStore()

const sidebarScrollTop = ref(0)

function onSidebarScroll(e: Event) {
  sidebarScrollTop.value = (e.target as HTMLElement).scrollTop
}
</script>

<template>
  <!-- 顶部模式-无主导航 -->
  <div class="top-menu-container">
    <el-menu
      mode="horizontal"
      background-color="#00000000"
      :default-active="$route.meta.activeMenu || $route.path"
      :collapse-transition="false"
      class="top-menu"
    >
      <template v-for="(route, index) in menuStore.sidebarMenus">
        <TopMenuItem v-if="route.meta.sidebar !== false" :key="route.path || index" :item="route" :base-path="route.path" :level="1" />
      </template>
    </el-menu>
  </div>
</template>

<style lang="scss" scoped>
.top-menu-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.top-menu {
  transition: border-color 0.3s, background-color 0.3s, color 0.3s, padding-top 0.3s;
  border: 0;

  &:not(.el-menu--collapse) {
    width: inherit;
  }
}
</style>