﻿<template>

  <aside>
   
    <nav>
      
      <h2>Subscriptions</h2>

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

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

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

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

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

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

        </li>
      </ul>

    </nav>
    
  </aside>

</template>

<style scoped>

.nav-button {
  @apply bg-purple-800 rounded p-1 m-2
}

.nav-button:hover {
  @apply bg-purple-400
}

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

</style>
<script setup lang="ts">
</script>