DefaultLayoutWithHorizontalNav.vue 1.55 KB
<script lang="ts" setup>
import { HorizontalNavLayout } from '@layouts'
import navItems from '@/navigation/horizontal'

// Components
import Footer from '@/layouts/components/Footer.vue'
import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
import UserProfile from '@/layouts/components/UserProfile.vue'
</script>

<template>
  <HorizontalNavLayout :nav-items="navItems">
    <!-- 👉 navbar -->
    <template #navbar>
      <NuxtLink
        to="/"
        class="d-flex align-start gap-x-4"
      >
        <!-- <VNodeRenderer :nodes="themeConfig.app.logo" /> -->
        <div style="display: inline-flex; align-items: center; gap: 8px;">
          <img
            src="@images/naput/logo-UI.png"
            alt="Logo UI"
            width="35"
            height="auto"
          >
          <h1 style="font-size: 1.25rem; margin-inline-start: 10px; text-transform: uppercase;">
            CIVITAS UI
          </h1>
        </div>
      </NuxtLink>
      <VSpacer />

      <!-- <NavSearchBar /> -->

      <!--
        <NavBarI18n
        v-if="themeConfig.app.i18n.enable && themeConfig.app.i18n.langConfig?.length"
        :languages="themeConfig.app.i18n.langConfig"
        />
      -->

      <NavbarThemeSwitcher />
      <!-- <NavbarShortcuts /> -->
      <!-- <NavBarNotifications class="me-2" /> -->
      <UserProfile />
    </template>

    <!-- 👉 Pages -->
    <slot />

    <!-- 👉 Footer -->
    <template #footer>
      <Footer />
    </template>

    <!-- 👉 Customizer -->
    <TheCustomizer />
  </HorizontalNavLayout>
</template>