first commit

components/layout/full/Main.vue

@@ -0,0 +1,65 @@
+<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 { useCustomizerStore } from "~/store/customizer";
+const sidebarMenu = shallowRef(sidebarItems);
+const customizer = useCustomizerStore();
+const { mdAndDown } = useDisplay();
+const sDrawer = ref(true);
+onMounted(() => {
+  sDrawer.value = !mdAndDown.value; // hide on mobile, show on desktop
+});
+watch(mdAndDown, (val) => {
+  sDrawer.value = !val;
+});
+</script>
+
+<template>
+  <!------Sidebar-------->
+  <v-locale-provider>
+    <v-app
+      :theme="customizer.actTheme"
+      class="bg-containerBg"
+      :class="[
+        customizer.actTheme,
+        customizer.mini_sidebar ? 'mini-sidebar' : '',
+        customizer.setHorizontalLayout ? 'horizontalLayout' : 'verticalLayout',
+        customizer.setBorderCard ? 'cardBordered' : ''
+      ]"
+    >
+      <!---Customizer location left side--->
+      <v-navigation-drawer
+        app
+        temporary
+        elevation="10"
+        location="left"
+        v-model="customizer.Customizer_drawer"
+        width="320"
+        class="left-customizer"
+      >
+        <Customizer />
+      </v-navigation-drawer>
+      <LazyLayoutFullVerticalSidebar v-if="!customizer.setHorizontalLayout" />
+      <div :class="customizer.boxed ? 'maxWidth' : 'full-header'">
+        <LazyLayoutFullVerticalHeader v-if="!customizer.setHorizontalLayout" />
+      </div>
+
+      <v-main class="ml-md-4">
+        <div class="rtl-lyt mb-3 hr-layout bg-containerBg">
+          <v-container
+            fluid
+            class="page-wrapper bg-background pt-md-8 rounded-xl"
+          >
+            <div>
+              <div class="">
+                <NuxtPage />
+              </div>
+            </div>
+          </v-container>
+        </div>
+      </v-main>
+    </v-app>
+  </v-locale-provider>
+</template>

components/layout/full/customizer/Customizer.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTheme } from 'vuetify';
+import { useCustomizerStore } from '~/store/customizer';
+import {
+    CheckIcon,
+    LayoutColumnsIcon,
+    LayoutDistributeHorizontalIcon,
+    LayoutDistributeVerticalIcon,
+    LayoutNavbarIcon,
+    LayoutSidebarLeftCollapseIcon,
+TextDirectionLtrIcon,
+TextDirectionRtlIcon
+} from 'vue-tabler-icons';
+
+const theme = useTheme();
+const customizer = useCustomizerStore();
+
+// template skin color options
+const themeColors = ref([
+    {
+        name: 'BLUE_THEME',
+        bg: 'themeBlue'
+    },
+    {
+        name: 'AQUA_THEME',
+        bg: 'themeAqua'
+    },
+    {
+        name: 'PURPLE_THEME',
+        bg: 'themePurple'
+    },
+    {
+        name: 'GREEN_THEME',
+        bg: 'themeGreen'
+    },
+    {
+        name: 'CYAN_THEME',
+        bg: 'themeCyan'
+    },
+    {
+        name: 'ORANGE_THEME',
+        bg: 'themeOrange'
+    }
+]);
+
+// Dark Theme Colors
+const DarkthemeColors = ref([
+    { name: 'DARK_BLUE_THEME', bg: 'themeDarkBlue' },
+    { name: 'DARK_AQUA_THEME', bg: 'themeDarkAqua' },
+    { name: 'DARK_PURPLE_THEME', bg: 'themeDarkPurple' },
+    { name: 'DARK_GREEN_THEME', bg: 'themeDarkGreen' },
+    { name: 'DARK_CYAN_THEME', bg: 'themeDarkCyan' },
+    { name: 'DARK_ORANGE_THEME', bg: 'themeDarkOrange' }
+]);
+</script>
+
+<!------------------------------------->
+<!-- Customizer -->
+<!------------------------------------->
+<template>
+        <div class="pa-6">
+            <h5 class="text-h5">Settings</h5>
+        </div>
+        <v-divider></v-divider>
+        <perfect-scrollbar style="height: calc(100vh - 90px)">
+            <div class="pa-6">
+                <h6 class="text-h6 mb-2">Sidebar Layout</h6>
+                <v-btn-toggle v-model="customizer.setHorizontalLayout" color="primary" class="my-2 btn-group-custom  gap-3" rounded="0" group>
+                    <v-btn :value="false" variant="text" elevation="9" class="rounded-md">
+                        <LayoutColumnsIcon stroke-width="1.5" size="21" class="mr-2 icon" /> Vertical
+                    </v-btn>
+                    <v-btn :value="true" variant="text" elevation="9" class="rounded-md">
+                        <LayoutNavbarIcon stroke-width="1.5" size="21" class="mr-2 icon" /> Horizontal
+                    </v-btn>
+                </v-btn-toggle>
+
+                <!------Template Direction------>
+
+                <h6 class="text-h6 mt-8 mb-5">Template Color</h6>
+                <v-item-group mandatory v-model="customizer.actTheme" class="ml-n2 v-row">
+                    <v-col cols="4" v-for="theme in themeColors" :key="theme.name" class="pa-2">
+                        <v-item v-slot="{ isSelected, toggle }" :value="theme.name">
+                            <v-sheet
+                                rounded="md"
+                                class="border cursor-pointer d-block text-center px-5 py-4 hover-btns"
+                                elevation="9"
+                                @click="toggle"
+                            >
+                                <v-avatar :class="theme.bg" size="25" variant="text">
+                                    <CheckIcon color="white" size="18" v-if="isSelected" />
+                                </v-avatar>
+                            </v-sheet>
+                        </v-item>
+                    </v-col>
+                </v-item-group>
+                <h6 class="text-h6 mt-11 mb-5">Template Dark Color</h6>
+                <v-item-group mandatory v-model="customizer.actTheme" class="ml-n2 v-row">
+                    <v-col cols="4" v-for="theme in DarkthemeColors" :key="theme.name" class="pa-2">
+                        <v-item v-slot="{ isSelected, toggle }" :value="theme.name">
+                            <v-sheet
+                                rounded="md"
+                                class="border cursor-pointer d-block text-center px-5 py-4 hover-btns"
+                                elevation="9"
+                                @click="toggle"
+                            >
+                                <v-avatar :class="theme.bg" size="25">
+                                    <CheckIcon color="white" size="18" v-if="isSelected" />
+                                </v-avatar>
+                            </v-sheet>
+                        </v-item>
+                    </v-col>
+                </v-item-group>
+                <h6 class="text-h6 mt-11 mb-2">Container Option</h6>
+                <v-btn-toggle v-model="customizer.boxed" color="primary" class="my-2 btn-group-custom gap-3" rounded="0" group>
+                    <v-btn :value="true" variant="text" elevation="9" class="rounded-md">
+                        <LayoutDistributeVerticalIcon stroke-width="1.5" size="21" class="mr-2 icon" />
+                        Boxed
+                    </v-btn>
+                    <v-btn :value="false" variant="text" elevation="9" class="rounded-md ">
+                        <LayoutDistributeHorizontalIcon stroke-width="1.5" size="21" class="mr-2 icon" />
+                        Full
+                    </v-btn>
+                </v-btn-toggle>
+                <!---Horizontal demo hide this option --->
+                <v-sheet v-if="customizer.setHorizontalLayout != true">
+                <h6 class="text-h6 mt-11 mb-2">Sidebar Type</h6>
+                <v-btn-toggle v-model="customizer.mini_sidebar" color="primary" class="my-2 btn-group-custom gap-3" rounded="0" group>
+                    <v-btn :value="false" variant="text" elevation="9" class="rounded-md">
+                        <LayoutSidebarIcon stroke-width="1.5" size="21" class="mr-2 icon" />
+                        Full
+                    </v-btn>
+                    <v-btn :value="true" variant="text" elevation="9" class="rounded-md">
+                        <LayoutSidebarLeftCollapseIcon stroke-width="1.5" size="21" class="mr-2 icon" />
+                        Collapse
+                    </v-btn>
+                </v-btn-toggle>
+                </v-sheet>
+                <h6 class="text-h6 mt-11 mb-2">Card with</h6>
+                <v-btn-toggle v-model="customizer.setBorderCard" color="primary" class="my-2 btn-group-custom gap-3" rounded="0" group>
+                    <v-btn :value="false" variant="text" elevation="9" class="rounded-md">
+                        <LayoutSidebarLeftCollapseIcon stroke-width="1.5" size="21" class="mr-2 icon" />
+                        Shadow
+                    </v-btn>
+                    <v-btn :value="true" variant="text" elevation="9" class="rounded-md">
+                        <LayoutSidebarIcon stroke-width="1.5" size="21" class="mr-2 icon" />
+                        Border
+                    </v-btn>
+                </v-btn-toggle>
+            </div>
+        </perfect-scrollbar>
+</template>
+
+<style lang="scss"></style>

