<template>
  <div class="sidebar-logo" :class="{ 'is-collapsed': collapsed }">
    <div class="logo-icon">
      <img :src="Logo" alt="游戏盾" />
    </div>
    <span v-if="!collapsed" class="logo-text">游戏盾SDK</span>
  </div>
</template>
<script setup lang="ts">
import Logo from '@/assets/logo/logo.png'

defineProps<{
  collapsed?: boolean
}>()
</script>

<style scoped lang="scss">
.sidebar-logo {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 12px;
  padding: 0 20px;
  overflow: hidden;

  &.is-collapsed {
    justify-content: center;
    padding: 0;
  }

  .logo-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .logo-text {
    color: var(--admin-text-primary);
    font-size: 24px;
    font-weight: 600;
    white-space: nowrap;
  }
}
</style>
