<template>
	<div class="sidebar-logo-container" style="display: inline-block;width:auto;">
		<transition name="sidebarLogoFade">
			<router-link class="sidebar-logo-link" to="/">
				<el-image :src="collapse?logoSmall:logo" class="sidebar-logo" fit="fill" />
			</router-link>
		</transition>
	</div>
</template>

<script setup>
	import variables from '@/assets/styles/variables.module.scss'
	import logo from '@/assets/logo/logo_yz.png'
	import logoSmall from '@/assets/logo/logo_yz_small.png'
	defineProps({
		collapse: {
			type: Boolean,
			required: true
		}
	})

	const title = ref('易站智联科技（广州）有限公司');
	const store = useStore();
	const sideTheme = computed(() => store.state.settings.sideTheme);
</script>

<style lang="scss" scoped>
	.sidebar-logo-container {
		position: relative;
		width: 100%;
		height: 50px;
		line-height: 50px;
		overflow: hidden;
		& .sidebar-logo-link {
			height: 100%;
			width: 100%;
			& .sidebar-logo {
				height: 42px;
				vertical-align: middle;
			}
		}
	}
</style>