121 lines
2.9 KiB
Vue
121 lines
2.9 KiB
Vue
<script setup>
|
|
import NavItems from '@/layouts/components/NavItems.vue'
|
|
import logo from '@images/logo.svg?raw'
|
|
import VerticalNavLayout from '@layouts/components/VerticalNavLayout.vue'
|
|
import Footer from '@/layouts/components/Footer.vue'
|
|
import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
|
|
import UserProfile from '@/layouts/components/UserProfile.vue'
|
|
</script>
|
|
|
|
<template>
|
|
<VerticalNavLayout>
|
|
<!-- 👉 navbar -->
|
|
<template #navbar="{ toggleVerticalOverlayNavActive }">
|
|
<div class="d-flex h-100 align-center">
|
|
<!-- 👉 Vertical nav toggle in overlay mode -->
|
|
<IconBtn
|
|
class="ms-n3 d-lg-none"
|
|
@click="toggleVerticalOverlayNavActive(true)"
|
|
>
|
|
<VIcon icon="bx-menu" />
|
|
</IconBtn>
|
|
|
|
<!-- 👉 Search -->
|
|
<div
|
|
class="d-flex align-center cursor-pointer ms-lg-n3"
|
|
style="user-select: none;"
|
|
>
|
|
<!-- 👉 Search Trigger button -->
|
|
<IconBtn>
|
|
<VIcon icon="bx-search" />
|
|
</IconBtn>
|
|
|
|
<span class="d-none d-md-flex align-center text-disabled ms-2">
|
|
<span class="me-2">Search</span>
|
|
<span class="meta-key">⌘K</span>
|
|
</span>
|
|
</div>
|
|
|
|
<VSpacer />
|
|
|
|
<IconBtn
|
|
href="https://github.com/themeselection/sneat-vuetify-nuxtjs-admin-template-free"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<VIcon icon="bxl-github" />
|
|
</IconBtn>
|
|
|
|
<IconBtn>
|
|
<VIcon icon="bx-bell" />
|
|
</IconBtn>
|
|
|
|
<NavbarThemeSwitcher class="me-1" />
|
|
|
|
<UserProfile />
|
|
</div>
|
|
</template>
|
|
|
|
<template #vertical-nav-header="{ toggleIsOverlayNavActive }">
|
|
<NuxtLink
|
|
to="/"
|
|
class="app-logo app-title-wrapper"
|
|
>
|
|
<!-- eslint-disable vue/no-v-html -->
|
|
<div
|
|
class="d-flex"
|
|
v-html="logo"
|
|
/>
|
|
<!-- eslint-enable -->
|
|
|
|
<h1 class="app-logo-title">
|
|
sneat
|
|
</h1>
|
|
</NuxtLink>
|
|
|
|
<IconBtn
|
|
class="d-block d-lg-none"
|
|
@click="toggleIsOverlayNavActive(false)"
|
|
>
|
|
<VIcon icon="bx-x" />
|
|
</IconBtn>
|
|
</template>
|
|
|
|
<template #vertical-nav-content>
|
|
<NavItems />
|
|
</template>
|
|
|
|
<!-- 👉 Pages -->
|
|
<slot />
|
|
|
|
<!-- 👉 Footer -->
|
|
<template #footer>
|
|
<Footer />
|
|
</template>
|
|
</VerticalNavLayout>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.meta-key {
|
|
border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
|
|
border-radius: 6px;
|
|
block-size: 1.5625rem;
|
|
line-height: 1.3125rem;
|
|
padding-block: 0.125rem;
|
|
padding-inline: 0.25rem;
|
|
}
|
|
|
|
.app-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 0.75rem;
|
|
|
|
.app-logo-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 500;
|
|
line-height: 1.75rem;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
</style>
|