From 214c02b1e649edd34b6e71d0df674dac2ebe00b6 Mon Sep 17 00:00:00 2001
From: Stanislaw <32984705+stanislawK@users.noreply.github.com>
Date: Wed, 6 Sep 2023 21:05:49 +0200
Subject: [PATCH] 528 header component fix (#538)

* 528 - mobile view scrolling

* 528 - additional mobile navigation drawer fixes

* 528 scrolling desktop header fix
---
 .../HomePage/Header/HomePageHeader.vue        | 122 +++++++++---------
 1 file changed, 64 insertions(+), 58 deletions(-)

diff --git a/frontend/src/components/HomePage/Header/HomePageHeader.vue b/frontend/src/components/HomePage/Header/HomePageHeader.vue
index 145cff0..05ea5c4 100644
--- a/frontend/src/components/HomePage/Header/HomePageHeader.vue
+++ b/frontend/src/components/HomePage/Header/HomePageHeader.vue
@@ -1,71 +1,72 @@
 <template>
   <div>
     <v-app-bar class="navbar-custom" app dark color="#2C3E50">
-      <v-toolbar-title>
-        <a href="https://codeforpoznan.pl/">
-          <v-img
-            :src="cfpLogo"
-            contain
-            max-height="20"
-            aspect-ratio="1.7"
-            max-width="500"
-            min-width="350"
-            position="left"
-          ></v-img>
-        </a>
+      <v-toolbar-title class="d-inline">
+        <v-row>
+          <v-col class="d-flex child-flex">
+            <a href="https://codeforpoznan.pl/">
+              <v-img
+                :src="cfpLogo"
+                max-height="22"
+                aspect-ratio="1.5"
+                max-width="500"
+                min-width="250"
+                inline
+              ></v-img>
+            </a>
+          </v-col>
+        </v-row>
       </v-toolbar-title>
-      <v-spacer></v-spacer>
       <v-app-bar-nav-icon
-        @click="drawer = !drawer"
+        variant="text"
+        @click.stop="drawer = !drawer"
         class="hidden-md-and-up"
+        color="white"
       ></v-app-bar-nav-icon>
-      <Scrollactive :offset="64" @itemchanged="onActiveTabChanged">
-        <v-tabs
-          background-color="transparent"
-          height="64"
-          right
-          class="hidden-sm-and-down"
-          v-model="activeTabIndex"
-        >
-          <v-tab
-            v-for="item in items"
-            :key="item.id"
-            align-right
-            :data-section-selector="item.id"
-            class="scrollactive-item"
-            >{{ item.name }}
-          </v-tab>
-        </v-tabs>
-      </Scrollactive>
+      <v-tabs
+        bg-color="#2C3E50"
+        color="white"
+        dark
+        height="64"
+        right
+        class="hidden-sm-and-down"
+        v-model="activeTabIndex"
+      >
+        <v-tab
+          v-for="item in items"
+          :key="item.id"
+          align-right
+          theme="dark"
+          :data-section-selector="item.id"
+          class="scrollactive-item tab-custom"
+          @click.prevent="scrollTo(item.id)"
+          >{{ item.name }}
+        </v-tab>
+      </v-tabs>
     </v-app-bar>
-    <v-list class="navbar-custom hidden-md-and-up" dark>
-      <v-expand-transition>
-        <v-tabs
-          width="100%"
-          v-if="drawer"
-          background-color="transparent"
-          vertical
+    <v-navigation-drawer
+      v-model="drawer"
+      location="top"
+      temporary
+      rail="true"
+      rail-width="190"
+      @click="drawer = false"
+    >
+      <v-list class="navbar-custom hidden-md-and-up" dark>
+        <v-list-item
+          v-for="item in items"
+          :key="item.id"
+          class="mobile-tab-custom"
+          @click.prevent="scrollTo(item.id)"
         >
-          <div class="mobile-tab-items">
-            <template>
-              <v-tab
-                @click="$vuetify.goTo(item.id)"
-                class="tab-custom"
-                v-for="item in items"
-                :key="item.id"
-                >{{ item.name }}</v-tab
-              >
-            </template>
-          </div>
-        </v-tabs>
-      </v-expand-transition>
-    </v-list>
+          {{ item.name }}
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
   </div>
 </template>
 
 <script>
-import Scrollactive from 'vue-scrollactive/src/scrollactive.vue';
-
 export default {
   data() {
     return {
@@ -80,9 +81,6 @@ export default {
       activeTabIndex: null,
     };
   },
-  components: {
-    Scrollactive,
-  },
   methods: {
     onActiveTabChanged(_, currentItem) {
       if (currentItem) {
@@ -93,6 +91,11 @@ export default {
         this.activeTabIndex = activeItemIndex;
       }
     },
+    scrollTo(element_id) {
+      const el = document.querySelector(element_id);
+
+      el.scrollIntoView({ behavior: 'smooth' });
+    },
   },
 };
 </script>
@@ -104,6 +107,9 @@ export default {
   padding: 0;
 }
 .tab-custom {
+  color: hsla(0, 0%, 100%, 0.6);
+}
+.mobile-tab-custom {
   justify-content: left;
   max-width: none;
 }