<script setup lang="ts">
import type { NavbarItem } from '/@src/components/layouts/navbar/navbar.types'

// const pageTitle = useVueroContext<string>('page-title')

const links = ref<NavbarItem[]>([
  {
    id: 'price',
    type: 'link',
    to: '/app/priceManagement',
    label: '가격조사',
    icon: '',
  },
  {
    id: 'contract',
    type: 'link',
    to: '/app/contractManagement',
    label: '계약관리',
    icon: '',
  },
  // {
  //   id: 'document',
  //   type: 'link',
  //   to: '/app/documentManagement',
  //   label: '전표관리',
  //   icon: '',
  // },
  {
    id: 'payment',
    type: 'link',
    to: '/app/ApprovalManagement',
    label: '결재함',
    icon: '',
  },
])
</script>

<template>
  <NavbarLayout size="large" :links>
    <!-- Propagating the context to the default slot -->
    <template #default="context">
      <slot v-bind="context" />
    </template>

    <template #logo>
      <RouterLink
        to="/navbar/dashboards"
      >
        <AnimatedLogo
          width="38px"
          height="38px"
        />
      </RouterLink>
    </template>

    <template #title-mobile>
      <div class="is-flex is-align-items-center">
        <h1 class="title is-4">
          {{ pageTitle }}
        </h1>
      </div>
    </template>

    <template #toolbar>
      <ToolbarUserProfile right class="ml-2 is-hidden-mobile" />
    </template>

    <template #toolbar-mobile>
      <ToolbarUserProfile right />
    </template>

    <template #extra>
      <ClientOnly>
        <VReloadPrompt app-name="Vuero" />
      </ClientOnly>
    </template>
  </NavbarLayout>
</template>
