Add header component with dynamic menus

FinemechanicPub · Aug 24, 2024 · eac8297 · eac8297
1 parent 3c578d7
commit eac8297
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 43 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,56 +1,16 @@
 <script setup>
-
+  import HeaderBox from "@/components/HeaderBox.vue"
 </script>
 
 <style src="vue3-tour/dist/vue3-tour.css">
 </style>
 
 <style scoped>
-header{
-  display: flex;
-  align-items: center;
-  justify-content: left;
-}
-nav {
-  background-color: hsla(160, 100%, 37%, 1);
-  color: white;
-  padding: 1rem;
-  width: 100%;
-}
-nav ul {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  justify-content: space-around;
-}
-nav ul li a {
-  color: white;
-  text-decoration: none;
-  font-size: 1.1rem;
-  transition: color 0.3s ease;
-}
-nav ul li a:hover {
-  color: #ffd700;
-}
-nav ul li a.active {
-  color: #ffd700;
-  font-weight: bold;
-}
+
 </style>
 
 <template>
-  <header>
-    <h1>
-      <RouterLink to="/" class="logo">Плитки</RouterLink>
-    </h1>
-    <nav>
-      <ul>
-        <li><RouterLink :to="{name: 'main', query: {height: 5, width: 5}}">5x5</RouterLink></li>
-        <li><RouterLink :to="{name: 'main', query: {height: 8, width: 5}}">8x5</RouterLink></li> 
-      </ul>
-    </nav>
-  </header>
+  <HeaderBox />
   <main>
     <RouterView />
   </main>

diff --git a/frontend/src/components/HeaderBox.vue b/frontend/src/components/HeaderBox.vue
@@ -0,0 +1,65 @@
+<script setup>
+    import { onMounted, ref } from 'vue';
+    import { mainListMenu } from '@/api/generated';
+
+    const menus = ref(null)
+
+    async function fetchMenu(){
+        menus.value = null
+        try {
+            menus.value = await mainListMenu()
+        } catch (err){
+            console.log("fetching menus caused the error: ", err.toString())
+        }
+    }
+    onMounted(() => fetchMenu())
+</script>
+
+<style scoped>
+    header{
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    }
+    nav {
+    background-color: hsla(160, 100%, 37%, 1);
+    color: white;
+    padding: 1rem;
+    width: 100%;
+    }
+    nav ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    justify-content: space-around;
+    }
+    nav ul li a {
+    color: white;
+    text-decoration: none;
+    font-size: 1.1rem;
+    transition: color 0.3s ease;
+    }
+    nav ul li a:hover {
+    color: #ffd700;
+    }
+    nav ul li a.active {
+    color: #ffd700;
+    font-weight: bold;
+    }
+</style>
+
+<template>
+  <header>
+    <h1>
+      <RouterLink to="/" class="logo">Плитки</RouterLink>
+    </h1>
+    <nav v-if="menus">
+      <ul>
+        <li v-for="menu of menus" :key="menu.id">
+            <RouterLink :to="{name: 'main', query: menu.query}">{{ menu.title }}</RouterLink>
+        </li> 
+      </ul>
+    </nav>
+  </header>
+</template>