From f6b2f6d7faae498e50e64425064f149c20688fd2 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 11 Jul 2024 11:58:03 +0300
Subject: [PATCH 1/4] footer text

---
 assets/main.scss      | 43 ++++++++++++++++++++++++++------
 components/footer.vue | 57 +++++++++++++++++++++++++++++++------------
 2 files changed, 78 insertions(+), 22 deletions(-)

diff --git a/assets/main.scss b/assets/main.scss
index 45156b9..e152edd 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -50,12 +50,13 @@ body {
     @apply col-span-10 flex justify-end;
 
     a {
-        @apply hover:text-ioprim-900 transition-colors;
+        @apply text-zinc-800 hover:text-ioprim-900 transition-colors;
 
         &:before {
             content: '';
-            @apply inline-block w-[2px] h-5  mx-4 align-middle bg-gradient-to-t from-transparent via-[#333333] via-50% to-transparent;
+            @apply inline-block w-[2px] h-5 mx-4 align-middle bg-gradient-to-t from-transparent via-zinc-800 via-50% to-transparent;
         }
+
         &:first-child::before {
             content: none;
         }
@@ -76,14 +77,14 @@ a[href^="#"] {
 }
 
 .footer {
-    @apply px-2 py-4 bg-slate-200;
+    @apply px-2 py-4 bg-slate-200 text-zinc-800;
 
     .container {
         @apply gap-4
     }
 
     .k-logo {
-        @apply col-span-12 xl:col-span-2 row-span-3 text-9xl;
+        @apply col-span-12 xl:col-span-2 row-span-3 text-9xl text-ioprim;
 
         svg {
             @apply my-0 mx-auto;
@@ -91,16 +92,44 @@ a[href^="#"] {
     }
 
     &-text {
-        @apply col-span-12 xl:col-span-5 text-sm prose;
+        @apply col-span-12 xl:col-span-5 text-sm mb-2;
 
         &-small {
-            @apply col-span-12 xl:col-span-10 text-xs min-w-full prose;
+            @apply col-span-12 xl:col-span-10 text-xs min-w-full;
         }
 
         &-social {
-            @apply col-span-12 xl:col-span-10 flex gap-4
+            @apply col-span-12 xl:col-span-10 flex gap-4 flex-wrap justify-center;
         }
     }
+
+    &-icon {
+        @apply order-2 flex justify-center items-center gap-2;
+
+        &:hover {
+            .footer-icon-text {
+                @apply no-underline;
+            }
+        }
+
+        svg {
+            @apply mb-0;
+        }
+
+        &-big {
+            @apply text-3xl order-1 w-full text-center;
+            .footer-icon-text {
+                @apply no-underline;
+            }
+        }
+
+        &-text {
+            @apply underline;
+        }
+    }
+    &_two {
+        @apply xl:bg-slate-200 py-16 text-sm text-zinc-500;
+    }
 }
 
 .siteblock {
diff --git a/components/footer.vue b/components/footer.vue
index 2efc357..c618299 100644
--- a/components/footer.vue
+++ b/components/footer.vue
@@ -15,22 +15,49 @@ const { data: footerData } = await apiFetch<ApiFooterType[]>(`footer/?ordering=s
 const { data: social_networkData } = await apiFetch<ApiSocial_networkType[]>(`social_network/`)
 </script>
 <template>
-    <div class="footer" id="contacts">
-        <div class="container">
-            <div class="k-logo">
-                <k_logo />
+    <div>
+        <div class="footer" id="contacts">
+            <div class="container">
+                <div class="col-span-3">
+                    <div class="k-logo">
+                        <k_logo />
+                    </div>
+                </div>
+                <div class="col-span-6">
+                    <template v-for="item in footerData">
+                        <div class="footer-text" v-if="!item.small_text">
+                            <template v-for="p in item.text.split('\n')">
+                                <p v-if="p.trim().length">{{ p }}</p>
+                            </template>
+                        </div>
+                    </template>
+                </div>
+                <div class="col-span-3">
+                    <div class="footer-text footer-text-social" v-if="social_networkData">
+                        <template v-for="item in social_networkData">
+                            <a :class="['footer-icon', { 'footer-icon-big': !item.icon }]" :href="item.link"
+                                target="_blank">
+                                <template v-if="item.icon">
+                                    <component :is="icons[(item.icon.trim() as keyof typeof icons)]"
+                                        v-if="icons.hasOwnProperty(item.icon.trim())" />
+                                    <Icon :name="item.icon" v-else />
+                                </template>
+                                <span class="footer-icon-text">{{ item.name }}</span>
+                            </a>
+                        </template>
+                    </div>
+                </div>
             </div>
-            <template v-for="item in footerData">
-                <div class="footer-text" :class="[{ 'footer-text-small': item.small_text }]">{{ item.text }}</div>
-            </template>
-            <div class="footer-text footer-text-social" v-if="social_networkData">
-                <template v-for="item in social_networkData">
-                    <a :href="item.link" target="_blank">
-                        <component :is="icons[(item.icon.trim() as keyof typeof icons)]"
-                            v-if="icons.hasOwnProperty(item.icon.trim())" />
-                        <Icon :name="item.icon" v-else /> {{ item.name }}
-                    </a>
-                </template>
+        </div>
+        <div class="footer_two">
+            <div class="container">
+                <div class="col-span-10 col-start-2">
+                    <template v-for="item in footerData">
+                        <div class="footer-text" v-if="item.small_text">
+                            {{ item.text }}
+                        </div>
+                    </template>
+                </div>
             </div>
         </div>
     </div>
-- 
2.40.1


From 4b5d6da477ecf3db0e9bf16d0c6a91343af6f0c9 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 11 Jul 2024 12:09:24 +0300
Subject: [PATCH 2/4] footer view

---
 assets/main.scss      | 12 ++++++++++--
 components/footer.vue |  6 +++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/assets/main.scss b/assets/main.scss
index e152edd..c7b17b4 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -77,7 +77,7 @@ a[href^="#"] {
 }
 
 .footer {
-    @apply px-2 py-4 bg-slate-200 text-zinc-800;
+    @apply px-2 py-4 bg-slate-200 text-zinc-800 pt-12;
 
     .container {
         @apply gap-4
@@ -89,6 +89,12 @@ a[href^="#"] {
         svg {
             @apply my-0 mx-auto;
         }
+
+        &:after {
+            content: '';
+            @apply block lg:hidden mr-auto ml-auto mt-5 h-[2px] max-w-44 mx-4 align-middle bg-gradient-to-r from-transparent via-zinc-800 via-50% to-transparent;
+
+        }
     }
 
     &-text {
@@ -118,6 +124,7 @@ a[href^="#"] {
 
         &-big {
             @apply text-3xl order-1 w-full text-center;
+
             .footer-icon-text {
                 @apply no-underline;
             }
@@ -127,8 +134,9 @@ a[href^="#"] {
             @apply underline;
         }
     }
+
     &_two {
-        @apply xl:bg-slate-200 py-16 text-sm text-zinc-500;
+        @apply xl:bg-slate-200 py-16 lg:py-8 text-sm text-zinc-500;
     }
 }
 
diff --git a/components/footer.vue b/components/footer.vue
index c618299..7797b2f 100644
--- a/components/footer.vue
+++ b/components/footer.vue
@@ -18,12 +18,12 @@ const { data: social_networkData } = await apiFetch<ApiSocial_networkType[]>(`so
     <div>
         <div class="footer" id="contacts">
             <div class="container">
-                <div class="col-span-3">
+                <div class="col-span-12 lg:col-span-6 xl:col-span-3 mb-12 lg:mb-0">
                     <div class="k-logo">
                         <k_logo />
                     </div>
                 </div>
-                <div class="col-span-6">
+                <div class="col-span-12 lg:col-span-6 xl:col-span-6 mb-12 lg:mb-0">
                     <template v-for="item in footerData">
                         <div class="footer-text" v-if="!item.small_text">
                             <template v-for="p in item.text.split('\n')">
@@ -32,7 +32,7 @@ const { data: social_networkData } = await apiFetch<ApiSocial_networkType[]>(`so
                         </div>
                     </template>
                 </div>
-                <div class="col-span-3">
+                <div class="col-span-12 xl:col-span-3">
                     <div class="footer-text footer-text-social" v-if="social_networkData">
                         <template v-for="item in social_networkData">
                             <a :class="['footer-icon', { 'footer-icon-big': !item.icon }]" :href="item.link"
-- 
2.40.1


From 64987e3ea93728f9860fa83b0c1ff68b1d85f9a8 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 11 Jul 2024 12:24:34 +0300
Subject: [PATCH 3/4] header adaptivity

---
 assets/main.scss      | 26 +++++++++++++++++++++++++-
 components/header.vue | 16 ++++++++++++++--
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/assets/main.scss b/assets/main.scss
index c7b17b4..4e9b7d3 100644
--- a/assets/main.scss
+++ b/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^="#"] {
diff --git a/components/header.vue b/components/header.vue
index 93ef533..0291c09 100644
--- a/components/header.vue
+++ b/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>
-- 
2.40.1


From 905344ae442833eacea3430a6302da3a1dac08ca Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 11 Jul 2024 12:34:08 +0300
Subject: [PATCH 4/4] topmenu

---
 assets/main.scss | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/assets/main.scss b/assets/main.scss
index 4e9b7d3..7cfb543 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -72,14 +72,16 @@ body {
     }
 
     &.toggle_visible {
-        @apply flex flex-col text-center;
+        @apply max-xl:flex max-xl:flex-col max-xl:text-center;
 
         a {
-            @apply mb-2;
+            @apply max-xl:mb-2;
         }
 
         a:before {
-            content: none;
+            @media screen and (max-width: 1280px) {    
+                content: none;
+            }
         }
     }
 
-- 
2.40.1