From eac82970989958f33c3fbc85739188f400871827 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Sat, 24 Aug 2024 21:56:42 +0300
Subject: [PATCH] Add header component with dynamic menus

---
 frontend/src/App.vue                  | 46 ++-----------------
 frontend/src/components/HeaderBox.vue | 65 +++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 43 deletions(-)
 create mode 100644 frontend/src/components/HeaderBox.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index b97d939..101ff61 100644
--- 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
new file mode 100644
index 0000000..08ffc52
--- /dev/null
+++ 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>
\ No newline at end of file