<template>
  <div>
    <h1>Seitenpflege</h1>
    <p>Herzlich Willkommen. Auf diesen Seiten können Sie die Inhalte der Webseiten pflegen.</p>
    <ul>
      <li v-for="item in adminSubmenu" :key="item.id">
        <router-link :to="item.link">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "../../axios";
import { ref, onMounted } from 'vue';

export default {
  name: 'DefaultComponent',
  setup() {
    const adminSubmenu = ref([]);

    const fetchMenuData = async () => {
      try {
        const response = await axios.get('/menu-data');
        const menuData = response.data;

        // Suche nach dem Admin-Submenü
        const adminMenu = menuData.find(item => item.name === 'Admin');
        if (adminMenu) {
          adminSubmenu.value = adminMenu.submenu;
        }
      } catch (error) {
        console.error('Fehler beim Abrufen der Menü-Daten:', error);
      }
    };

    onMounted(() => {
      fetchMenuData();
    });

    return {
      adminSubmenu
    };
  }
};
</script>

<style scoped>
div {
  padding: 20px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 0;
  margin: 0;
}
</style>
