<template>
  <!-- Unused -->
  <div class="is-flex is-flex-direction-row">
    <nav class="is-hidden-tablet-only is-hidden-mobile">
      <div class="mt-6">
        <div>
          <span class="has-text-white has-text-weight-bold my-4 mx-2">Administration</span>
        </div>
        <ul class="p-2">
          <li v-for="(link, i) in links" v-bind:key="i">
            <RouterLink :to="link.to" class="has-text-grey-light">{{ link.text }}</RouterLink>
          </li>
        </ul>
      </div>
    </nav>
    <div class="container is-max-desktop">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts">
const links = [
  {
    text: 'Dashboard',
    to: '/admin/dashboard',
  },
  {
    text: 'Add Fund',
    to: '/admin/addfund',
  },
  {
    text: 'Add/Modify Queue',
    to: '/admin/modifyqueue',
  },
  {
    text: 'Add User',
    to: '/admin/adduser',
  },
  {
    text: 'Modify User',
    to: '/admin/modifyuser',
  },
];

</script>

<style scoped lang="stylus">
nav
  min-width 134px
  height calc(100vh - 56px)

  li
    font-variant all-petite-caps
    font-size 18px
</style>
