rustfs-console/components/sidebar.vue

<script lang="ts" setup>
import { RouterLink } from 'vue-router'
import { useSidebarStore } from '~/store/sidebar'
const appConfig = useAppConfig()
const sidebarStore = useSidebarStore()
const isCollapsed = computed(() => sidebarStore.isCollapsed)

const toggleSidebar = () => {
  sidebarStore.toggleSidebar()
}

const options = computed(() => {
  return appConfig.navs.map(
    (nav: {
      label: string
      to?: string
      icon?: string
      target?: string
      children?: {
        label: string
        to: string
        icon?: string
      }[]
    }) => {
      let item: {
        key: string
        label: () => string | VNode
        icon?: () => VNode
        children?: any[]
      } = {
        key: nav.label,
        label: () =>
          nav.to
            ? nav.target
              ? h(
                  'a',
                  {
                    href: nav.to,
                    target: '_blank'
                  },
                  { default: () => nav.label }
                )
              : h(RouterLink, { to: nav.to }, { default: () => nav.label })
            : nav.label,
        icon: nav.icon ? iconRender(nav.icon) : undefined
      }

      if (nav['children']) {
        item.children = nav['children'].map((child) => {
          return {
            key: child.label,
            type: 'item',
            label: () =>
              h(RouterLink, { to: child.to }, { default: () => child.label }),
            icon: child.icon ? iconRender(child.icon) : undefined
          }
        })
      }

      return item
    }
  )
})
</script>
<template>
  <n-layout-sider
    bordered
    class="min-h-full"
    collapse-mode="width"
    :collapsed-width="64"
    :width="240"
    :native-scrollbar="false"
    :collapsed="isCollapsed">
    <div class="flex flex-col h-screen overflow-hidden gap-4 relative">
      <div
        class="border-b dark:border-neutral-800 flex flex-wrap h-16 items-center p-4"
        :class="isCollapsed ? 'justify-center' : 'justify-between'">
        <div>
          <n-avatar
            v-if="isCollapsed"
            class="text-center text-2xl leading-none">
            {{ appConfig.name.substring(0, 1) }}
          </n-avatar>
          <h2 v-else class="text-center text-2xl">
            <img src="~/assets/logo.svg" class="max-w-28" alt="" />
            <span class="sr-only">{{ appConfig.name }}</span>
          </h2>
        </div>
        <div v-if="!isCollapsed" class="px-4 flex items-center -mr-4">
          <Icon
            name="ri:menu-fold-fill"
            class="cursor-pointer text-xl"
            @click="toggleSidebar" />
        </div>
      </div>

      <div class="overflow-y-auto flex-1">
        <n-menu
          :indent="26"
          :root-indent="12"
          :collapsed-width="64"
          :collapsed-icon-size="22"
          :options="options"
          default-expand-all
          class="flex-1" />
      </div>

      <div
        v-if="isCollapsed"
        class="w-full flex items-center justify-center py-4">
        <Icon
          name="ri:menu-unfold-fill"
          class="cursor-pointer text-xl"
          @click="toggleSidebar" />
      </div>

      <div v-if="!isCollapsed" class="flex flex-col p-4 text-gray-500">
        <div class="flex items-center gap-2">
          <Icon name="ri-server-line" />
          <span>当前版本: v0.0.1</span>
        </div>
        <div class="flex items-center gap-2">
          <Icon name="ri-calendar-line" />
          <span>构建日期：2024-12-01</span>
        </div>
        <div class="flex items-center gap-2">
          <Icon name="ri-verified-badge-line" />
          <span>授权协议：商业初级版</span>
        </div>
      </div>

      <div class="p-4 sticky bottom-0 left-0 right-0">
        <UserDropdown :isCollapsed="isCollapsed" />
      </div>
    </div>
  </n-layout-sider>
</template>