<template>
  <router-link class="side-logo" to="/">
    <div class="side-logo__mark">
      <img src="@/assets/images/logo.png" height="42" />
    </div>
    <div v-show="!appStore.collapsed" class="side-logo__text">
      <p class="side-logo__eyebrow">WireGuard Control</p>
      <h2 class="side-logo__title">{{ title }}</h2>
    </div>
  </router-link>
</template>

<script setup>
import { useAppStore } from '@/store'
const title = import.meta.env.VITE_TITLE

const appStore = useAppStore()
</script>

<style scoped lang="scss">
.side-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 8px;
  border-radius: 14px;
  color: #0f172a;
  background: #eef4fb;
}

.side-logo__mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.side-logo__eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
}

.side-logo__title {
  margin: 4px 0 0;
  max-width: 110px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: #0f172a;
}
</style>