components/layout/full/logo/Logo.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { computed } from 'vue';
+import { useCustomizerStore } from '~/store/customizer';
+
+const customizer = useCustomizerStore();
+
+//const dark = ref(false);
+const dark = computed(() => {
+    if (
+        customizer.actTheme === 'DARK_BLUE_THEME' ||
+        customizer.actTheme === 'DARK_AQUA_THEME' ||
+        customizer.actTheme === 'DARK_ORANGE_THEME' ||
+        customizer.actTheme === 'DARK_PURPLE_THEME' ||
+        customizer.actTheme === 'DARK_GREEN_THEME' ||
+        customizer.actTheme === 'DARK_CYAN_THEME'
+    ) {
+        return true;
+    } else {
+        return false;
+    }
+});
+</script>
+<template>
+    <LayoutFullLogoLight v-if="dark" />
+    <LayoutFullLogoDark v-else />
+</template>

components/layout/full/logo/LogoDark.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Logoimg from "/images/logos/dark-logo.svg";
+</script>
+<template>
+  <div class="logo">
+    <NuxtLink to="/">
+      <img :src="Logoimg" alt="home" />
+    </NuxtLink>
+  </div>
+</template>

components/layout/full/logo/LogoLight.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Logoimg from "/images/logos/light-logo.svg";
+</script>
+<template>
+  <div class="logo">
+    <NuxtLink to="/">
+      <img :src="Logoimg" alt="home" />
+    </NuxtLink>
+  </div>
+</template>

components/layout/full/vertical-header/AppsLink.vue

@@ -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>

components/layout/full/vertical-header/LanguageDD.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { languageDD } from '@/_mockApis/headerData';
+import flag1 from '~/assets/images/flag/icon-flag-en.svg';
+import flag2 from '~/assets/images/flag/icon-flag-ro.svg';
+import flag3 from '~/assets/images/flag/icon-flag-zh.svg';
+import flag4 from '~/assets/images/flag/icon-flag-fr.svg';
+</script>
+<template>
+    <!-- ---------------------------------------------- -->
+    <!-- language DD -->
+    <!-- ---------------------------------------------- -->
+    <v-menu open-on-hover open-on-click>
+        <template v-slot:activator="{ props }">
+            <v-btn icon class="custom-hover-primary" size="small" variant="text" color="primary" v-bind="props">
+                <v-avatar size="20">
+                    <img v-if="$i18n.locale === 'en'" :src="flag1" :alt="$i18n.locale" width="22" height="22" class="obj-cover" />
+                    <img v-if="$i18n.locale === 'fr'" :src="flag4" :alt="$i18n.locale" width="22" height="22" class="obj-cover" />
+                    <img v-if="$i18n.locale === 'ro'" :src="flag2" :alt="$i18n.locale" width="22" height="22" class="obj-cover" />
+                    <img v-if="$i18n.locale === 'zh'" :src="flag3" :alt="$i18n.locale" width="22" height="22" class="obj-cover" />
+                </v-avatar>
+            </v-btn>
+        </template>
+        <v-sheet rounded="md" width="200" elevation="10">
+            <v-list class="theme-list">
+                <v-list-item
+                    v-for="(item, index) in languageDD"
+                    :key="index"
+                    color="primary"
+                    :active="$i18n.locale == item.value"
+                    class="d-flex align-center"
+                    @click="() => ($i18n.locale = item.value)"
+                >
+                    <template v-slot:prepend>
+                        <v-avatar size="22">
+                            <img :src="item.avatar" :alt="item.avatar" width="22" height="22" class="obj-cover" />
+                        </v-avatar>
+                    </template>
+                    <v-list-item-title class="text-subtitle-1 font-weight-regular">
+                        {{ item.title }}
+                        <span class="text-disabled text-subtitle-1 pl-2">({{ item.subtext }})</span>
+                    </v-list-item-title>
+                </v-list-item>
+            </v-list>
+        </v-sheet>
+    </v-menu>
+</template>

components/layout/full/vertical-header/Navigations.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Icon } from '@iconify/vue';
+</script>
+
+<template>
+    <!-- ---------------------------------------------- -->
+    <!-- mega menu DD -->
+    <!-- ---------------------------------------------- -->
+    <v-menu open-on-hover open-on-click >
+        <template v-slot:activator="{ props }">
+            <v-btn class="hidden-sm-and-down custom-hover-primary"  size="small" variant="text" icon color="primary" v-bind="props">  <Icon icon="solar:widget-3-line-duotone"  height="20"   /> </v-btn>
+        </template>
+        <v-sheet width="900" height="300" elevation="10" rounded="md" class="pa-0 overflow-hidden">
+            <div>
+                <v-row>
+                    <v-col cols="12" md="8" class="d-flex">
+                        <div class="pa-6">
+                            <LazyLayoutFullVerticalHeaderAppsLink />
+                        </div>
+                    </v-col>
+                    <v-col cols="12" md="4" class="pa-0">
+                        <img src="@/assets/images/backgrounds/mega-dd-bg.jpg" alt="matdash-img" height="320" class="w-100"  />
+                    </v-col>
+                </v-row>
+            </div>
+        </v-sheet>
+    </v-menu>
+</template>
+s

