first commit
This commit is contained in:
Yusron alamsyah
No files matched your search
@@ -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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,25 @@
|
||||
|
||||
export interface minisidebar {
|
||||
icon?: string;
|
||||
id?:number;
|
||||
tooltip?:string
|
||||
}
|
||||
const MiniSideIcons: minisidebar[] = [
|
||||
{
|
||||
icon: 'layers-line-duotone',
|
||||
tooltip:'Modules',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
icon: 'layers-line-duotone',
|
||||
tooltip:'Master',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
icon: 'palette-round-line-duotone',
|
||||
tooltip:'Forms',
|
||||
id: 3
|
||||
},
|
||||
]
|
||||
|
||||
export default MiniSideIcons;
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,159 @@
|
||||
<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>
|
||||
@@ -0,0 +1,293 @@
|
||||
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: 'Master',
|
||||
id: 2,
|
||||
children: [
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
header: 'UI Components',
|
||||
id: 3,
|
||||
children: [
|
||||
{
|
||||
title: 'Alerts',
|
||||
icon: 'danger-triangle-line-duotone',
|
||||
to: '/ui-components/alerts'
|
||||
},
|
||||
{
|
||||
title: 'Avatar',
|
||||
icon: 'user-circle-line-duotone',
|
||||
to: '/ui-components/avatar'
|
||||
},
|
||||
{
|
||||
title: 'Buttons',
|
||||
icon: 'ghost-line-duotone',
|
||||
to: '/ui-components/buttons'
|
||||
},
|
||||
{
|
||||
title: 'Cards',
|
||||
icon: 'layers-minimalistic-line-duotone',
|
||||
to: '/ui-components/cards'
|
||||
},
|
||||
{
|
||||
title: 'Chip',
|
||||
icon: 'tag-horizontal-line-duotone',
|
||||
to: '/ui-components/chip'
|
||||
},
|
||||
{
|
||||
title: 'Dialogs',
|
||||
icon: 'window-frame-line-duotone',
|
||||
to: '/ui-components/dialogs'
|
||||
},
|
||||
{
|
||||
title: 'Expansion Panel',
|
||||
icon: 'hamburger-menu-line-duotone',
|
||||
to: '/ui-components/expansionPanel'
|
||||
},
|
||||
{
|
||||
title: 'List',
|
||||
icon: 'list-line-duotone',
|
||||
to: '/ui-components/list'
|
||||
},
|
||||
{
|
||||
title: 'Menus',
|
||||
icon: 'menu-dots-line-duotone',
|
||||
to: '/ui-components/menus'
|
||||
},
|
||||
{
|
||||
title: 'Ratting',
|
||||
icon: 'star-line-duotone',
|
||||
to: '/ui-components/ratting'
|
||||
},
|
||||
{
|
||||
title: 'Tables',
|
||||
icon: 'tablet-line-duotone',
|
||||
to: '/ui-components/tables'
|
||||
},
|
||||
{
|
||||
title: 'Tabs',
|
||||
icon: 'notebook-line-duotone',
|
||||
to: '/ui-components/tabs'
|
||||
},
|
||||
{
|
||||
title: 'Tooltip',
|
||||
icon: 'chat-round-dots-line-duotone',
|
||||
to: '/ui-components/tooltip'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
];
|
||||
|
||||
export default sidebarItem;
|
||||
Reference in New Issue
Block a user