remove website contents
This commit is contained in:
bagus-arie05
@@ -1,154 +0,0 @@
|
||||
<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>
|
||||
@@ -1,47 +0,0 @@
|
||||
<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>
|
||||
@@ -1,30 +0,0 @@
|
||||
<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
|
||||
@@ -1,43 +0,0 @@
|
||||
<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>
|
||||
@@ -1,227 +0,0 @@
|
||||
<!-- components/layout/ProfileDD.vue -->
|
||||
<script setup lang="ts">
|
||||
import { MailIcon } from "vue-tabler-icons";
|
||||
import { profileDD } from "~/_mockApis/headerData";
|
||||
import { PerfectScrollbar } from "vue3-perfect-scrollbar";
|
||||
import { useUserInfo } from "~/composables/useUserInfo";
|
||||
import { computed } from "vue";
|
||||
|
||||
const userInfo = useUserInfo();
|
||||
|
||||
// Enhanced logout with proper error handling
|
||||
const logout = async () => {
|
||||
try {
|
||||
// Use the updated logout method from useUserInfo that handles Keycloak logout and session clearing
|
||||
await userInfo.logout({
|
||||
reason: "idle",
|
||||
confirmDialog: false // Show confirmation dialog
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Logout from profile failed:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// **TAMBAHAN: Full logout function dengan konfirmasi**
|
||||
const fullLogout = async () => {
|
||||
try {
|
||||
// Tampilkan konfirmasi sebelum full logout
|
||||
const confirmed = confirm(
|
||||
"Apakah Anda yakin ingin keluar dari semua sesi? Ini akan menghapus semua data lokal dan sesi Keycloak."
|
||||
);
|
||||
|
||||
if (!confirmed) return;
|
||||
|
||||
console.log("Initiating full logout from ProfileDD...");
|
||||
|
||||
// Gunakan fullLogout dari useUserInfo composable
|
||||
await userInfo.fullLogout();
|
||||
} catch (error) {
|
||||
console.error("Full logout from profile failed:", error);
|
||||
|
||||
// Fallback jika fullLogout gagal
|
||||
try {
|
||||
console.log("Attempting fallback logout...");
|
||||
await userInfo.logout({
|
||||
reason: "manual",
|
||||
clearStorage: true
|
||||
});
|
||||
} catch (fallbackError) {
|
||||
console.error("Fallback logout also failed:", fallbackError);
|
||||
|
||||
// Last resort - force redirect
|
||||
if (process.client) {
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
window.location.href = "/auth/login?reason=force";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// **TAMBAHAN: Logout dengan konfirmasi untuk UX yang lebih baik**
|
||||
const logoutWithConfirmation = async () => {
|
||||
try {
|
||||
const confirmed = confirm("Apakah Anda yakin ingin keluar?");
|
||||
|
||||
if (!confirmed) return;
|
||||
|
||||
await logout();
|
||||
} catch (error) {
|
||||
console.error("Logout with confirmation failed:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// Get user display info from session
|
||||
const getUserDisplayInfo = () => {
|
||||
if (!userInfo.user.value && !userInfo.data.value?.user)
|
||||
return {
|
||||
name: "Guest User",
|
||||
email: "guest@example.com",
|
||||
role: "Guest"
|
||||
};
|
||||
|
||||
const user = userInfo.user.value || userInfo.data.value?.user || {};
|
||||
return {
|
||||
name: user.name || user.given_name || user.preferred_username || "User",
|
||||
email: user.email || "No email",
|
||||
role: userInfo.userRoles.value[0] || "User"
|
||||
};
|
||||
};
|
||||
|
||||
const displayInfo = computed(() => getUserDisplayInfo());
|
||||
|
||||
// Computed properties for decodedToken and clientScopes
|
||||
// const decodedToken = computed(() => userInfo.decodedToken.value);
|
||||
// const clientScopes = computed(() => userInfo.clientScopes.value);
|
||||
|
||||
// **TAMBAHAN: Computed property untuk menampilkan status session**
|
||||
const sessionInfo = computed(() => {
|
||||
return {
|
||||
isAuthenticated: userInfo.isAuthenticated.value,
|
||||
sessionExpires: userInfo.sessionExpires.value,
|
||||
hasValidToken: !!userInfo.idToken.value
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-menu :close-on-content-click="false">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn class="custom-hover-primary" variant="text" v-bind="props" icon>
|
||||
<v-avatar size="35">
|
||||
<img
|
||||
src="~/assets/images/profile/user-1.jpg"
|
||||
width="35"
|
||||
alt="User Avatar"
|
||||
/>
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-sheet rounded="md" width="360" elevation="10">
|
||||
<div class="px-8 pt-6">
|
||||
<h6 class="text-h5 font-weight-medium">User Profile</h6>
|
||||
<div class="d-flex align-center mt-4 pb-6">
|
||||
<v-avatar size="80">
|
||||
<img src="~/assets/images/profile/user-1.jpg" width="80" />
|
||||
</v-avatar>
|
||||
<div class="ml-3">
|
||||
<h6 class="text-h6 mb-n1">{{ displayInfo.name }}</h6>
|
||||
<span class="text-subtitle-1 font-weight-regular textSecondary">
|
||||
{{ displayInfo.role }}
|
||||
</span>
|
||||
<div class="d-flex align-center mt-1">
|
||||
<MailIcon size="18" stroke-width="1.5" />
|
||||
<span
|
||||
class="text-subtitle-1 font-weight-regular textSecondary ml-2"
|
||||
>
|
||||
{{ displayInfo.email }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- **TAMBAHAN: Tampilkan status session** -->
|
||||
<div class="mt-2">
|
||||
<v-chip
|
||||
:color="sessionInfo.isAuthenticated ? 'success' : 'error'"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
>
|
||||
{{ sessionInfo.isAuthenticated ? "Active" : "Inactive" }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
</div>
|
||||
|
||||
<PerfectScrollbar style="height: calc(100vh - 240px); max-height: 240px">
|
||||
<v-list class="py-0 theme-list" lines="two">
|
||||
<v-list-item
|
||||
v-for="item in profileDD"
|
||||
:key="item.title"
|
||||
class="py-4 px-8 custom-text-primary"
|
||||
:to="item.href"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar
|
||||
size="48"
|
||||
color="lightprimary"
|
||||
class="mr-3"
|
||||
rounded="md"
|
||||
>
|
||||
<img
|
||||
:src="item.avatar"
|
||||
width="24"
|
||||
height="24"
|
||||
:alt="item.avatar"
|
||||
/>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<div>
|
||||
<h6 class="text-subtitle-1 font-weight-bold mb-2 custom-title">
|
||||
{{ item.title }}
|
||||
</h6>
|
||||
</div>
|
||||
<p class="text-subtitle-1 font-weight-regular textSecondary">
|
||||
{{ item.subtitle }}
|
||||
</p>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</PerfectScrollbar>
|
||||
|
||||
<!-- **DIPERBAIKI: Logout buttons section dengan multiple options** -->
|
||||
<div class="pt-4 pb-6 px-8">
|
||||
<!-- Regular Logout Button -->
|
||||
<v-btn
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
block
|
||||
@click="logoutWithConfirmation"
|
||||
prepend-icon="mdi-logout"
|
||||
class="mb-2"
|
||||
>
|
||||
Logout
|
||||
</v-btn>
|
||||
|
||||
<!-- **TAMBAHAN: Full Logout Button** -->
|
||||
<v-btn
|
||||
color="error"
|
||||
variant="outlined"
|
||||
block
|
||||
@click="fullLogout"
|
||||
prepend-icon="mdi-logout-variant"
|
||||
class="mb-2"
|
||||
>
|
||||
Full Logout
|
||||
</v-btn>
|
||||
|
||||
<!-- **TAMBAHAN: Quick info text** -->
|
||||
<div class="text-center mt-2">
|
||||
<span class="text-caption textSecondary">
|
||||
Full logout akan menghapus semua sesi dan data lokal
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-menu>
|
||||
</template>
|
||||
@@ -1,23 +0,0 @@
|
||||
<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>
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
<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>
|
||||
@@ -1,120 +1,121 @@
|
||||
<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';
|
||||
import { ref, watch, computed } from "vue";
|
||||
import { useCustomizerStore } from "~/store/customizer";
|
||||
|
||||
import { Icon } from "@iconify/vue";
|
||||
import Logo from "../logo/Logo.vue";
|
||||
|
||||
const customizer = useCustomizerStore();
|
||||
const showSearch = ref(false);
|
||||
const priority = ref(customizer.setHorizontalLayout ? 0 : 0);
|
||||
function searchbox() {
|
||||
showSearch.value = !showSearch.value;
|
||||
showSearch.value = !showSearch.value;
|
||||
}
|
||||
watch(priority, (newPriority) => {
|
||||
priority.value = 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>
|
||||
<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 />
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- Search part -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<Searchbar />
|
||||
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- Mega menu -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<div class="hidden-sm-and-down">
|
||||
<Navigations />
|
||||
</div>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- Mega menu -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<div class="hidden-sm-and-down">
|
||||
<Navigations />
|
||||
</div>
|
||||
|
||||
<v-spacer class="hidden-sm-and-down" />
|
||||
<v-spacer class="hidden-sm-and-down" />
|
||||
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- Mobile Logo -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<div class="hidden-md-and-up">
|
||||
<Logo />
|
||||
</div>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- Mobile Logo -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<div class="hidden-md-and-up">
|
||||
<Logo />
|
||||
</div>
|
||||
|
||||
|
||||
<ThemeToggler />
|
||||
<ThemeToggler />
|
||||
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- translate -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<div class="hidden-sm-and-down">
|
||||
<LanguageDD />
|
||||
</div>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- 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">
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- 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>
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- Notification -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<div class="hidden-sm-and-down">
|
||||
<NotificationDD />
|
||||
</div>
|
||||
|
||||
<!-- ---------------------------------------------- -->
|
||||
<!-- User Profile -->
|
||||
<!-- ---------------------------------------------- -->
|
||||
<div class="hidden-sm-and-down">
|
||||
<ProfileDD />
|
||||
</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">
|
||||
<!----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>
|
||||
<NotificationDD />
|
||||
<ProfileDD />
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-menu>
|
||||
</v-app-bar>
|
||||
</template>
|
||||
|
||||
@@ -15,36 +15,6 @@ const MiniSideIcons: minisidebar[] = [
|
||||
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;
|
||||
|
||||
@@ -21,689 +21,29 @@ const sidebarItem: menu[] = [
|
||||
id: 1,
|
||||
children: [
|
||||
{
|
||||
title: 'Dashboard1',
|
||||
title: 'Dashboard',
|
||||
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',
|
||||
title: 'Dashboard',
|
||||
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'
|
||||
},
|
||||
to: '/pages'
|
||||
}
|
||||
|
||||
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user