components/layout/full/vertical-header/NotificationDD.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import {notifications} from '~/_mockApis/headerData';
+import { Icon } from '@iconify/vue';
+</script>
+<template>
+    <!-- ---------------------------------------------- -->
+    <!-- notifications DD -->
+    <!-- ---------------------------------------------- -->
+    <v-menu open-on-hover open-on-click >
+        <template v-slot:activator="{ props }">
+            <v-btn icon class="custom-hover-primary" size="small" variant="text" color="primary" v-bind="props">
+                <Icon icon="solar:bell-bing-line-duotone" height="22"   />
+            </v-btn>
+        </template>
+        <v-sheet rounded="md" width="360" elevation="10">
+            <div class="px-6 pt-6 pb-4">
+                <div class="d-flex align-center justify-space-between">
+                    <h6 class="text-h5">Notifications</h6>
+                    <v-chip color="primary" variant="flat" size="small" class="text-white rounded-sm">5 New</v-chip>
+                </div>
+            </div>
+            <perfect-scrollbar style="height: 350px">
+                <v-list class="py-0 theme-list" lines="two">
+                    <v-list-item v-for="item in notifications" :key="item.title" :value="item" color="primary" class="py-3 px-6">
+                        <template v-slot:prepend>
+                            <v-avatar size="45" :color=" 'light' + item.color" rounded="circle">
+                                <Icon :icon="'solar:' + item.avatar" height="20" :class="'text-' + item.color"/>
+                            </v-avatar>
+                        </template>
+                        <div class="d-flex justify-space-between">
+                            <h6 class="text-subtitle-1 heading mb-1">{{ item.title }}</h6>
+                            <span class="text-subtitle-2 textSecondary">{{ item.time }}</span>
+                        </div>
+                        <p class="text-subtitle-2 font-weight-regular textSecondary">{{ item.subtitle }}</p>
+                    </v-list-item>
+                </v-list>
+            </perfect-scrollbar>
+            <div class="py-4 px-6 text-center">
+                <v-btn color="primary" variant="flat" size="large" block>See all Notifications</v-btn>
+            </div>
+        </v-sheet>
+    </v-menu>
+</template>

components/layout/full/vertical-header/ProfileDD.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { profileDD } from "@/_mockApis/headerData";
+</script>
+
+<template>
+  <!-- ---------------------------------------------- -->
+  <!-- notifications DD -->
+  <!-- ---------------------------------------------- -->
+  <v-menu open-on-hover open-on-click>
+    <template v-slot:activator="{ props }">
+      <v-btn
+        variant="text"
+        class="custom-hover-primary"
+        color="primary"
+        v-bind="props"
+        icon
+      >
+        <v-avatar size="35">
+          <img
+            src="@/assets/images/profile/user-1.jpg"
+            width="35"
+            alt="Julia"
+          />
+        </v-avatar>
+      </v-btn>
+    </template>
+    <v-sheet rounded="md" width="280" elevation="10">
+      <div class="pa-6">
+        <div class="d-flex align-center pb-6">
+          <v-avatar size="55">
+            <img src="@/assets/images/profile/user-1.jpg" width="55" />
+          </v-avatar>
+          <div class="ml-3">
+            <h6 class="text-subtitle-1">
+              David McMichael <span class="text-success text-caption">Pro</span>
+            </h6>
+            <span class="text-subtitle-1 textSecondary"
+              >david@wrappixel.com</span
+            >
+          </div>
+        </div>
+        <v-divider></v-divider>
+        <perfect-scrollbar
+          style="height: calc(100vh - 240px); max-height: 240px"
+        >
+          <v-list class="py-0 theme-list mt-3" lines="one">
+            <v-list-item
+              v-for="item in profileDD"
+              :key="item.title"
+              class="py-0 px-2 rounded-md custom-text-primary"
+              color="primary"
+              :to="item.href"
+            >
+              <div class="d-flex gap-3 align-center">
+                <p class="text-subtitle-1 heading custom-title">
+                  {{ item.title }}
+                </p>
+                <v-chip size="small" color="error" v-if="item.badge">4</v-chip>
+              </div>
+            </v-list-item>
+          </v-list>
+        </perfect-scrollbar>
+      </div>
+    </v-sheet>
+  </v-menu>
+</template>

components/layout/full/vertical-header/RightMobileSidebar.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Icon } from '@iconify/vue';
+</script>
+
+<template>
+
+<v-menu open-on-hover open-on-click >
+        <template v-slot:activator="{ props }">
+            <v-btn icon class="custom-hover-primary" size="small" variant="text" color="primary" v-bind="props">
+                <Icon icon="solar:widget-line-duotone" height="22"   />
+            </v-btn>
+        </template>
+        <v-sheet rounded="md" width="360" elevation="10">
+            <perfect-scrollbar style="height: 370px">
+                <div class="pa-6">
+                    <LazyLayoutFullVerticalHeaderAppsLink />
+                </div>
+            </perfect-scrollbar>
+        </v-sheet>
+    </v-menu>
+</template>
+

components/layout/full/vertical-header/Searchbar.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { Icon } from '@iconify/vue';
+import { searchSugg } from '~/_mockApis/headerData';
+</script>
+
+<template>
+    <!-- ---------------------------------------------- -->
+    <!-- search1 -->
+    <!-- ------------------------------------------------>
+    <v-menu :close-on-content-click="false">
+        <template v-slot:activator="{ props }">
+            <v-btn icon class="custom-hover-primary" size="small" variant="text" color="primary" v-bind="props">
+                <Icon icon="solar:magnifer-linear" height="20"   />
+            </v-btn>
+        </template>
+        <v-sheet width="360" elevation="10" rounded="md">
+            <div class="d-flex align-center justify-space-between pa-5">
+                <v-text-field placeholder="Search" color="primary" density="compact" variant="outlined" hide-details></v-text-field>
+            </div>
+            <v-divider></v-divider>
+            <h5 class="text-h5 mt-4 px-5 pb-4">Quick Page Links</h5>
+            <perfect-scrollbar style="height: 380px">
+                <v-list class="pt-0 pb-5" lines="two">
+                    <v-list-item
+                        :value="item"
+                        v-for="(item, index) in searchSugg"
+                        :key="index"
+                        :to="item.href"
+                        color="primary"
+                        class="px-5 py-2"
+                    >
+                        <h6 class="text-subtitle-1 heading mb-1">{{ item.title }}</h6>
+                        <p class="text-subtitle-2 textSecondary">{{ item.href }}</p>
+                    </v-list-item>
+                </v-list>
+            </perfect-scrollbar>
+        </v-sheet>
+    </v-menu>
+</template>

