| 1 | <template> |
| 2 | <div class="logo"> |
| 3 | <Transition name="logo-fade" mode="out-in"> |
| 4 | <img |
| 5 | :key="logoSrc" |
| 6 | :src="logoSrc" |
| 7 | alt="SOCFortress logo" |
| 8 | aria-label="SOCFortress logo" |
| 9 | class="logo-image" |
| 10 | /> |
| 11 | </Transition> |
| 12 | </div> |
| 13 | </template> |
| 14 | |
| 15 | <script lang="ts" setup> |
| 16 | import { computed } from "vue" |
| 17 | import { useThemeStore } from "@/stores/theme" |
| 18 | |
| 19 | interface Props { |
| 20 | type?: "default" | "small" | "large" |
| 21 | dark?: boolean |
| 22 | maxHeight?: string |
| 23 | } |
| 24 | |
| 25 | const props = withDefaults(defineProps<Props>(), { |
| 26 | type: "default", |
| 27 | dark: undefined, |
| 28 | maxHeight: "32px" |
| 29 | }) |
| 30 | |
| 31 | const themeStore = useThemeStore() |
| 32 | |
| 33 | const isDark = computed<boolean>(() => props.dark ?? themeStore.isThemeDark) |
| 34 | |
| 35 | const logoSrc = computed<string>(() => { |
| 36 | const theme = isDark.value ? "dark" : "light" |
| 37 | return new URL(`../../assets/images/socfortress_logo_${props.type}_${theme}.svg`, import.meta.url).href |
| 38 | }) |
| 39 | </script> |
| 40 | |
| 41 | <style lang="scss" scoped> |
| 42 | .logo { |
| 43 | height: 100%; |
| 44 | display: flex; |
| 45 | align-items: center; |
| 46 | justify-content: center; |
| 47 | position: relative; |
| 48 | |
| 49 | .logo-image { |
| 50 | max-height: v-bind(maxHeight); |
| 51 | height: 100%; |
| 52 | width: auto; |
| 53 | display: block; |
| 54 | object-fit: contain; |
| 55 | } |
| 56 | } |
| 57 | |
| 58 | // Smooth transition between theme changes |
| 59 | .logo-fade-enter-active, |
| 60 | .logo-fade-leave-active { |
| 61 | transition: opacity 0.2s ease-in-out; |
| 62 | } |
| 63 | |
| 64 | .logo-fade-enter-from, |
| 65 | .logo-fade-leave-to { |
| 66 | opacity: 0; |
| 67 | } |
| 68 | </style> |