<script setup lang="ts">
import {Divider} from "primevue";

const items = [
  {name: "Space settings", link: '/space-settings'},
  // {name: "Notification settings", link: '/notification-settings'},
  {name: "Categories", link: '/categories'},
  {name: "Recurrent Operations", link: '/recurrents'},
]
</script>

<template>
  <div class="flex overflow-y-auto">
    <div class="flex card">

      <router-link  :to="items[item].link" v-for="item in items.keys()"
                   class="flex flex-col  w-full gap-0 pl-5  items-start justify-items-center">

        <div class="flex flex-row justify-between items-center w-full pe-2 p-2">

          <span class="font-bold ">{{ items[item].name }}</span>

          <i class="pi pi-angle-right  !font-extralight"/>
        </div>

        <Divider v-if="item+1 != items.length" class="!p-2 !m-0"/>

      </router-link>
    </div>
  </div>
</template>

<style scoped>

</style>