first commit
This commit is contained in:
meninjar
53
components/layout/full/vertical-sidebar/Dropdown/Dropdown.vue
Executable file
53
components/layout/full/vertical-sidebar/Dropdown/Dropdown.vue
Executable file
@@ -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>
|
||||
23
components/layout/full/vertical-sidebar/Icon.vue
Executable file
23
components/layout/full/vertical-sidebar/Icon.vue
Executable file
@@ -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>
|
||||
50
components/layout/full/vertical-sidebar/MinIconItems.ts
Executable file
50
components/layout/full/vertical-sidebar/MinIconItems.ts
Executable file
@@ -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;
|
||||
42
components/layout/full/vertical-sidebar/NavCollapse/NavCollapse.vue
Executable file
42
components/layout/full/vertical-sidebar/NavCollapse/NavCollapse.vue
Executable file
@@ -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>
|
||||
14
components/layout/full/vertical-sidebar/NavGroup/NavGroup.vue
Executable file
14
components/layout/full/vertical-sidebar/NavGroup/NavGroup.vue
Executable file
@@ -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>
|
||||
49
components/layout/full/vertical-sidebar/NavItem/NavItem.vue
Executable file
49
components/layout/full/vertical-sidebar/NavItem/NavItem.vue
Executable file
@@ -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>
|
||||
134
components/layout/full/vertical-sidebar/VerticalSidebar.vue
Executable file
134
components/layout/full/vertical-sidebar/VerticalSidebar.vue
Executable file
@@ -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>
|
||||
709
components/layout/full/vertical-sidebar/sidebarItem.ts
Executable file
709
components/layout/full/vertical-sidebar/sidebarItem.ts
Executable file
@@ -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;
|
||||
Reference in New Issue
Block a user