mirza.millahsyafiq.0912/template-matdash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init project

Browse Source
This commit is contained in:
Mirza Millahsyafiq Khusni
2025-03-12 10:20:27 +07:00
commit fe04ff1137
84 changed files with 3050 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
package/components/layout/full/Main.vue Normal file
View File

@@ -0,0 +1,59 @@
<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import sidebarItems from '@/components/layout/full/vertical-sidebar/sidebarItem';
import { Menu2Icon } from 'vue-tabler-icons';
const sidebarMenu = shallowRef(sidebarItems);
const sDrawer = ref(true);
</script>
<template>
<!------Sidebar-------->
<v-navigation-drawer left elevation="0" app class="leftSidebar" v-model="sDrawer">
<!---Logo part -->
<div class="pa-5">
<LayoutFullLogo />
</div>
<!-- ---------------------------------------------- -->
<!---Navigation -->
<!-- ---------------------------------------------- -->
<div>
<perfect-scrollbar class="scrollnavbar">
<v-list class="pa-6 pt-0">
<!---Menu Loop -->
<template v-for="(item, i) in sidebarMenu">
<!---Item Sub Header -->
<LayoutFullVerticalSidebarNavGroup :item="item" v-if="item.header" :key="item.title" />
<!---Single Item-->
<LayoutFullVerticalSidebarNavItem :item="item" v-else class="leftPadding" />
<!---End Single Item-->
</template>
</v-list>
<div class="pa-4">
<LayoutFullVerticalSidebarUpgradeBox/>
</div>
</perfect-scrollbar>
</div>
</v-navigation-drawer>
<!------Header-------->
<v-app-bar elevation="0" height="70">
<div class="d-flex align-center justify-space-between w-100">
<div>
<v-btn class="hidden-lg-and-up ms-md-3 ms-sm-5 ms-3 text-muted" @click="sDrawer = !sDrawer" icon variant="flat"
size="small">
<Menu2Icon size="20" stroke-width="1.5" />
</v-btn>
<!-- Notification -->
<LayoutFullVerticalHeaderNotificationDD/>
</div>
<div>
<!-- Upgrade button -->
<v-btn class="mr-2 bg-primary" href="https://adminmart.com/templates/nuxtjs/" target="_blank">Download Free</v-btn>
<!-- User Profile -->
<LayoutFullVerticalHeaderProfileDD />
</div>
</div>
</v-app-bar>
</template>

3
package/components/layout/full/logo/Logo.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<LayoutFullLogoDark />
</template>

10
package/components/layout/full/logo/LogoDark.vue Normal file
View File

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

10
package/components/layout/full/vertical-header/NotificationDD.vue Normal file
View File

@@ -0,0 +1,10 @@
<script setup lang="ts">
import { Icon } from '@iconify/vue';
</script>
<template>
<v-btn icon class="custom-hover-primary" size="small" variant="text" rounded="circle" color="primary" >
<v-badge dot color="primary" offset-x="-5" offset-y="-3">
<Icon icon="solar:bell-bing-line-duotone" height="22" />
</v-badge>
</v-btn>
</template>

43
package/components/layout/full/vertical-header/ProfileDD.vue Normal file
View File

@@ -0,0 +1,43 @@
<script setup lang="ts">
import { UserIcon, MailIcon, ListCheckIcon } from 'vue-tabler-icons';
</script>
<template>
<!-- ---------------------------------------------- -->
<!-- notifications DD -->
<!-- ---------------------------------------------- -->
<v-menu :close-on-content-click="false">
<template v-slot:activator="{ props }">
<v-btn class="profileBtn custom-hover-primary" variant="text" rounded="circle" v-bind="props" icon>
<v-avatar size="35">
<img src="/images/profile/user-1.jpg" height="35" alt="user" />
</v-avatar>
</v-btn>
</template>
<v-sheet rounded="md" width="200" elevation="10" class="mt-2">
<v-list class="py-0" lines="one" density="compact">
<v-list-item value="item1" active-color="primary" >
<template v-slot:prepend>
<UserIcon stroke-width="1.5" size="20"/>
</template>
<v-list-item-title class="pl-4 text-body-1">My Profile</v-list-item-title>
</v-list-item>
<v-list-item value="item2" active-color="primary">
<template v-slot:prepend>
<MailIcon stroke-width="1.5" size="20"/>
</template>
<v-list-item-title class="pl-4 text-body-1">My Account</v-list-item-title>
</v-list-item>
<v-list-item value="item3" active-color="primary">
<template v-slot:prepend>
<ListCheckIcon stroke-width="1.5" size="20"/>
</template>
<v-list-item-title class="pl-4 text-body-1">My Task</v-list-item-title>
</v-list-item>
</v-list>
<div class="pt-4 pb-4 px-5 text-center">
<v-btn to="/auth/login" color="primary" variant="outlined" block>Logout</v-btn>
</div>
</v-sheet>
</v-menu>
</template>

23
package/components/layout/full/vertical-sidebar/Icon.vue Normal file
View 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>

7
package/components/layout/full/vertical-sidebar/NavGroup/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<script setup>
const props = defineProps({ item: Object });
</script>
<template>
<v-list-subheader color="darkText" class="smallCap text-uppercase text-subtitle-2 mt-5 font-weight-bold mini-text">{{ props.item.header}}</v-list-subheader>
</template>

37
package/components/layout/full/vertical-sidebar/NavItem/index.vue Normal file
View File

@@ -0,0 +1,37 @@
<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
class="mb-1"
:disabled="item.disabled"
:target="item.type === 'external' ? '_blank' : ''">
<!---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>{{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>

15
package/components/layout/full/vertical-sidebar/UpgradeBox/index.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<v-sheet rounded="md" color="lightprimary" class="ExtraBox hide-menu mx-1 px-4 py-3">
<div class="d-flex align-center">
<div>
<h6 class="text-h6 text-10 mb-3">Upgrade to pro</h6>
<v-btn href="https://adminmart.com/product/matdash-vuetify-nuxt-js-admin-template/?ref=5" target="_blank" color="primary" flat>Buy Pro</v-btn>
</div>
<div class="">
<img src="/images/backgrounds/rupee.png" class="w-100 ms-9 px-2" />
</div>
</div>
</v-sheet>
</template>

63
package/components/layout/full/vertical-sidebar/sidebarItem.ts Normal file
View File

@@ -0,0 +1,63 @@
export interface menu {
header?: string;
title?: string;
icon?: any;
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: 'Home' },
{
title: 'Dashboard',
icon: 'widget-add-line-duotone',
to: '/'
},
{ header: 'utilities' },
{
title: 'Typography',
icon: 'text-circle-outline',
to: '/ui/typography'
},
{
title: 'Shadow',
icon: 'watch-square-minimalistic-charge-line-duotone',
to: '/ui/shadow'
},
{ header: 'auth' },
{
title: 'Login',
icon: 'login-3-line-duotone',
to: '/auth/login'
},
{
title: 'Register',
icon: 'user-plus-rounded-line-duotone',
to: '/auth/register'
},
{ header: 'Extra' },
{
title: 'Icons',
icon: 'sticker-smile-circle-2-line-duotone',
to: '/icons'
},
{
title: 'Sample Page',
icon: 'planet-3-line-duotone',
to: '/sample-page'
},
];
export default sidebarItem;