components/layout/full/vertical-header/ThemeToggler.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTheme } from 'vuetify';
+import { useCustomizerStore } from '~/store/customizer';
+import { Icon } from '@iconify/vue';
+
+const theme = useTheme();
+const customizer = useCustomizerStore();
+
+// template skin color options
+const themeColors = ref([
+    {
+        name: 'BLUE_THEME',
+        bg: 'togglethemeBlue'
+    },
+    {
+        name: 'DARK_BLUE_THEME',
+        bg: 'togglethemeDarkBlue'
+    }
+]);
+</script>
+
+<template>
+    <div class="position-relative">
+        <v-item-group mandatory v-model="customizer.actTheme" class="d-flex">
+            <div v-for="theme in themeColors" :key="theme.name">
+                <v-item v-slot="{ toggle }" :value="theme.name">
+                    <v-sheet rounded="circle" class="cursor-pointer text-center hover-btns" elevation="0" @click="toggle">
+                        <v-btn icon :class="theme.bg" class="custom-hover-primary" size="small" variant="text" color="primary">
+                            <SunIcon v-if="theme.bg == 'togglethemeBlue'" :class="theme.bg" height="22" />
+                            <MoonIcon v-if="theme.bg == 'togglethemeDarkBlue'" :class="theme.bg" height="22" />
+                        </v-btn>
+                    </v-sheet>
+                </v-item>
+            </div>
+        </v-item-group>
+    </div>
+</template>

components/layout/full/vertical-header/VerticalHeader.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import { useCustomizerStore } from '~/store/customizer';
+// import { useEcomStore } from '@/stores/apps/eCommerce';
+// import LanguageDD from './LanguageDD.vue';
+import NotificationDD from './NotificationDD.vue';
+import ProfileDD from './ProfileDD.vue';
+import Searchbar from './Searchbar.vue';
+import RightMobileSidebar from './RightMobileSidebar.vue';
+import Navigations from './Navigations.vue';
+import { Icon } from '@iconify/vue';
+import Logo from '../logo/Logo.vue';
+import ThemeToggler from './ThemeToggler.vue';
+const customizer = useCustomizerStore();
+const showSearch = ref(false);
+const priority = ref(customizer.setHorizontalLayout ? 0 : 0);
+function searchbox() {
+    showSearch.value = !showSearch.value;
+}
+watch(priority, (newPriority) => {
+    priority.value = newPriority;
+});
+
+// count items
+// const store = useEcomStore();
+// const getCart = computed(() => {
+//     return store.cart;
+// });
+</script>
+
+<template>
+    <v-app-bar elevation="0" :priority="priority" height="70" id="top" class="main-head">
+        <v-btn
+            class="hidden-lg-and-up custom-hover-primary"
+            size="small"
+            variant="text"
+            color="primary"
+            icon
+            @click.stop="customizer.SET_SIDEBAR_DRAWER"
+        >
+            <Icon icon="solar:hamburger-menu-line-duotone" height="22" />
+        </v-btn>
+
+        <!-- ---------------------------------------------- -->
+        <!-- Search part -->
+        <!-- ---------------------------------------------- -->
+        <Searchbar />
+
+        <!-- ---------------------------------------------- -->
+        <!-- Mega menu -->
+        <!-- ---------------------------------------------- -->
+        <div class="hidden-sm-and-down">
+            <Navigations />
+        </div>
+
+        <v-spacer class="hidden-sm-and-down" />
+
+        <!-- ---------------------------------------------- -->
+        <!-- Mobile Logo -->
+        <!-- ---------------------------------------------- -->
+        <div class="hidden-md-and-up">
+            <Logo />
+        </div>
+
+  
+        <ThemeToggler />
+
+        <!-- ---------------------------------------------- -->
+        <!-- translate -->
+        <!-- ---------------------------------------------- -->
+        <div class="hidden-sm-and-down">
+            <LanguageDD />
+        </div>
+
+        <!-- ---------------------------------------------- -->
+        <!-- ShoppingCart -->
+        <!-- ---------------------------------------------- -->
+        <!-- <v-btn icon class="custom-hover-primary hidden-sm-and-down" size="small" variant="text" color="primary" to="/ecommerce/checkout">
+            <v-badge color="error" :content="getCart?.length">
+                <Icon icon="solar:cart-large-2-outline" height="22" />
+            </v-badge>
+        </v-btn> -->
+
+        <!-- ---------------------------------------------- -->
+        <!-- Notification -->
+        <!-- ---------------------------------------------- -->
+        <div class="hidden-sm-and-down">
+            <NotificationDD />
+        </div>
+
+        <!-- ---------------------------------------------- -->
+        <!-- User Profile -->
+        <!-- ---------------------------------------------- -->
+        <div class="hidden-sm-and-down">
+            <ProfileDD />
+        </div>
+
+        <!----Mobile ----->
+        <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">
+                    <RightMobileSidebar />
+                    <!-- <LanguageDD /> -->
+                    <!-- <v-btn icon variant="text" class="mr-sm-3 mr-2 custom-hover-primary" to="/ecommerce/checkout" size="small">
+                        <v-badge color="primary" :content="getCart?.length" offset-x="-4" offset-y="-6">
+                            <Icon icon="solar:cart-large-2-outline" height="22" />
+                        </v-badge>
+                    </v-btn> -->
+                    <NotificationDD />
+                    <ProfileDD />
+                </div>
+            </v-sheet>
+        </v-menu>
+    </v-app-bar>
+</template>

components/layout/full/vertical-sidebar/Dropdown/Dropdown.vue

@@ -0,0 +1,53 @@
+<script setup>
+const props = defineProps({ item: Object, level: Number });
+</script>
+
+<template>
+  <div class="mb-0">
+    <!---Single Item-->
+    <v-list-item
+      :href="item.external ? item.to : undefined"
+      :to="!item.external ? item.to : undefined"
+      rounded="lg"
+      class=""
+      color=""
+      :ripple="false"
+      :disabled="item.disabled"
+      :target="item.external === true ? '_blank' : undefined"
+    >
+      <!---If icon-->
+      <template v-slot:prepend>
+        <Icon
+          :icon="'solar:' + item.icon"
+          height="18"
+          width="18"
+          :level="level"
+          class="dot"
+          :class="'text-' + item.BgColor"
+        />
+      </template>
+      <v-list-item-title class="text-body-1 text-darkText">{{
+        item.title
+      }}</v-list-item-title>
+      <!---If Caption-->
+      <v-list-item-subtitle
+        v-if="item.subCaption"
+        class="text-caption mt-n1 hide-menu"
+      >
+        {{ item.subCaption }}
+      </v-list-item-subtitle>
+
+      <!---If any chip or label-->
+      <template v-slot:append v-if="item.chip">
+        <v-chip
+          color="secondary"
+          class="font-weight-bold"
+          size="x-small"
+          rounded="sm"
+        >
+          {{ item.chip }}
+        </v-chip>
+      </template>
+    </v-list-item>
+  </div>
+</template>

components/layout/full/vertical-sidebar/Icon.vue

