<template>
  <div class="page-layout">
    <aside class="sidebar">
      <div class="flex items-center gap-3 px-14 py-4">
        <div class="avatar">
          <div class="h-[155px] w-[155px]">
            <img
                :src="logoSrc"
                alt="Logo Malio"
                class="h-full w-full object-contain"
            />
          </div>
        </div>
      </div>
      <slot name="sidebar" />
    </aside>
    <main class="content">
      <slot />
    </main>
  </div>
</template>
<script setup lang="ts">
import logoSrc from '~/assets/LOGO_CARRE_BLANC.png'
</script>

<style scoped>
.page-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}

.sidebar {
  background-color: rgb(var(--m-primary));
  color: white;
}

.content {
  background-color: rgb(var(--m-tertiary));
}
</style>
