tes
This commit is contained in:
@@ -1,8 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, shallowRef, watch } from 'vue';
|
||||
import { useDisplay } from "vuetify";
|
||||
import sidebarItems from "@/components/layout/full/vertical-sidebar/sidebarItem";
|
||||
import { Menu2Icon } from "vue-tabler-icons";
|
||||
//import sidebarItems from "full/vertical-sidebar/sidebarItem";
|
||||
import { Menu2Icon,HelpIcon,ChevronDownIcon } from "vue-tabler-icons";
|
||||
//import { LayoutFullVerticalHeaderNavigations } from '#components';
|
||||
//import { LayoutFullVerticalHeaderRightMobileSidebar } from '~/.nuxt/components';
|
||||
|
||||
|
||||
const props = defineProps({ items: { type: Object } })
|
||||
const sidebarMenu = ref('');
|
||||
|
||||
@@ -60,8 +64,34 @@ watch([mdAndDown, () => props.items], ([mdVal, items]) => {
|
||||
<LayoutFullVerticalHeaderNotificationDD />
|
||||
</div>
|
||||
<div>
|
||||
<v-menu :close-on-content-click="true" class="mobile_popup">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon class="hidden-md-and-up custom-hover-primary" color="primary" variant="text" v-bind="props" size="small">
|
||||
<Icon icon="solar:menu-dots-bold-duotone" height="22" />
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-sheet rounded="lg" elevation="10" class="mt-4 dropdown-box px-4 py-3">
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<LayoutFullVerticalHeaderRightMobileSidebar />
|
||||
<LayoutFullVerticalHeaderNotificationDD />
|
||||
<v-btn icon variant="text" class="mr-sm-3 mr-2 custom-hover-primary" to="/ecommerce/checkout" size="small">
|
||||
<v-badge color="primary" content="0" offset-x="-4" offset-y="-6">
|
||||
<Icon icon="solar:cart-large-2-outline" height="22" />
|
||||
</v-badge>
|
||||
</v-btn>
|
||||
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-menu>
|
||||
</div>
|
||||
<div>
|
||||
<!-- <LayoutFullVerticalHeaderRightMobileSidebar /> -->
|
||||
<LayoutFullVerticalHeaderNavigations />
|
||||
<LayoutFullVerticalHeaderProfileDD />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</v-app-bar>
|
||||
|
||||
<
|
||||
</template>
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
const dark = ref(false);
|
||||
</script>
|
||||
<template>
|
||||
<LayoutFullLogoDark />
|
||||
<LayoutFullLogoLight v-if="dark"/>
|
||||
<LayoutFullLogoDark v-else/>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import Logoimg from "/images/logos/logo.svg";
|
||||
import Logoimg from "~/assets/images/logos/dark-logo.svg";
|
||||
</script>
|
||||
<template>
|
||||
<div class="logo">
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import Logoimg from "~/assets/images/logos/light-logo.svg";
|
||||
</script>
|
||||
<template>
|
||||
<div class="logo">
|
||||
<NuxtLink to="/">
|
||||
<img :src="Logoimg" alt="home" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import {appsLink} from '~/_mockApis/headerData';
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
<template>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- apps link -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<v-row>
|
||||
<v-col cols="12" md="6" v-for="(item, i) in appsLink" :key="i">
|
||||
<router-link :to="item.href" class="text-decoration-none custom-text-primary">
|
||||
<div class="d-flex align-center">
|
||||
<v-avatar size="45" :color=" 'light' + item.color" rounded="md">
|
||||
<Icon :icon="'solar:' + item.avatar" height="24" :class="'text-' + item.color"/>
|
||||
</v-avatar>
|
||||
<div class="ml-3">
|
||||
<h6 class="text-subtitle-1 mb-1 heading custom-title">{{ item.title }}</h6>
|
||||
<p class="text-subtitle-2 textSecondary">{{ item.subtext }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
//import QuickLinks from './QuickLinks';
|
||||
import AppsLink from './AppsLink.vue';
|
||||
import { HelpIcon,ChevronDownIcon } from 'vue-tabler-icons';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- mega menu DD -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<v-menu open-on-hover :close-on-content-click="false">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn class="hidden-sm-and-down" rounded="sm" variant="text" color="primary" v-bind="props"> Apps <ChevronDownIcon size="16" class="mt-1 ml-1" /> </v-btn>
|
||||
</template>
|
||||
<v-sheet width="900" height="382" elevation="10" rounded="md" class="pa-4 pb-0">
|
||||
<div>
|
||||
<v-row>
|
||||
<v-col cols="12" lg="8" class="d-flex py-0">
|
||||
<div class="pa-4 pb-0 pr-0">
|
||||
<AppsLink />
|
||||
<v-divider class="mt-6"></v-divider>
|
||||
<div class="pa-5 pl-0">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<router-link to="/" class="text-decoration-none d-flex align-center">
|
||||
<HelpIcon size="20" stroke-width="1.5" class="text-hover-primary" />
|
||||
<h6 class="text-subtitle-1 font-weight-bold text-hover-primary ml-2">Frequently Asked Questions</h6>
|
||||
</router-link>
|
||||
<v-btn color="primary" variant="flat">Check</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-divider vertical></v-divider>
|
||||
</v-col>
|
||||
<v-col cols="12" lg="4" class="py-0">
|
||||
<div class="pa-4">
|
||||
<h5 class="text-h5">Quick Links</h5>
|
||||
<!-- <QuickLinks /> -->
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-menu>
|
||||
<v-btn variant="text" color="primary">Chat </v-btn>
|
||||
<v-btn variant="text" color="primary">Calendar </v-btn>
|
||||
<v-btn variant="text" color="primary">Email </v-btn>
|
||||
</template>
|
||||
@@ -0,0 +1,59 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { AppsIcon, CalendarIcon, MailIcon, MessagesIcon } from 'vue-tabler-icons';
|
||||
import AppsLink from './AppsLink.vue';
|
||||
//import QuickLinks from './QuickLinks.vue';
|
||||
|
||||
const open = ref(['Apps']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pt-6">
|
||||
<h5 class="text-h5 mb-4 px-5">Navigation</h5>
|
||||
<v-list v-model:opened="open" class="right-sidebar">
|
||||
<v-list-group value="Apps">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item v-bind="props">
|
||||
<template v-slot:prepend>
|
||||
<AppsIcon width="21" stroke-width="1.5" />
|
||||
</template>
|
||||
<h5 class="text-subtitle-1 ml-2">Apps</h5>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<v-list-item class="pl-6 pb-6">
|
||||
<div>
|
||||
<AppsLink />
|
||||
</div>
|
||||
</v-list-item>
|
||||
</v-list-group>
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<MessagesIcon width="21" stroke-width="1.5" />
|
||||
</template>
|
||||
<h5 class="text-subtitle-1 ml-2">Chats</h5>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<CalendarIcon width="21" stroke-width="1.5" />
|
||||
</template>
|
||||
<h5 class="text-subtitle-1 ml-2">Calendar</h5>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<MailIcon width="21" stroke-width="1.5" />
|
||||
</template>
|
||||
<h5 class="text-subtitle-1 ml-2">Mail</h5>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<div class="px-5">
|
||||
<h5 class="text-h5 my-4">Quick Links</h5>
|
||||
<!-- <QuickLinks /> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.right-sidebar .v-list-group__items .v-list-item {
|
||||
padding-inline-start: 26px !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user