init
This commit is contained in:
yagnikvamja
@@ -0,0 +1,120 @@
|
||||
<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>
|
||||
41
javascript-version/layouts/components/Footer.vue
Normal file
41
javascript-version/layouts/components/Footer.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="h-100 d-flex align-center justify-md-space-between justify-center">
|
||||
<!-- 👉 Footer: left content -->
|
||||
<span class="d-flex align-center">
|
||||
©
|
||||
{{ new Date().getFullYear() }}
|
||||
Made With
|
||||
<VIcon
|
||||
icon="bx-heart"
|
||||
color="error"
|
||||
size="1.25rem"
|
||||
class="mx-1"
|
||||
/>
|
||||
By <a
|
||||
href="https://themeselection.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-primary ms-1"
|
||||
>ThemeSelection</a>
|
||||
</span>
|
||||
<!-- 👉 Footer: right content -->
|
||||
<span class="d-md-flex gap-x-4 text-primary d-none">
|
||||
<a
|
||||
href="https://themeselection.com/license/"
|
||||
target="noopener noreferrer"
|
||||
>License</a>
|
||||
<a
|
||||
href="https://themeselection.com/"
|
||||
target="noopener noreferrer"
|
||||
>More Themes</a>
|
||||
<a
|
||||
href="https://demos.themeselection.com/sneat-vuetify-vuejs-admin-template/documentation/"
|
||||
target="noopener noreferrer"
|
||||
>Documentation</a>
|
||||
<a
|
||||
href="https://themeselection.com/support/"
|
||||
target="noopener noreferrer"
|
||||
>Support</a>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
278
javascript-version/layouts/components/NavItems.vue
Normal file
278
javascript-version/layouts/components/NavItems.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<script setup>
|
||||
import VerticalNavSectionTitle from '@/@layouts/components/VerticalNavSectionTitle.vue'
|
||||
import VerticalNavGroup from '@layouts/components/VerticalNavGroup.vue'
|
||||
import VerticalNavLink from '@layouts/components/VerticalNavLink.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 👉 Dashboards -->
|
||||
<VerticalNavGroup
|
||||
:item="{
|
||||
title: 'Dashboards',
|
||||
badgeContent: '5',
|
||||
badgeClass: 'bg-error',
|
||||
icon: 'bx-home-smile',
|
||||
}"
|
||||
>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Analytics',
|
||||
to: '/dashboard',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'CRM',
|
||||
href: 'https://demos.themeselection.com/sneat-vuetify-nuxtjs-admin-template/demo-1/dashboards/crm',
|
||||
target: '_blank',
|
||||
badgeContent: 'Pro',
|
||||
badgeClass: 'bg-light-primary text-primary',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'ECommerce',
|
||||
href: 'https://demos.themeselection.com/sneat-vuetify-nuxtjs-admin-template/demo-1/dashboards/ecommerce',
|
||||
target: '_blank',
|
||||
badgeContent: 'Pro',
|
||||
badgeClass: 'bg-light-primary text-primary',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Academy',
|
||||
href: 'https://demos.themeselection.com/sneat-vuetify-nuxtjs-admin-template/demo-1/dashboards/academy',
|
||||
target: '_blank',
|
||||
badgeContent: 'Pro',
|
||||
badgeClass: 'bg-light-primary text-primary',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Logistics',
|
||||
href: 'https://demos.themeselection.com/sneat-vuetify-nuxtjs-admin-template/demo-1/dashboards/logistics',
|
||||
target: '_blank',
|
||||
badgeContent: 'Pro',
|
||||
badgeClass: 'bg-light-primary text-primary',
|
||||
}"
|
||||
/>
|
||||
</VerticalNavGroup>
|
||||
|
||||
<!-- 👉 Front Pages -->
|
||||
<VerticalNavGroup
|
||||
:item="{
|
||||
title: 'Front Pages',
|
||||
icon: 'bx-file',
|
||||
badgeContent: 'Pro',
|
||||
badgeClass: 'bg-light-primary text-primary',
|
||||
}"
|
||||
>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Landing',
|
||||
href: 'https://demos.themeselection.com/sneat-vuetify-nuxtjs-admin-template/demo-1/front-pages/landing-page',
|
||||
target: '_blank',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Pricing',
|
||||
href: 'https://demos.themeselection.com/sneat-vuetify-nuxtjs-admin-template/demo-1/front-pages/pricing',
|
||||
target: '_blank',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Payment',
|
||||
href: 'https://demos.themeselection.com/sneat-vuetify-nuxtjs-admin-template/demo-1/front-pages/payment',
|
||||
target: '_blank',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Checkout',
|
||||
href: 'https://demos.themeselection.com/sneat-vuetify-nuxtjs-admin-template/demo-1/front-pages/checkout',
|
||||
target: '_blank',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Help Center',
|
||||
href: 'https://demos.themeselection.com/sneat-vuetify-nuxtjs-admin-template/demo-1/front-pages/help-center',
|
||||
target: '_blank',
|
||||
}"
|
||||
/>
|
||||
</VerticalNavGroup>
|
||||
|
||||
<!-- 👉 Apps & Pages -->
|
||||
<VerticalNavSectionTitle
|
||||
:item="{
|
||||
heading: 'Apps & Pages',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Email',
|
||||
icon: 'bx-envelope',
|
||||
href: 'https://demos.themeselection.com/sneat-vuetify-nuxtjs-admin-template/demo-1/apps/email',
|
||||
target: '_blank',
|
||||
badgeContent: 'Pro',
|
||||
badgeClass: 'bg-light-primary text-primary',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Chat',
|
||||
icon: 'bx-chat',
|
||||
href: 'https://demos.themeselection.com/sneat-vuetify-nuxtjs-admin-template/demo-1/apps/chat',
|
||||
target: '_blank',
|
||||
badgeContent: 'Pro',
|
||||
badgeClass: 'bg-light-primary text-primary',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Calendar',
|
||||
icon: 'bx-calendar',
|
||||
href: 'https://demos.themeselection.com/sneat-vuetify-nuxtjs-admin-template/demo-1/apps/calendar',
|
||||
target: '_blank',
|
||||
badgeContent: 'Pro',
|
||||
badgeClass: 'bg-light-primary text-primary',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Kanban',
|
||||
icon: 'bx-grid',
|
||||
href: 'https://demos.themeselection.com/sneat-vuetify-nuxtjs-admin-template/demo-1/apps/kanban',
|
||||
target: '_blank',
|
||||
badgeContent: 'Pro',
|
||||
badgeClass: 'bg-light-primary text-primary',
|
||||
}"
|
||||
/>
|
||||
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Account Settings',
|
||||
icon: 'bx-user',
|
||||
to: '/account-settings',
|
||||
}"
|
||||
/>
|
||||
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Login',
|
||||
icon: 'bx-log-in',
|
||||
to: '/login',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Register',
|
||||
icon: 'bx-user-plus',
|
||||
to: '/register',
|
||||
}"
|
||||
/>
|
||||
|
||||
<!-- 👉 User Interface -->
|
||||
<VerticalNavSectionTitle
|
||||
:item="{
|
||||
heading: 'User Interface',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Typography',
|
||||
icon: 'bx-text',
|
||||
to: '/typography',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Icons',
|
||||
icon: 'bx-package',
|
||||
to: '/icons',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Cards',
|
||||
icon: 'bx-credit-card',
|
||||
to: '/cards',
|
||||
}"
|
||||
/>
|
||||
|
||||
<!-- 👉 Forms & Tables -->
|
||||
<VerticalNavSectionTitle
|
||||
:item="{
|
||||
heading: 'Forms & Tables',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Form Layouts',
|
||||
icon: 'bx-layout',
|
||||
to: '/form-layouts',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Form Validation',
|
||||
icon: 'bx-check-circle',
|
||||
href: 'https://demos.themeselection.com/sneat-vuetify-nuxtjs-admin-template/demo-1/forms/form-validation',
|
||||
target: '_blank',
|
||||
badgeContent: 'Pro',
|
||||
badgeClass: 'bg-light-primary text-primary',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Form Wizard',
|
||||
icon: 'bx-align-middle',
|
||||
href: 'https://demos.themeselection.com/sneat-vuetify-nuxtjs-admin-template/demo-1/forms/form-wizard-numbered',
|
||||
target: '_blank',
|
||||
badgeContent: 'Pro',
|
||||
badgeClass: 'bg-light-primary text-primary',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Tables',
|
||||
icon: 'bx-table',
|
||||
to: '/tables',
|
||||
}"
|
||||
/>
|
||||
|
||||
<!-- 👉 Others -->
|
||||
<VerticalNavSectionTitle
|
||||
:item="{
|
||||
heading: 'Others',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Access Control',
|
||||
icon: 'bx-command',
|
||||
href: 'https://demos.themeselection.com/sneat-vuetify-nuxtjs-admin-template/demo-1/access-control',
|
||||
target: '_blank',
|
||||
badgeContent: 'Pro',
|
||||
badgeClass: 'bg-light-primary text-primary',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Documentation',
|
||||
icon: 'bx-file',
|
||||
href: 'https://demos.themeselection.com/sneat-vuetify-vuejs-admin-template/documentation/',
|
||||
target: '_blank',
|
||||
}"
|
||||
/>
|
||||
<VerticalNavLink
|
||||
:item="{
|
||||
title: 'Raise Support',
|
||||
href: 'https://github.com/themeselection/sneat-vuetify-nuxtjs-admin-template-free/issues',
|
||||
icon: 'bx-phone',
|
||||
target: '_blank',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup>
|
||||
const themes = [
|
||||
{
|
||||
name: 'light',
|
||||
icon: 'bx-sun',
|
||||
},
|
||||
{
|
||||
name: 'dark',
|
||||
icon: 'bx-moon',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ThemeSwitcher :themes="themes" />
|
||||
</template>
|
||||
129
javascript-version/layouts/components/UserProfile.vue
Normal file
129
javascript-version/layouts/components/UserProfile.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VBadge
|
||||
dot
|
||||
location="bottom right"
|
||||
offset-x="3"
|
||||
offset-y="3"
|
||||
color="success"
|
||||
bordered
|
||||
>
|
||||
<VAvatar
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
>
|
||||
<VImg :src="avatar1" />
|
||||
|
||||
<!-- SECTION Menu -->
|
||||
<VMenu
|
||||
activator="parent"
|
||||
width="230"
|
||||
location="bottom end"
|
||||
offset="14px"
|
||||
>
|
||||
<VList>
|
||||
<!-- 👉 User Avatar & Name -->
|
||||
<VListItem>
|
||||
<template #prepend>
|
||||
<VListItemAction start>
|
||||
<VBadge
|
||||
dot
|
||||
location="bottom right"
|
||||
offset-x="3"
|
||||
offset-y="3"
|
||||
color="success"
|
||||
>
|
||||
<VAvatar
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
>
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="font-weight-semibold">
|
||||
John Doe
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle>Admin</VListItemSubtitle>
|
||||
</VListItem>
|
||||
<VDivider class="my-2" />
|
||||
|
||||
<!-- 👉 Profile -->
|
||||
<VListItem link>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
class="me-2"
|
||||
icon="bx-user"
|
||||
size="22"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemTitle>Profile</VListItemTitle>
|
||||
</VListItem>
|
||||
|
||||
<!-- 👉 Settings -->
|
||||
<VListItem link>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
class="me-2"
|
||||
icon="bx-cog"
|
||||
size="22"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemTitle>Settings</VListItemTitle>
|
||||
</VListItem>
|
||||
|
||||
<!-- 👉 Pricing -->
|
||||
<VListItem link>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
class="me-2"
|
||||
icon="bx-dollar"
|
||||
size="22"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemTitle>Pricing</VListItemTitle>
|
||||
</VListItem>
|
||||
|
||||
<!-- 👉 FAQ -->
|
||||
<VListItem link>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
class="me-2"
|
||||
icon="bx-help-circle"
|
||||
size="22"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemTitle>FAQ</VListItemTitle>
|
||||
</VListItem>
|
||||
|
||||
<!-- Divider -->
|
||||
<VDivider class="my-2" />
|
||||
|
||||
<!-- 👉 Logout -->
|
||||
<VListItem to="/login">
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
class="me-2"
|
||||
icon="bx-log-out"
|
||||
size="22"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemTitle>Logout</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
<!-- !SECTION -->
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</template>
|
||||
Reference in New Issue
Block a user