assets/main.scss

@@ -47,7 +47,7 @@ body {
 }
 
 .menu {
-    @apply col-span-10 flex justify-end;
+    @apply hidden xl:flex col-span-10 justify-end;
 
     a {
         @apply text-zinc-800 hover:text-ioprim-900 transition-colors;
@@ -70,6 +70,30 @@ body {
             @apply ml-2;
         }
     }
+
+    &.toggle_visible {
+        @apply flex flex-col text-center;
+
+        a {
+            @apply mb-2;
+        }
+
+        a:before {
+            content: none;
+        }
+    }
+
+    &-toggle {
+        @apply flex xl:hidden col-span-8 justify-end;
+
+        >span {
+            @apply cursor-pointer text-zinc-600 hover:text-ioprim-900 transition-colors;
+
+            svg {
+                @apply text-3xl;
+            }
+        }
+    }
 }
 
 a[href^="#"] {

components/header.vue

@@ -5,6 +5,13 @@ import k_logo from '@/assets/LOGO.svg'
 const { data: menuData } = await apiFetch<ApiMenuType>(`menu/1/`)
 const pagesData = (menuData.value ? menuData.value.pages : []).sort((a, b) => a.order - b.order)
 const route = useRoute()
+
+const menu_visible = ref(false)
+const toggle_menu = () => {
+    if (window.innerWidth < 1280) {
+        menu_visible.value = !menu_visible.value
+    }
+}
 </script>
 <template>
     <div class="header">
@@ -15,10 +22,15 @@ const route = useRoute()
                     <span class="logo_text">Kupizabor</span>
                 </NuxtLink>
             </div>
-            <div class="menu">
+            <div class="menu-toggle">
+                <span @click="toggle_menu">
+                    <Icon name="mdi:menu" />
+                </span>
+            </div>
+            <div class="menu" :class="[{ 'toggle_visible': menu_visible }]">
                 <template v-for="item in pagesData">
                     <NuxtLink :to="item.external_link || ((route.name == 'index' ? '' : '/') + `#${item.slug}`)"
-                        :target="item.external_link ? '_blank' : '_self'">
+                        :target="item.external_link ? '_blank' : '_self'" @click="toggle_menu">
                         {{ item.menu_title }}
                     </NuxtLink>
                 </template>