@@ -0,0 +1,23 @@
+<script setup>
+const props = defineProps({ item: Object, level: Number });
+</script>
+
+<template>
+  <template v-if="level > 0">
+    <component
+      :is="item"
+      size="5"
+      fill="currentColor"
+      stroke-width="1.5"
+      class="iconClass"
+    ></component>
+  </template>
+  <template v-else>
+    <component
+      :is="item"
+      size="20"
+      stroke-width="1.5"
+      class="iconClass"
+    ></component>
+  </template>
+</template>

components/layout/full/vertical-sidebar/MinIconItems.ts

@@ -0,0 +1,50 @@
+
+export interface minisidebar {
+    icon?: string;
+    id?:number;
+    tooltip?:string
+}
+const MiniSideIcons: minisidebar[] = [
+    {
+        icon: 'layers-line-duotone',
+        tooltip:'Dashboards',
+        id: 1
+    },
+    {
+        icon: 'notes-line-duotone',
+        tooltip:'Pages',
+        id: 2,
+    },
+    {
+        icon: 'palette-round-line-duotone',
+        tooltip:'Forms',
+        id: 3
+    },
+    {
+        icon:'align-vertical-spacing-broken',
+        tooltip:'Tables',
+        id: 4
+    },
+    {
+        icon:'chart-line-duotone',
+        tooltip:'Charts',
+        id: 5
+    },
+    {
+        icon:'widget-6-line-duotone',
+        tooltip:'UI Components',
+        id: 6
+    },
+    {
+        icon:'lock-keyhole-line-duotone',
+        tooltip:'Authentication Pages',
+        id: 7
+    },
+    {
+        icon:'mirror-left-line-duotone',
+        tooltip:'Others',
+        id: 8
+    }
+]
+
+export default MiniSideIcons;

components/layout/full/vertical-sidebar/NavCollapse/NavCollapse.vue

@@ -0,0 +1,42 @@
+<script setup>
+import NavItem from '../NavItem/NavItem.vue';
+import { Icon } from '@iconify/vue';
+const props = defineProps({ item: Object, level: Number });
+</script>
+
+<template>
+    <!-- ---------------------------------------------- -->
+    <!---Item Childern -->
+    <!-- ---------------------------------------------- -->
+    <v-list-group no-action>
+        <!-- ---------------------------------------------- -->
+        <!---Dropdown  -->
+        <!-- ---------------------------------------------- -->
+        <template v-slot:activator="{ props }">
+            <v-list-item v-bind="props" :value="item.title" rounded>
+                <!---Icon  -->
+                <template v-slot:prepend>
+                    <!-- <span class="dot"></span> -->
+                    <Icon :icon="'solar:' + item.icon" height="18" width="18" :level="level" class="dot" :class="'text-' + item.BgColor" />
+                </template>
+                <!---Title  -->
+                <v-list-item-title class="mr-auto">{{ $t(item.title) }}</v-list-item-title>
+                <!---If Caption-->
+                <v-list-item-subtitle v-if="item.subCaption" class="text-caption mt-n1 hide-menu">
+                    {{ item.subCaption }}
+                </v-list-item-subtitle>
+            </v-list-item>
+        </template>
+        <!-- ---------------------------------------------- -->
+        <!---Sub Item-->
+        <!-- ---------------------------------------------- -->
+        <template v-for="(subitem, i) in item.children" :key="i" v-if="item.children">
+            <NavCollapse :item="subitem" v-if="subitem.children" :level="level + 1" />
+            <NavItem :item="subitem" :level="level + 1" v-else></NavItem>
+        </template>
+    </v-list-group>
+
+    <!-- ---------------------------------------------- -->
+    <!---End Item Sub Header -->
+    <!-- ---------------------------------------------- -->
+</template>

components/layout/full/vertical-sidebar/NavGroup/NavGroup.vue

@@ -0,0 +1,14 @@
+<script setup>
+const props = defineProps({ item: Object });
+</script>
+
+<template>
+  <v-list-subheader
+    class="smallCap text-uppercase text-subtitle-2 mt-3 font-weight-bold d-flex align-items-center"
+  >
+    <span class="mini-icon"
+      ><DotsIcon size="16" stroke-width="1.5" class="iconClass"
+    /></span>
+    <span class="mini-text">{{ $t(props.item.header) }}</span>
+  </v-list-subheader>
+</template>

components/layout/full/vertical-sidebar/NavItem/NavItem.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+const props = defineProps({ item: Object, level: Number });
+</script>
+
+<template>
+  <!---Single Item-->
+
+  <v-list-item
+    :to="item.type === 'external' ? '' : item.to"
+    :href="item.type === 'external' ? item.to : ''"
+    rounded
+    :disabled="item.disabled"
+    :target="item.type === 'external' ? '_blank' : ''"
+    v-scroll-to="{ el: '#top' }"
+  >
+    <!---If icon-->
+    <template v-slot:prepend>
+      <Icon
+        :icon="'solar:' + item.icon"
+        height="18"
+        width="18"
+        :level="level"
+        class="dot"
+        :class="'text-' + item.BgColor"
+      />
+    </template>
+    <v-list-item-title>{{ $t(item.title) }}</v-list-item-title>
+    <!---If Caption-->
+    <v-list-item-subtitle
+      v-if="item.subCaption"
+      class="text-caption mt-n1 hide-menu"
+    >
+      {{ item.subCaption }}
+    </v-list-item-subtitle>
+    <!---If any chip or label-->
+    <template v-slot:append v-if="item.chip">
+      <v-chip
+        :color="item.chipColor"
+        :class="'sidebarchip hide-menu bg-' + item.chipBgColor"
+        :size="item.chipIcon ? 'small' : 'small'"
+        :variant="item.chipVariant"
+        :prepend-icon="item.chipIcon"
+      >
+        {{ item.chip }}
+      </v-chip>
+    </template>
+  </v-list-item>
+</template>

