﻿<template>
  <aside class="relative h-full overflow-y-auto custom-scrollbar">

    <nav class="h-full grid grid-rows-[60px_1fr_auto]">
      <div></div>
      <div class="pt-4 px-4">
        <h2>Subscriptions</h2>

        <ul class="space-y">
          <li>
            <RouterLink to="/@hutopy">
              <div class="nav-button">
                <v-icon class="mx-2">mdi-account</v-icon>
                Hutopy
              </div>
            </RouterLink>

            <RouterLink to="/@leffet">
              <div class="nav-button">
                <v-icon class="mx-2">mdi-account</v-icon>
                L'Effet
              </div>
            </RouterLink>

            <RouterLink to="/@chloebeaugrand">
              <div class="nav-button">
                <v-icon class="mx-2">mdi-account</v-icon>
                Chloe Beaugrand
              </div>
            </RouterLink>

            <RouterLink to="/@guillaumeaime">
              <div class="nav-button">
                <v-icon class="mx-2">mdi-account</v-icon>
                Guillaume Aime
              </div>
            </RouterLink>

            <RouterLink to="/@mathieucaron">
              <div class="nav-button">
                <v-icon class="mx-2">mdi-account</v-icon>
                Mathieu Caron
              </div>
            </RouterLink>

            <RouterLink to="/@arps">
              <div class="nav-button">
                <v-icon class="mx-2">mdi-account</v-icon>
                ARPS
              </div>
            </RouterLink>
          </li>
        </ul>
      </div>

      <div class="border-t w-full py-10">
        <SiteMenu></SiteMenu>
      </div>
    </nav>
  </aside>
</template>

<style scoped>
.nav-button {
  @apply rounded p-1 m-1 text-gray-800 font-sans;
}

.nav-button:hover {
  @apply bg-[#903175] text-gray-200;
}

h2 {
  @apply font-sans font-bold ml-2;
}

aside {
  @apply relative;
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #903175 #f1f1f1;
}
</style>

<script setup lang="ts">
import SiteMenu from "@/views/main/SiteMenu.vue";
</script>
