Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Theme composable completed

Browse Source
This commit is contained in:
Bahadır Sofuoğlu
2022-11-02 15:49:48 +03:00
parent 52e57309a0
commit 8ddf9d47bf
5 changed files with 208 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/composables/theme.js Normal file
View File

@@ -0,0 +1,52 @@
import { toRefs, reactive } from 'vue';
const appConfig = reactive({
ripple: false,
darkTheme: false,
inputStyle: 'outlined',
menuMode: 'static',
theme: 'lara-light-indigo',
scale: 14
});
const layoutState = reactive({
staticMenuDesktopInactive: false,
overlayMenuActive: false,
profileSidebarVisible: false,
configSidebarVisible: false,
staticMenuMobileActive: false,
menuHoverActive: false
});
export function useThemeService () {
const changeThemeSettings = (theme, darkTheme) => {
appConfig.theme = theme;
appConfig.darkTheme = darkTheme;
};
const setScale = scale => {
appConfig.scale = scale;
};
const onMenuToggle = () => {
debugger;
if (appConfig.menuMode === 'overlay') {
layoutState.overlayMenuActive = !layoutState.overlayMenuActive;
/* if (layoutState.overlayMenuActive) {
this.overlayOpen.next(null);
} */
}
if (window.innerWidth > 991) {
layoutState.staticMenuDesktopInactive = !layoutState.staticMenuDesktopInactive;
} else {
layoutState.staticMenuMobileActive = !layoutState.staticMenuMobileActive;
/* if (this.state.staticMenuMobileActive) {
this.overlayOpen.next(null);
} */
}
};
return { appConfig: toRefs(appConfig), layoutState: toRefs(layoutState), changeThemeSettings, setScale, onMenuToggle };
}

192
src/layout/AppConfig.vue
View File