components/layout/full/vertical-sidebar/VerticalSidebar.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { ref, shallowRef } from 'vue';
+import { useCustomizerStore } from '~/store/customizer';
+import sidebarItems from './sidebarItem';
+import Logo from '../logo/Logo.vue';
+import { Icon } from '@iconify/vue';
+import { useRoute } from 'vue-router';
+// MiniSidebar Icons
+import MiniSideIcons from './MinIconItems';
+
+const route = useRoute();
+
+const findTitleByPath = (items: any, path: any) => {
+    let title = '';
+
+    for (const item of items) {
+        if (item.to === path) {
+            title = item.id;
+            break;
+        } else if (item.children) {
+            for (const child of item.children) {
+                if (child.to === path) {
+                    title = item.id;
+                    break;
+                } else if (child.children) {
+                    for (const grandChild of child.children) {
+                        if (grandChild.to === path) {
+                            title = item.id;
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    return title;
+};
+const foundId = findTitleByPath(sidebarItems, route.path);
+const getCurrent = foundId ? foundId : 1;
+const currentMenu = ref<any>(getCurrent);
+function showData(data: any) {
+    currentMenu.value = data;
+    //customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)
+}
+
+// MiniSidebar Icons End
+const customizer = useCustomizerStore();
+const sidebarMenu = shallowRef(sidebarItems);
+
+</script>
+
+<template>
+
+
+
+    <!-- Minisidebar Icons -->
+    <v-navigation-drawer class="bg-light" v-model="customizer.Sidebar_drawer" top="0" rail rail-width="80">
+        <perfect-scrollbar class="miniscrollnavbar">
+            <v-list-item class="px-0">
+                <!-- Toggle Sidebar Button -->
+                <div class="px-4 mb-3">
+                    <v-btn
+                        class="hidden-md-and-down my-2"
+                        icon
+                        rounded="md"
+                        variant="plain"
+                        @click.stop="customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)"
+                    >
+                        <Icon icon="solar:hamburger-menu-line-duotone" height="25" />
+                    </v-btn>
+                </div>
+
+                <div class="miniicons mt-lg-0 mt-4">
+                    <!-- MiniSidebar Icons -->
+                    <div class="d-flex flex-column gap-2">
+                        <div class="miniicons-list px-4" v-for="menu in MiniSideIcons" :key="menu.icon">
+                            <v-btn
+                                rounded="md"
+                                flat
+                                icon
+                                variant="plain"
+                                @click="showData(menu.id)"
+                                :class="{ 'bg-primary opacity-1': currentMenu === menu.id }"
+                            >
+                                <Icon :icon="'solar:' + menu.icon" width="25" />
+                                <!-- Tooltip on Hover -->
+                                <v-tooltip activator="parent" location="end" class="custom-tooltip">{{ menu.tooltip }}</v-tooltip>
+                            </v-btn>
+                        </div>
+                    </div>
+                </div>
+            </v-list-item>
+        </perfect-scrollbar>
+    </v-navigation-drawer>
+
+    <!-- LeftSidebar Items -->
+    <v-navigation-drawer
+        v-model="customizer.Sidebar_drawer"
+        elevation="0"
+        rail-width="1"
+        app
+        top="0"
+        class="leftSidebar"
+        :rail="customizer.mini_sidebar"
+        width="240"
+    >
+        <!---Logo part -->
+        <div class="pa-4 pb-0">
+            <Logo />
+        </div>
+
+        <!-- ---------------------------------------------- -->
+        <!---Navigation -->
+        <!-- ---------------------------------------------- -->
+        <perfect-scrollbar class="scrollnavbar">
+            <div class="px-4 py-0 sidebar-menus">
+                <v-list class="py-1">
+                    <template v-for="(item, i) in sidebarMenu">
+                        <template v-if="currentMenu == item.id">
+                            <!---Item Sub Header -->
+                            <LazyLayoutFullVerticalSidebarNavGroup :item="item" v-if="item.header" :key="item.title" />
+                            <!---If Has Child -->
+                            <template v-for="sItem in item.children">
+                                <LazyLayoutFullVerticalSidebarNavCollapse class="leftPadding" :item="sItem" :level="0" v-if="sItem.children" />
+                                <LazyLayoutFullVerticalSidebarNavItem :item="sItem" class="leftPadding" v-else />
+                            </template>
+                        </template>
+                    </template>
+                </v-list>
+            </div>
+        </perfect-scrollbar>
+    </v-navigation-drawer>
+</template>

components/layout/full/vertical-sidebar/sidebarItem.ts

@@ -0,0 +1,709 @@
+export interface menu {
+  header?: string;
+  title?: string;
+  icon?: any;
+  id?: number;
+  to?: string;
+  chip?: string;
+  BgColor?: string;
+  chipBgColor?: string;
+  chipColor?: string;
+  chipVariant?: string;
+  chipIcon?: string;
+  children?: menu[];
+  disabled?: boolean;
+  type?: string;
+  subCaption?: string;
+}
+const sidebarItem: menu[] = [
+  {
+      header: 'dashboards',
+      id: 1,
+      children: [
+          {
+              title: 'Dashboard1',
+              icon: 'widget-add-line-duotone',
+              to: '/dashboards/dashboard1'
+          },
+          {
+              title: 'Dashboard2',
+              icon: 'chart-line-duotone',
+              to: '/dashboards/dashboard2'
+          },
+          {
+              title: 'Dashboard3',
+              icon: 'screencast-2-line-duotone',
+              to: '/dashboards/dashboard3'
+          },
+          {
+              title: 'Front Pages',
+              icon: 'home-angle-linear',
+              to: '/',
+              children: [
+                  {
+                      title: 'Homepage',
+                      to: '/front-page/homepage'
+                  },
+                  {
+                      title: 'About Us',
+                      to: '/front-page/about-us'
+                  },
+                  {
+                      title: 'Blog',
+                      to: '/front-page/blog/posts'
+                  },
+                  {
+                      title: 'Blog Details',
+                      to: '/front-page/blog/early-black-friday-amazon-deals-cheap-tvs-headphones'
+                  },
+                  {
+                      title: 'Contact Us',
+                      to: '/front-page/contact-us'
+                  },
+                  {
+                      title: 'Portfolio',
+                      to: '/front-page/portfolio'
+                  },
+                  {
+                      title: 'Pricing',
+                      to: '/front-page/pricing'
+                  }
+              ]
+          },
+      ]
+  },
+
+  {
+      header: 'apps',
+      id: 1,
+      children: [
+          {
+              title: 'ECommerce',
+              icon: 'cart-3-line-duotone',
+              to: '/ecommerce/',
+              children: [
+                  {
+                      title: 'Shop',
+                      to: '/ecommerce/products'
+                  },
+                  {
+                      title: 'Detail',
+                      to: '/ecommerce/product/detail/1'
+                  },
+                  {
+                      title: 'List',
+                      to: '/ecommerce/productlist'
+                  },
+                  {
+                      title: 'Checkout',
+                      to: '/ecommerce/checkout'
+                  },
+                  {
+                      title: 'Add Product',
+                      to: '/ecommerce/add-product'
+                  },
+                  {
+                      title: 'Edit Product',
+                      to: '/ecommerce/edit-product'
+                  }
+              ]
+          },
+          {
+              title: 'Blog',
+              icon: 'widget-4-line-duotone',
+              to: '/',
+              children: [
+                  {
+                      title: 'Blog Posts',
+                      to: '/apps/blog/posts'
+                  },
+                  {
+                      title: 'Blog Details',
+                      to: '/apps/blog/early-black-friday-amazon-deals-cheap-tvs-headphones'
+                  }
+              ]
+          },
+          {
+              title: 'User Profile',
+              icon: 'shield-user-line-duotone',
+              to: '/',
+              children: [
+                  {
+                      title: 'Profile',
+                      to: '/apps/user/profile'
+                  },
+                  {
+                      title: 'Followers',
+                      to: '/apps/user/profile/followers'
+                  },
+                  {
+                      title: 'Friends',
+                      to: '/apps/user/profile/friends'
+                  },
+                  {
+                      title: 'Gallery',
+                      to: '/apps/user/profile/gallery'
+                  }
+              ]
+          },
+          {
+              title: 'Invoice',
+              icon: 'bill-check-outline',
+              to: '/',
+              children: [
+                  {
+                      title: 'List',
+                      to: '/apps/invoice'
+                  },
+                  {
+                      title: 'Details',
+                      to: '/apps/invoice/details/102'
+                  },
+                  {
+                      title: 'Create',
+                      to: '/apps/invoice/create'
+                  },
+                  {
+                      title: 'Edit',
+                      to: '/apps/invoice/edit/102'
+                  }
+              ]
+          },
+          {
+              title: 'Calendar',
+              icon: 'calendar-mark-line-duotone',
+              to: '/apps/calendar'
+          },
+          {
+              title: 'Email',
+              icon: 'letter-linear',
+              to: '/apps/email'
+          },
+          {
+              title: 'Chats',
+              icon: 'chat-round-line-line-duotone',
+              to: '/apps/chats'
+          },
+          {
+              title: 'Notes',
+              icon: 'document-text-line-duotone',
+              to: '/apps/notes'
+          },
+          {
+              title: 'Kanban',
+              icon: 'airbuds-case-minimalistic-line-duotone',
+              to: '/apps/kanban'
+          },
+          {
+              title: 'Contact',
+              icon: 'iphone-line-duotone',
+              to: '/apps/contacts'
+          },
+          {
+              title: 'Tickets',
+              icon: 'ticker-star-outline',
+              to: '/apps/tickets'
+          },
+      ]
+  },
+
+  {
+      header: 'pages',
+      id: 2,
+      children: [
+
+          {
+              title: 'Account Setting',
+              icon: 'settings-minimalistic-line-duotone',
+              to: '/pages/account-settings'
+          },
+          {
+              title: 'Banners Widgets',
+              icon: 'align-vertical-spacing-line-duotone',
+              to: '/widgets/banners'
+          },
+          {
+              title: 'Cards Widgets',
+              icon: 'cardholder-line-duotone',
+              to: '/widgets/cards'
+          },
+          {
+              title: 'Charts Widgets',
+              icon: 'chart-square-line-duotone',
+              to: '/widgets/charts'
+          },
+          {
+              title: 'FAQ',
+              icon: 'question-circle-line-duotone',
+              to: '/pages/faq'
+          },
+          {
+              title: 'Gallery Lightbox',
+              icon: 'gallery-bold-duotone',
+              to: '/pages/gallery-lightbox',
+          },
+          {
+              title: 'Landing Page',
+              icon: 'passport-line-duotone',
+              to: '/'
+          },
+          {
+              title: 'Pricing',
+              icon: 'dollar-line-duotone',
+              to: '/pages/pricing'
+          },
+          {
+              title: 'Search Results',
+              icon: 'card-search-line-duotone',
+              to: '/pages/search-results'
+          },
+          {
+              title: 'Social Contacts',
+              icon: 'chat-round-like-linear',
+              to: '/pages/social-media-contacts'
+          },
+          {
+              title: 'Treeview',
+              icon: 'transmission-line-duotone',
+              to: '/pages/treeview'
+          },
+          
+          
+         
+      ]
+  },
+  {
+      header: 'icons',
+      id: 2,
+      children: [
+          {
+              title: 'Tabler Icons',
+              icon: 'sticker-smile-circle-2-line-duotone',
+              to: '/icons/tabler'
+          },
+          {
+              title: 'Solar Icons',
+              icon: 'sticker-smile-circle-2-line-duotone',
+              to: '/icons/solar'
+          }
+      ]
+  },
+
+  {
+      header: 'Forms',
+      id: 3,
+      children: [
+          {
+              title: 'Form Elements',
+              icon: 'text-selection-line-duotone',
+              to: '/components/',
+              children: [
+                  {
+                      title: 'Autocomplete',
+                      to: '/forms/form-elements/autocomplete'
+                  },
+                  {
+                      title: 'Combobox',
+                      to: '/forms/form-elements/combobox'
+                  },
+                  {
+                      title: 'Button',
+                      to: '/forms/form-elements/button'
+                  },
+                  {
+                      title: 'Checkbox',
+                      to: '/forms/form-elements/checkbox'
+                  },
+                  {
+                      title: 'Custom Inputs',
+                      to: '/forms/form-elements/custominputs'
+                  },
+                  {
+                      title: 'File Inputs',
+                      to: '/forms/form-elements/fileinputs'
+                  },
+                  {
+                      title: 'Radio',
+                      to: '/forms/form-elements/radio'
+                  },
+                  {
+                      title: 'Date Time',
+                      to: '/forms/form-elements/date-time'
+                  },
+                  {
+                      title: 'Select',
+                      to: '/forms/form-elements/select'
+                  },
+                  {
+                      title: 'Slider',
+                      to: '/forms/form-elements/slider'
+                  },
+                  {
+                      title: 'Switch',
+                      to: '/forms/form-elements/switch'
+                  },
+                  {
+                      title: 'Time Picker',
+                      to: '/forms/form-elements/time-picker'
+                  },
+                  
+                  {
+                      title: 'Stepper',
+                      to: '/forms/form-elements/stepper'
+                  }
+              ]
+          },
+          {
+              title: 'Form Layout',
+              icon: 'layers-minimalistic-outline',
+              to: '/forms/form-layouts'
+          },
+          {
+              title: 'Form Horizontal',
+              icon: 'password-minimalistic-input-line-duotone',
+              to: '/forms/form-horizontal'
+          },
+          {
+              title: 'Form Vertical',
+              icon: 'slider-vertical-line-duotone',
+              to: '/forms/form-vertical'
+          },
+          {
+              title: 'Form Custom',
+              icon: 'clapperboard-play-outline',
+              to: '/forms/form-custom'
+          },
+          {
+              title: 'Form Validation',
+              icon: 'soundwave-square-line-duotone',
+              to: '/forms/form-validation'
+          },
+          {
+              title: 'Editor',
+              icon: 'clapperboard-edit-line-duotone',
+              to: '/forms/editor'
+          }
+      ]
+  },
+
+  {
+      header: 'tables',
+      id: 4,
+      children: [
+          {
+              title: 'Basic Table',
+              icon: 'tablet-line-duotone',
+              to: '/tables/basic'
+          },
+          {
+              title: 'Dark Table',
+              icon: 'bedside-table-4-outline',
+              to: '/tables/dark'
+          },
+          {
+              title: 'Density Table',
+              icon: 'bedside-table-3-linear',
+              to: '/tables/density'
+          },
+          {
+              title: 'Fixed Header Table',
+              icon: 'archive-up-minimlistic-broken',
+              to: '/tables/fixed-header'
+          },
+          {
+              title: 'Height Table',
+              icon: 'archive-down-minimlistic-broken',
+              to: '/tables/height'
+          },
+          {
+              title: 'Editable Table',
+              icon: 'document-add-linear',
+              to: '/tables/editable'
+          }
+      ]
+  },
+
+  {
+      header: 'datatables',
+      id: 4,
+      children: [
+          {
+              title: 'Basic Table',
+              icon: 'database-outline',
+              to: '/tables/datatables/basic'
+          },
+          {
+              title: 'Header Table',
+              icon: 'folder-open-broken',
+              to: '/tables/datatables/header'
+          },
+          {
+              title: 'Selection Table',
+              icon: 'chart-square-broken',
+              to: '/tables/datatables/selection'
+          },
+          {
+              title: 'Sorting Table',
+              icon: 'card-send-line-duotone',
+              to: '/tables/datatables/sorting'
+          },
+          {
+              title: 'Pagination Table',
+              icon: 'tag-horizontal-broken',
+              to: '/tables/datatables/pagination'
+          },
+          {
+              title: 'Filtering Table',
+              icon: 'tuning-square-2-line-duotone',
+              to: '/tables/datatables/filtering'
+          },
+          {
+              title: 'Grouping Table',
+              icon: 'tuning-square-2-line-duotone',
+              to: '/tables/datatables/grouping'
+          },
+          {
+              title: 'Table Slots',
+              icon: 'closet-line-duotone',
+              to: '/tables/datatables/slots'
+          },
+          {
+              title: 'CRUD Table',
+              icon: 'text-underline-cross-broken',
+              to: '/tables/datatables/crudtable'
+          }
+      ]
+  },
+
+  {
+      header: 'Charts',
+      id: 5,
+      children: [
+          {
+              title: 'Line',
+              icon: 'chat-square-2-outline',
+              to: '/charts/line-chart'
+          },
+          {
+              title: 'Gredient',
+              icon: 'round-graph-linear',
+              to: '/charts/gredient-chart'
+          },
+          {
+              title: 'Area',
+              icon: 'graph-up-linear',
+              to: '/charts/area-chart'
+          },
+          {
+              title: 'Candlestick',
+              icon: 'chandelier-broken',
+              to: '/charts/candlestick-chart'
+          },
+          {
+              title: 'Column',
+              icon: 'colour-tuneing-broken',
+              to: '/charts/column-chart'
+          },
+          {
+              title: 'Doughnut & Pie',
+              icon: 'pie-chart-2-linear',
+              to: '/charts/doughnut-pie-chart'
+          },
+          {
+              title: 'Radialbar & Radar',
+              icon: 'radar-2-outline',
+              to: '/charts/radialbar-chart'
+          }
+      ]
+  },
+
+  {
+      header: 'UI',
+      id: 6,
+      children: [
+          {
+              title: 'Alert',
+              icon: 'info-circle-linear',
+              to: '/ui-components/alert'
+          },
+          {
+              title: 'Accordion',
+              icon: 'waterdrops-line-duotone',
+              to: '/ui-components/accordion'
+          },
+          {
+              title: 'Avatar',
+              icon: 'expressionless-circle-outline',
+              to: '/ui-components/avatar'
+          },
+          {
+              title: 'Chip',
+              icon: 'tag-horizontal-line-duotone',
+              to: '/ui-components/chip'
+          },
+          {
+              title: 'Dialog',
+              icon: 'bolt-line-duotone',
+              to: '/ui-components/dialogs'
+          },
+          {
+              title: 'List',
+              icon: 'checklist-bold-duotone',
+              to: '/ui-components/list'
+          },
+          {
+              title: 'Menus',
+              icon: 'menu-dots-circle-outline',
+              to: '/ui-components/menus'
+          },
+          {
+              title: 'Rating',
+              icon: 'shield-star-outline',
+              to: '/ui-components/rating'
+          },
+          {
+              title: 'Tabs',
+              icon: 'box-minimalistic-line-duotone',
+              to: '/ui-components/tabs'
+          },
+          {
+              title: 'Tooltip',
+              icon: 'transmission-square-outline',
+              to: '/ui-components/tooltip'
+          },
+          {
+              title: 'Typography',
+              icon: 'text-circle-linear',
+              to: '/ui-components/typography'
+          }
+      ]
+  },
+
+  {
+      header: 'Auth',
+      id: 7,
+      children: [
+          {
+              title: 'Error',
+              icon: 'bug-minimalistic-line-duotone',
+              to: '/auth/404'
+          },
+          {
+              title: 'Side Login',
+              icon: 'login-3-line-duotone',
+              to: '/auth/login'
+          },
+          {
+              title: 'Boxed Login',
+              icon: 'login-3-line-duotone',
+              to: '/auth/login2'
+          },
+          {
+              title: 'Side Register',
+              icon: 'user-plus-rounded-line-duotone',
+              to: '/auth/register'
+          },
+          {
+              title: 'Boxed Register',
+              icon: 'user-plus-rounded-line-duotone',
+              to: '/auth/register2'
+          },
+          {
+              title: 'Side Forgot Pwd',
+              icon: 'password-outline',
+              to: '/auth/forgot-password'
+          },
+          {
+              title: 'Boxed Forgot Pwd',
+              icon: 'password-outline',
+              to: '/auth/forgot-password2'
+          },
+          {
+              title: 'Side Two Steps',
+              icon: 'siderbar-line-duotone',
+              to: '/auth/two-step'
+          },
+          {
+              title: 'Boxed Two Steps',
+              icon: 'siderbar-line-duotone',
+              to: '/auth/two-step2'
+          },
+          {
+              title: 'Maintenance',
+              icon: 'settings-line-duotone',
+              to: '/auth/maintenance'
+          }
+      ]
+  },
+  {
+      header: 'Multi Level',
+      id: 8,
+      children: [
+          {
+              title: 'Menu Level',
+              icon: 'align-left-line-duotone',
+              to: '#',
+              id: 8,
+              children: [
+                  {
+                      title: 'Level 1',
+                      to: '/level1'
+                  },
+                  {
+                      title: 'Level 1 ',
+                      to: '/2level',
+                      children: [
+                          {
+                              title: 'Level 2',
+                              to: '/barry'
+                          },
+                          {
+                              title: 'Level 2',
+                              to: '/2.2level',
+                              children: [
+                                  {
+                                      title: 'Level 3',
+                                      to: '/barry'
+                                  }
+                              ]
+                          }
+                      ]
+                  }
+              ]
+          }
+      ]
+  },
+  {
+      header: 'More Options',
+      id: 8,
+      children: [
+          {
+              title: 'Applications',
+              icon: 'check-circle-bold',
+              BgColor: 'primary'
+          },
+          {
+              title: 'Form Options',
+              icon: 'check-circle-bold',
+              BgColor: 'secondary'
+          },
+          {
+              title: 'Table Variations',
+              icon: 'check-circle-bold',
+              BgColor: 'error'
+          },
+          {
+              title: 'Charts Selection',
+              icon: 'check-circle-bold',
+              BgColor: 'warning'
+          },
+          {
+              title: 'Widgets',
+              icon: 'check-circle-bold',
+              BgColor: 'success'
+          }
+      ]
+  }
+];
+
+export default sidebarItem;