Files
vue3-element-admin/src/layout/components/Sidebar/Logo.vue
haoxr 498298ef66 refactor: 暗黑模式自定义样式统一
Former-commit-id: 83dc3250edd859af22c13cf12835327c71709f55
2023-01-18 14:07:21 +08:00

42 lines
1012 B
Vue

<script lang="ts" setup>
import { ref } from 'vue';
import { useSettingsStore } from '@/store/modules/settings';
const settingsStore = useSettingsStore();
defineProps({
collapse: {
type: Boolean,
required: true
}
});
const logo = ref<string>(
new URL(`../../../assets/logo.png`, import.meta.url).href
);
</script>
<template>
<transition class="bg-gray-800 dark:bg-[var(--el-bg-color-overlay)]">
<router-link
v-if="collapse"
key="collapse"
class="h-[50px] flex items-center justify-center"
to="/"
>
<img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" />
<h1 v-else>vue3-element-admin</h1>
</router-link>
<router-link
v-else
key="expand"
class="h-[50px] flex items-center justify-center"
to="/"
>
<img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" />
<span class="ml-3 text-white text-sm font-bold">vue3-element-admin</span>
</router-link>
</transition>
</template>