<script>

import { mapActions, mapState } from 'pinia'
import { StaticsStore } from '@/stores/statics'

import SvgIcon from '@jamescoyle/vue-icon';
import { mdiInformationOutline } from '@mdi/js';


export default {
  props: [],
  data(){
    return {
      infos_path: mdiInformationOutline
    }
  },
  computed: {
    ...mapState(StaticsStore,['statics'])
  },
  created () {
    console.log("infos created");
    this.loadStatics()
  },
  methods: {
    ...mapActions(StaticsStore,['loadStatics'])
  },
  components: {
    SvgIcon
  }
}

</script>

<template>
  <div id="static-menu">
    <ul>
      <li
          v-for="staticnode in statics"
          v-bind:key="staticnode.id"
        >
        <router-link :to="{ name: 'static', params: { id:staticnode.id } }">
          <svg-icon type="mdi" :path="infos_path"></svg-icon>
          <span>{{staticnode.title}}</span>
        </router-link>
      </li>
    </ul>

  </div>
  
</template>

<style lang="scss" scoped>
  ul{
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
  }
  li{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    a{
      @include btn();
    }
  }

</style>