@@ -3,24 +3,24 @@
<i class="pi pi-cog"></i>
</button>
<Sidebar [(visible)]="visible" position="right" [transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'" styleClass="layout-config-sidebar w-20rem">
<Sidebar v-model:visible="visible" position="right" :transitionOptions="'.3s cubic-bezier(0, 0, 0.2, 1)'" class="layout-config-sidebar w-20rem">
<h5>Scale</h5>
<div class="flex align-items-center">
<button icon="pi pi-minus" type="button" @click="decrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem mr-2" :disabled="scale === scales[0]"></button>
<Button icon="pi pi-minus" type="button" @click="decrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem mr-2" :disabled="appConfig.scale.value === scales[0]"></Button>
<div class="flex gap-2 align-items-center">
<i class="pi pi-circle-fill text-300" v-for="s in scales" :key="s" :class="{ 'text-primary-500': s === scale }"></i>
<i class="pi pi-circle-fill text-300" v-for="s in scales" :key="s" :class="{ 'text-primary-500': s === appConfig.scale.value }"></i>
</div>
<button icon="pi pi-plus" type="button" pButton @click="incrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem ml-2" :disabled="scale === scales[scales.length - 1]"></button>
<Button icon="pi pi-plus" type="button" pButton @click="incrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem ml-2" :disabled="appConfig.scale.value === scales[scales.length - 1]"></Button>
</div>
<template v-if="!minimal">
<h5>Menu Type</h5>
<div class="field-radiobutton">
<RadioButton name="menuMode" value="static" [(ngModel)]="menuMode" inputId="mode1"></RadioButton>
<RadioButton name="menuMode" value="static" v-model="appConfig.menuMode.value" inputId="mode1"></RadioButton>
<label for="mode1">Static</label>
</div>
<div class="field-radiobutton">
<RadioButton name="menuMode" value="overlay" [(ngModel)]="menuMode" inputId="mode2"></RadioButton>
<RadioButton name="menuMode" value="overlay" v-model="appConfig.menuMode.value" inputId="mode2"></RadioButton>
<label for="mode2">Overlay</label>
</div>
</template>
@@ -29,39 +29,39 @@
<h5>Input Style</h5>
<div class="flex">
<div class="field-radiobutton flex-1">
<RadioButton name="inputStyle" value="outlined" [(ngModel)]="inputStyle" inputId="outlined_input"></RadioButton>
<RadioButton name="inputStyle" value="outlined" v-model="appConfig.inputStyle.value" inputId="outlined_input"></RadioButton>
<label for="outlined_input">Outlined</label>
</div>
<div class="field-radiobutton flex-1">
<RadioButton name="inputStyle" value="filled" [(ngModel)]="inputStyle" inputId="filled_input"></RadioButton>
<RadioButton name="inputStyle" value="filled" v-model="appConfig.inputStyle.value" inputId="filled_input"></RadioButton>
<label for="filled_input">Filled</label>
</div>
</div>
<h5>Ripple Effect</h5>
<InputSwitch [(ngModel)]="ripple"></InputSwitch>
<InputSwitch v-model="appConfig.ripple.value"></InputSwitch>
</template>
<h5>Bootstrap</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('bootstrap4-light-blue', 'light')">
<img src="assets/layout/images/themes/bootstrap4-light-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Light Blue" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-light-blue', 'light')">
<img src="@/assets/layout/images/themes/bootstrap4-light-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Light Blue" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('bootstrap4-light-purple', 'light')">
<img src="assets/layout/images/themes/bootstrap4-light-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Light Purple" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-light-purple', 'light')">
<img src="@/assets/layout/images/themes/bootstrap4-light-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Light Purple" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('bootstrap4-dark-blue', 'dark')">
<img src="assets/layout/images/themes/bootstrap4-dark-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Blue" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-dark-blue', 'dark')">
<img src="@/assets/layout/images/themes/bootstrap4-dark-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Blue" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('bootstrap4-dark-purple', 'dark')">
<img src="assets/layout/images/themes/bootstrap4-dark-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Purple" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-dark-purple', 'dark')">
<img src="@/assets/layout/images/themes/bootstrap4-dark-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Purple" />
</button>
</div>
</div>
@@ -69,23 +69,23 @@
<h5>Material Design</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('md-light-indigo', 'light')">
<img src="assets/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-light-indigo', 'light')">
<img src="@/assets/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('md-light-deeppurple', 'light')">
<img src="assets/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light DeepPurple" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-light-deeppurple', 'light')">
<img src="@/assets/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light DeepPurple" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('md-dark-indigo', 'dark')">
<img src="assets/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-dark-indigo', 'dark')">
<img src="@/assets/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('md-dark-deeppurple', 'dark')">
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark DeepPurple" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-dark-deeppurple', 'dark')">
<img src="@/assets/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark DeepPurple" />
</button>
</div>
</div>
@@ -93,23 +93,23 @@
<h5>Material Design Compact</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('mdc-light-indigo', 'light')">
<img src="assets/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-light-indigo', 'light')">
<img src="@/assets/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('mdc-light-deeppurple', 'light')">
<img src="assets/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light Deep Purple" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-light-deeppurple', 'light')">
<img src="@/assets/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light Deep Purple" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('mdc-dark-indigo', 'dark')">
<img src="assets/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-dark-indigo', 'dark')">
<img src="@/assets/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('mdc-dark-deeppurple', 'dark')">
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark Deep Purple" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-dark-deeppurple', 'dark')">
<img src="@/assets/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark Deep Purple" />
</button>
</div>
</div>
@@ -117,8 +117,8 @@
<h5>Tailwind</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('tailwind-light', 'light')">
<img src="assets/layout/images/themes/tailwind-light.png" class="w-2rem h-2rem" alt="Tailwind Light" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('tailwind-light', 'light')">
<img src="@/assets/layout/images/themes/tailwind-light.png" class="w-2rem h-2rem" alt="Tailwind Light" />
</button>
</div>
</div>
@@ -126,8 +126,8 @@
<h5>Fluent UI</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('fluent-light', 'light')">
<img src="assets/layout/images/themes/fluent-light.png" class="w-2rem h-2rem" alt="Fluent Light" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('fluent-light', 'light')">
<img src="@/assets/layout/images/themes/fluent-light.png" class="w-2rem h-2rem" alt="Fluent Light" />
</button>
</div>
</div>
@@ -135,43 +135,43 @@
<h5>PrimeOne Design - 2022</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('lara-light-indigo', 'light')">
<img src="assets/layout/images/themes/lara-light-indigo.png" class="w-2rem h-2rem" alt="Lara Light Indigo" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-indigo', 'light')">
<img src="@/assets/layout/images/themes/lara-light-indigo.png" class="w-2rem h-2rem" alt="Lara Light Indigo" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('lara-light-blue', 'light')">
<img src="assets/layout/images/themes/lara-light-blue.png" class="w-2rem h-2rem" alt="Lara Light Blue" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-blue', 'light')">
<img src="@/assets/layout/images/themes/lara-light-blue.png" class="w-2rem h-2rem" alt="Lara Light Blue" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('lara-light-purple', 'light')">
<img src="assets/layout/images/themes/lara-light-purple.png" class="w-2rem h-2rem" alt="Lara Light Purple" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-purple', 'light')">
<img src="@/assets/layout/images/themes/lara-light-purple.png" class="w-2rem h-2rem" alt="Lara Light Purple" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('lara-light-teal', 'light')">
<img src="assets/layout/images/themes/lara-light-teal.png" class="w-2rem h-2rem" alt="Lara Light Teal" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-teal', 'light')">
<img src="@/assets/layout/images/themes/lara-light-teal.png" class="w-2rem h-2rem" alt="Lara Light Teal" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('lara-dark-indigo', 'dark')">
<img src="assets/layout/images/themes/lara-dark-indigo.png" class="w-2rem h-2rem" alt="Lara Dark Indigo" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-indigo', 'dark')">
<img src="@/assets/layout/images/themes/lara-dark-indigo.png" class="w-2rem h-2rem" alt="Lara Dark Indigo" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('lara-dark-blue', 'dark')">
<img src="assets/layout/images/themes/lara-dark-blue.png" class="w-2rem h-2rem" alt="Lara Dark Blue" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-blue', 'dark')">
<img src="@/assets/layout/images/themes/lara-dark-blue.png" class="w-2rem h-2rem" alt="Lara Dark Blue" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('lara-dark-purple', 'dark')">
<img src="assets/layout/images/themes/lara-dark-purple.png" class="w-2rem h-2rem" alt="Lara Dark Purple" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-purple', 'dark')">
<img src="@/assets/layout/images/themes/lara-dark-purple.png" class="w-2rem h-2rem" alt="Lara Dark Purple" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('lara-dark-teal', 'dark')">
<img src="assets/layout/images/themes/lara-dark-teal.png" class="w-2rem h-2rem" alt="Lara Dark Teal" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-teal', 'dark')">
<img src="@/assets/layout/images/themes/lara-dark-teal.png" class="w-2rem h-2rem" alt="Lara Dark Teal" />
</button>
</div>
</div>
@@ -179,63 +179,63 @@
<h5>PrimeOne Design - 2021</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('saga-blue', 'light')">
<img src="assets/layout/images/themes/saga-blue.png" class="w-2rem h-2rem" alt="Saga Blue" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-blue', 'light')">
<img src="@/assets/layout/images/themes/saga-blue.png" class="w-2rem h-2rem" alt="Saga Blue" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('saga-green', 'light')">
<img src="assets/layout/images/themes/saga-green.png" class="w-2rem h-2rem" alt="Saga Green" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-green', 'light')">
<img src="@/assets/layout/images/themes/saga-green.png" class="w-2rem h-2rem" alt="Saga Green" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('saga-orange', 'light')">
<img src="assets/layout/images/themes/saga-orange.png" class="w-2rem h-2rem" alt="Saga Orange" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-orange', 'light')">
<img src="@/assets/layout/images/themes/saga-orange.png" class="w-2rem h-2rem" alt="Saga Orange" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('saga-purple', 'light')">
<img src="assets/layout/images/themes/saga-purple.png" class="w-2rem h-2rem" alt="Saga Purple" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-purple', 'light')">
<img src="@/assets/layout/images/themes/saga-purple.png" class="w-2rem h-2rem" alt="Saga Purple" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('vela-blue', 'dark')">
<img src="assets/layout/images/themes/vela-blue.png" class="w-2rem h-2rem" alt="Vela Blue" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-blue', 'dark')">
<img src="@/assets/layout/images/themes/vela-blue.png" class="w-2rem h-2rem" alt="Vela Blue" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('vela-green', 'dark')">
<img src="assets/layout/images/themes/vela-green.png" class="w-2rem h-2rem" alt="Vela Green" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-green', 'dark')">
<img src="@/assets/layout/images/themes/vela-green.png" class="w-2rem h-2rem" alt="Vela Green" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('vela-orange', 'dark')">
<img src="assets/layout/images/themes/vela-orange.png" class="w-2rem h-2rem" alt="Vela Orange" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-orange', 'dark')">
<img src="@/assets/layout/images/themes/vela-orange.png" class="w-2rem h-2rem" alt="Vela Orange" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('vela-purple', 'dark')">
<img src="assets/layout/images/themes/vela-purple.png" class="w-2rem h-2rem" alt="Vela Purple" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-purple', 'dark')">
<img src="@/assets/layout/images/themes/vela-purple.png" class="w-2rem h-2rem" alt="Vela Purple" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('arya-blue', 'dark')">
<img src="assets/layout/images/themes/arya-blue.png" class="w-2rem h-2rem" alt="Arya Blue" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-blue', 'dark')">
<img src="@/assets/layout/images/themes/arya-blue.png" class="w-2rem h-2rem" alt="Arya Blue" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('arya-green', 'dark')">
<img src="assets/layout/images/themes/arya-green.png" class="w-2rem h-2rem" alt="Arya Green" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-green', 'dark')">
<img src="@/assets/layout/images/themes/arya-green.png" class="w-2rem h-2rem" alt="Arya Green" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('arya-orange', 'dark')">
<img src="assets/layout/images/themes/arya-orange.png" class="w-2rem h-2rem" alt="Arya Orange" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-orange', 'dark')">
<img src="@/assets/layout/images/themes/arya-orange.png" class="w-2rem h-2rem" alt="Arya Orange" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="changeTheme('arya-purple', 'dark')">
<img src="assets/layout/images/themes/arya-purple.png" class="w-2rem h-2rem" alt="Arya Purple" />
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-purple', 'dark')">
<img src="@/assets/layout/images/themes/arya-purple.png" class="w-2rem h-2rem" alt="Arya Purple" />
</button>
</div>
</div>
@@ -244,8 +244,46 @@
<script setup>
import { ref } from 'vue';
import { useThemeService } from '@/composables/theme';
const scales = ref([12, 13, 14, 15, 16]);
const visible = ref(false);
const { changeThemeSettings, setScale, appConfig } = useThemeService();
const onConfigButtonClick = () => {
visible.value = !visible.value;
};
const onChangeTheme = (theme, mode) => {
const elementId = 'theme-css';
const linkElement = document.getElementById(elementId);
const cloneLinkElement = linkElement.cloneNode(true);
const newThemeUrl = linkElement.getAttribute('href').replace(appConfig.theme.value, theme);
cloneLinkElement.setAttribute('id', elementId + '-clone');
cloneLinkElement.setAttribute('href', newThemeUrl);
cloneLinkElement.addEventListener('load', () => {
linkElement.remove();
cloneLinkElement.setAttribute('id', elementId);
});
linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
changeThemeSettings(theme, mode === 'dark');
};
const decrementScale = () => {
setScale(appConfig.scale.value - 1);
applyScale();
};
const incrementScale = () => {
setScale(appConfig.scale.value + 1);
console.log(appConfig.scale);
applyScale();
};
const applyScale = () => {
document.documentElement.style.fontSize = appConfig.scale.value + 'px';
};
</script>
<style lang="scss" scoped></style>

11
src/layout/AppFooter.vue
View File

@@ -1,9 +1,18 @@
<template>
<div class="layout-footer">
<img src="assets/layout/images/{{layoutService.config.colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="Logo" height="20" class="mr-2" />
<img :src="logoUrl()" alt="Logo" height="20" class="mr-2" />
by
<span class="font-medium ml-2">PrimeNG</span>
</div>
</template>
<script setup>
import { useThemeService } from '@/composables/theme';
const { appConfig } = useThemeService();
const logoUrl = () => {
return new URL(`/src/assets/layout/images/${appConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
};
</script>
<style lang="scss" scoped></style>

21
src/layout/AppLayout.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="layout-wrapper">
<div class="layout-wrapper" :class="containerClass">
<app-topbar></app-topbar>
<div class="layout-sidebar">
<app-sidebar></app-sidebar>
@@ -16,10 +16,29 @@
</template>
<script setup>
import { computed } from 'vue';
import AppTopbar from './AppTopbar.vue';
import AppFooter from './AppFooter.vue';
import AppSidebar from './AppSidebar.vue';
import AppConfig from './AppConfig.vue';
import { useThemeService } from '@/composables/theme';
const { appConfig, layoutState } = useThemeService();
const containerClass = computed(() => {
return {
'layout-theme-light': appConfig.darkTheme.value === 'light',
'layout-theme-dark': appConfig.darkTheme.value === 'dark',
'layout-overlay': appConfig.menuMode.value === 'overlay',
'layout-static': appConfig.menuMode.value === 'static',
'layout-static-inactive': layoutState.staticMenuDesktopInactive.value && appConfig.menuMode.value === 'static',
'layout-overlay-active': layoutState.overlayMenuActive.value,
'layout-mobile-active': layoutState.staticMenuMobileActive.value,
'p-input-filled': appConfig.inputStyle.value === 'filled',
'p-ripple-disabled': !appConfig.ripple.value
};
});
</script>
<style lang="scss" scoped></style>

14
src/layout/AppTopbar.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="layout-topbar">
<a class="layout-topbar-logo">
<img src="assets/layout/images/.svg" alt="logo" />
<img :src="logoUrl()" alt="logo" />
<span>SAKAI</span>
</a>
<button class="p-link layout-menu-button layout-topbar-button">
<button class="p-link layout-menu-button layout-topbar-button" @click="onMenuToggle()">
<i class="pi pi-bars"></i>
</button>
@@ -30,6 +30,14 @@
</div>
</template>
<script setup></script>
<script setup>
import { useThemeService } from '@/composables/theme';
const { appConfig, onMenuToggle } = useThemeService();
const logoUrl = () => {
return new URL(`/src/assets/layout/images/${appConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
};
</script>
<style lang="scss" scoped></style>