dwi.firman/cobaKeuangan
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dark & light theme

Browse Source
This commit is contained in:
davila.erdianita.1005
2025-06-16 15:01:07 +07:00
parent 08542471d0
commit 0b7f20b800
8 changed files with 190 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/layout/full/Main.vue
+5 -3
View File
@@ -64,7 +64,7 @@ watch([mdAndDown, () => props.items], ([mdVal, items]) => {
<LayoutFullVerticalHeaderNotificationDD />
</div>
<div>
<v-menu :close-on-content-click="true" class="mobile_popup">
<!-- <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" />
@@ -72,6 +72,7 @@ watch([mdAndDown, () => props.items], ([mdVal, items]) => {
</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">
<LayoutFullVerticalHeaderRightMobileSidebar />
<LayoutFullVerticalHeaderNotificationDD />
<v-btn icon variant="text" class="mr-sm-3 mr-2 custom-hover-primary" to="/ecommerce/checkout" size="small">
@@ -82,10 +83,11 @@ watch([mdAndDown, () => props.items], ([mdVal, items]) => {
</div>
</v-sheet>
</v-menu>
</v-menu> -->
</div>
<div>
<!-- <LayoutFullVerticalHeaderRightMobileSidebar /> -->
<LayoutFullVerticalHeaderRightMobileSidebar />
<LayoutFullVerticalHeaderThemeToggler />
<LayoutFullVerticalHeaderNavigations />
<LayoutFullVerticalHeaderProfileDD />
</div>
components/layout/full/vertical-header/AppsLink.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import {appsLink} from '~/_mockApis/headerData';
import {appsLink} from '@/_mockApis/headerData';
import { Icon } from '@iconify/vue';
</script>
<template>
@@ -21,4 +21,4 @@ import { Icon } from '@iconify/vue';
</router-link>
</v-col>
</v-row>
</template>
</template>
components/layout/full/vertical-header/RightMobileSidebar.vue
+16 -51
View File
@@ -1,59 +1,24 @@
<script setup lang="ts">
import { ref } from 'vue';
import { AppsIcon, CalendarIcon, MailIcon, MessagesIcon } from 'vue-tabler-icons';
import AppsLink from './AppsLink.vue';
//import QuickLinks from './QuickLinks.vue';
const open = ref(['Apps']);
import { Icon } from '@iconify/vue';
</script>
<template>
<div class="pt-6">
<h5 class="text-h5 mb-4 px-5">Navigation</h5>
<v-list v-model:opened="open" class="right-sidebar">
<v-list-group value="Apps">
<template v-slot:activator="{ props }">
<v-list-item v-bind="props">
<template v-slot:prepend>
<AppsIcon width="21" stroke-width="1.5" />
</template>
<h5 class="text-subtitle-1 ml-2">Apps</h5>
</v-list-item>
</template>
<v-list-item class="pl-6 pb-6">
<div>
<AppsLink />
</div>
</v-list-item>
</v-list-group>
<v-list-item>
<template v-slot:prepend>
<MessagesIcon width="21" stroke-width="1.5" />
</template>
<h5 class="text-subtitle-1 ml-2">Chats</h5>
</v-list-item>
<v-list-item>
<template v-slot:prepend>
<CalendarIcon width="21" stroke-width="1.5" />
</template>
<h5 class="text-subtitle-1 ml-2">Calendar</h5>
</v-list-item>
<v-list-item>
<template v-slot:prepend>
<MailIcon width="21" stroke-width="1.5" />
</template>
<h5 class="text-subtitle-1 ml-2">Mail</h5>
</v-list-item>
</v-list>
<div class="px-5">
<h5 class="text-h5 my-4">Quick Links</h5>
<!-- <QuickLinks /> -->
</div>
</div>
<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">
<AppsLink />
</div>
</perfect-scrollbar>
</v-sheet>
</v-menu>
</template>
<style scoped>
.right-sidebar .v-list-group__items .v-list-item {
padding-inline-start: 26px !important;
}
</style>
components/layout/full/vertical-header/ThemeToggler.vue
+77
View File
@@ -0,0 +1,77 @@
<script setup lang="ts">
import { ref } from "vue";
import { useTheme } from "vuetify";
import { useCustomizerStore } from "@/stores/customizer";
import { Icon } from "@iconify/vue";
import { useNuxtApp } from "#app";
// import vuetify from '~/plugins/vuetify';
const theme = useTheme();
const customizer = useCustomizerStore();
// themes color options
const themeColors = ref([
{
name: "BLUE_THEME",
bg: "togglethemeBlue",
},
{
name: "DARK_BLUE_THEME",
bg: "togglethemeDarkBlue",
},
]);
console.log("Masuk theme")
const vuetify = useNuxtApp().$vuetify;
// const selectTheme = ref();
const selectTheme = () => {
if (customizer.actTheme == "BLUE_THEME")
customizer.SET_THEME(themeColors.value[1].name);
else customizer.SET_THEME(themeColors.value[0].name);
// vuetify.theme.dark = customizer.actTheme == 'DARK_BLUE_THEME'
vuetify.theme.global.name.value = customizer.actTheme;
console.log("customizer.actTheme", vuetify.theme.global.name);
};
</script>
<template>
<!-- <div class="position-relative">
<v-item-group mandatory v-model="customizer.actTheme" class="d-flex">
<div v-for="theme in themeColors" :key="theme.name">
<v-item v-slot="{toggle }" :value="theme.name">
<v-sheet rounded="circle" class="cursor-pointer text-center hover-btns" elevation="0" @click="toggle">
<v-btn icon :class="theme.bg" class="custom-hover-primary" size="small" variant="text" color="primary" >
<Icon v-if="theme.bg == 'togglethemeBlue'" icon="solar:sun-2-line-duotone" :class="theme.bg" height="22" />
<Icon v-if="theme.bg == 'togglethemeDarkBlue'" icon="solar:moon-line-duotone" :class="theme.bg" height="22" />
</v-btn>
</v-sheet>
</v-item>
</div>
</v-item-group>
</div> -->
<!-- <div class="position-relative"> -->
<v-btn
icon
:class="theme.bg"
class="custom-hover-primary"
size="small"
variant="text"
color="primary"
v-model="customizer.actTheme"
@click="selectTheme"
>
<Icon
v-if="customizer.actTheme == 'BLUE_THEME'"
icon="solar:sun-2-line-duotone"
:class="themeColors[0].bg"
height="22"
/>
<Icon
v-if="customizer.actTheme == 'DARK_BLUE_THEME'"
icon="solar:moon-line-duotone"
:class="themeColors[1].bg"
height="22"
/>
</v-btn>
<!-- </div> -->
</template>