From ddd6f99e986f6cb51cc17485ff2b296acff4b40b Mon Sep 17 00:00:00 2001
From: ivelov-vm <ivelov_vm@groupbwt.com>
Date: Mon, 20 Mar 2023 13:25:24 +0200
Subject: [PATCH] feat: add header responsability
---
src/components/HeaderComponent.vue | 245 ++++++++++++++++++++++++-----
src/components/svg/BurgerSvg.vue | 9 ++
src/pages/HomePage.vue | 25 ++-
tailwind.config.js | 1 +
4 files changed, 234 insertions(+), 46 deletions(-)
create mode 100644 src/components/svg/BurgerSvg.vue
diff --git a/src/components/HeaderComponent.vue b/src/components/HeaderComponent.vue
index 9334294..1c1146f 100644
--- a/src/components/HeaderComponent.vue
+++ b/src/components/HeaderComponent.vue
@@ -1,52 +1,221 @@
<template>
- <header class="flex justify-around items-center pt-3.5 text-white">
- <LogoSvg
- class="flex-auto basis-[28.57%] h-[46px]"
- ></LogoSvg>
-
- <nav class="flex justify-around flex-auto basis-[42.86%] text-xl">
- <router-link to="/home" :class="currentPage === 'home' ? 'font-bold' : ''"
- >Home</router-link
- >
- <router-link
- to="/home"
- :class="currentPage === 'services' ? 'font-bold' : ''"
- >Services</router-link
- >
- <router-link
- to="/home"
- :class="currentPage === 'about us' ? 'font-bold' : ''"
- >About us</router-link
- >
- <router-link to="/home" :class="currentPage === 'team' ? 'font-bold' : ''"
- >Team</router-link
- >
- <router-link
- to="/home"
- :class="currentPage === 'contact' ? 'font-bold' : ''"
- >Contact</router-link
- >
- <router-link to="/home" :class="currentPage === 'blog' ? 'font-bold' : ''"
- >Blog</router-link
- >
- </nav>
- <div class="flex-auto basis-[28.57%] flex justify-center">
- <button class="rounded bg-blue text-white py-3.5 px-[42px] font-medium hover:bg-blue-700 transition-colors">
- Book an online
- </button>
- </div>
- </header>
+ <div class="sticky top-0 z-30 transition-colors"
+ :class="transparent?'':'bg-white shadow-14x28'">
+ <header
+ v-if="width > 1000"
+ class="flex justify-around items-center py-3.5"
+ :class="transparent?'text-white':'text-dark'"
+ >
+ <LogoSvg class="flex-auto basis-[28.57%] h-[46px]"
+ :class="transparent?'text-white':'text-blue'"></LogoSvg>
+
+ <nav class="flex justify-around flex-auto basis-[42.86%] text-xl">
+ <router-link
+ to="/home"
+ :class="currentPage === 'home' ? 'font-bold' : ''"
+ >Home</router-link
+ >
+ <router-link
+ to="/home"
+ :class="currentPage === 'services' ? 'font-bold' : ''"
+ >Services</router-link
+ >
+ <router-link
+ to="/home"
+ :class="currentPage === 'about us' ? 'font-bold' : ''"
+ >About us</router-link
+ >
+ <router-link
+ to="/home"
+ :class="currentPage === 'team' ? 'font-bold' : ''"
+ >Team</router-link
+ >
+ <router-link
+ to="/home"
+ :class="currentPage === 'contact' ? 'font-bold' : ''"
+ >Contact</router-link
+ >
+ <router-link
+ to="/home"
+ :class="currentPage === 'blog' ? 'font-bold' : ''"
+ >Blog</router-link
+ >
+ </nav>
+ <div class="flex-auto basis-[28.57%] flex justify-center">
+ <button
+ class="rounded bg-blue text-white py-3.5 px-[42px] font-medium hover:bg-blue-700 transition-colors"
+ >
+ Book an online
+ </button>
+ </div>
+ </header>
+
+ <header v-else class="flex justify-between items-center mx-[7%] py-3.5 text-white">
+ <LogoSvg class="h-[46px]" :class="transparent?'text-white':'text-blue'"></LogoSvg>
+
+ <div class="relative">
+ <button @click="expand">
+ <BurgerSvg class="w-10 h-10"></BurgerSvg>
+ </button>
+
+ <div
+ v-if="dropdown"
+ class="absolute z-20 bg-white p-2 rounded-lg shadow-4x10 w-32 right-0"
+ >
+ <nav class="text-xl text-black">
+ <div>
+ <router-link
+ to="#"
+ class="flex justify-between items-center gap-3"
+ >
+ <span
+ class="w-24"
+ :class="currentPage === 'home' ? 'font-bold' : ''"
+ >Home</span
+ >
+ <RightArrow class="w-[7px] h-3 inline"></RightArrow>
+ </router-link>
+ </div>
+
+ <div class="mt-2">
+ <router-link
+ to="#"
+ class="flex justify-between items-center gap-3"
+ >
+ <span
+ class="w-24"
+ :class="currentPage === 'services' ? 'font-bold' : ''"
+ >Services</span
+ >
+ <RightArrow class="w-[7px] h-3 inline"></RightArrow>
+ </router-link>
+ </div>
+
+ <div class="mt-2">
+ <router-link
+ to="#"
+ class="flex justify-between items-center gap-3"
+ >
+ <span
+ class="w-24"
+ :class="currentPage === 'about us' ? 'font-bold' : ''"
+ >About us</span
+ >
+ <RightArrow class="w-[7px] h-3 inline"></RightArrow>
+ </router-link>
+ </div>
+
+ <div class="mt-2">
+ <router-link
+ to="#"
+ class="flex justify-between items-center gap-3"
+ >
+ <span
+ class="w-24"
+ :class="currentPage === 'team' ? 'font-bold' : ''"
+ >Team</span
+ >
+ <RightArrow class="w-[7px] h-3 inline"></RightArrow>
+ </router-link>
+ </div>
+
+ <div class="mt-2">
+ <router-link
+ to="#"
+ class="flex justify-between items-center gap-3"
+ >
+ <span
+ class="w-24"
+ :class="currentPage === 'contact' ? 'font-bold' : ''"
+ >Contact</span
+ >
+ <RightArrow class="w-[7px] h-3 inline"></RightArrow>
+ </router-link>
+ </div>
+
+ <div class="mt-2">
+ <router-link
+ to="#"
+ class="flex justify-between items-center gap-3"
+ >
+ <span
+ class="w-24"
+ :class="currentPage === 'blog' ? 'font-bold' : ''"
+ >Blog</span
+ >
+ <RightArrow class="w-[7px] h-3 inline"></RightArrow>
+ </router-link>
+ </div>
+
+ <div class="mt-2">
+ <router-link
+ to="#"
+ class="flex justify-between items-center gap-3"
+ >
+ <span
+ class="w-24"
+ >Book an online</span
+ >
+ <RightArrow class="w-[7px] h-3 inline"></RightArrow>
+ </router-link>
+ </div>
+ </nav>
+ </div>
+ </div>
+
+ </header>
+ </div>
</template>
<script>
import LogoSvg from "./svg/LogoSvg.vue";
+import BurgerSvg from "./svg/BurgerSvg.vue";
+import RightArrow from "./svg/RightArrow.vue";
export default {
name: "HeaderComponent",
+ data() {
+ return {
+ width: window.innerWidth,
+ dropdown: false,
+ firstClick: true,
+ };
+ },
props: {
currentPage: {
type: String,
},
+ transparent:{
+ type: Boolean,
+ default: false
+ }
+ },
+ mounted() {
+ window.addEventListener("resize", this.onWidthChange);
+ this.onWidthChange();
+ },
+ beforeDestroy() {
+ window.removeEventListener("resize", this.onWidthChange);
+ },
+ methods: {
+ onWidthChange() {
+ this.width = window.innerWidth;
+ },
+ expand() {
+ this.dropdown = true;
+ this.firstClick = true;
+ this.$nextTick(() => {
+ document.addEventListener("click", this.hide);
+ });
+ },
+ hide() {
+ if (this.firstClick) {
+ this.firstClick = false;
+ return;
+ }
+ this.dropdown = false;
+ document.removeEventListener("click", this.hide);
+ },
},
- components: { LogoSvg },
+ components: { LogoSvg, BurgerSvg, RightArrow },
};
</script>
diff --git a/src/components/svg/BurgerSvg.vue b/src/components/svg/BurgerSvg.vue
new file mode 100644
index 0000000..3acad99
--- /dev/null
+++ b/src/components/svg/BurgerSvg.vue
@@ -0,0 +1,9 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 50 50" xml:space="preserve"><path fill="#231F20" d="M8.667 15h30a1 1 0 1 0 0-2h-30a1 1 0 1 0 0 2z"/><path fill="#231F20" d="M8.667 37h30a1 1 0 1 0 0-2h-30a1 1 0 1 0 0 2z"/><path fill="#231F20" d="M8.667 26h30a1 1 0 1 0 0-2h-30a1 1 0 1 0 0 2z"/></svg>
+</template>
+
+<script>
+export default {
+ name: "BurgerSvg",
+};
+</script>
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 575c692..87ba19d 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -1,20 +1,21 @@
<template>
- <div class="overflow-hidden">
+ <div >
+ <HeaderComponent current-page="home" :transparent="scroll < 100" ></HeaderComponent>
<section
- class="relative z-10 text-white h-[700px] sm:h-[900px] rounded-b-lg bg-cover bg-no-repeat bg-center bg-blend-multiply bg-gray-300 bg-[url('../public/img/home-header.jfif')]"
+ class="relative mt-[-80px] z-10 text-white h-[700px] sm:h-[900px] rounded-b-lg bg-cover bg-no-repeat bg-center bg-blend-multiply bg-gray-300 bg-[url('../public/img/home-header.jfif')]"
>
- <HeaderComponent current-page="home"></HeaderComponent>
+
<h2
- class="text-[54px] font-bold leading-[4.5rem] max-w-lg ml-24 mt-20 sm:mt-[187px]"
+ class="text-[54px] font-bold leading-[4.5rem] max-w-lg ml-10 min-[500px]:ml-24 mt-16 sm:mt-[173px]"
>
Moving to Portugal?
</h2>
- <p class="text-2xl ml-24 mt-[10px] max-w-[434px] font-gilroy">
+ <p class="text-2xl ml-10 min-[500px]:ml-24 mt-[10px] max-w-[434px] font-gilroy">
Let the experts of the ACK ecosystem handle your administrative
headaches
</p>
<button
- class="rounded bg-blue text-white ml-24 mt-10 py-3.5 px-10 w-[270px] font-medium text-lg hover:bg-blue-700 transition-colors"
+ class="rounded bg-blue text-white ml-10 min-[500px]:ml-24 mt-10 py-3.5 px-10 w-[270px] font-medium text-lg hover:bg-blue-700 transition-colors"
>
Help to emigrate
</button>
@@ -54,7 +55,7 @@
</section>
<!-- Services -->
- <section class="mt-32 relative">
+ <section class="mt-32 relative overflow-hidden">
<div
class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[255px] h-[255px] z-0 -right-[65px] top-[42%]"
></div>
@@ -153,8 +154,9 @@
<FooterComponent class="mt-[112px]"></FooterComponent>
</div>
</template>
-
+<!-- eslint-disable vue/no-unused-components -->
<script>
+
import HeaderComponent from "../components/HeaderComponent.vue";
import ReviewComponent from "../components/ReviewComponent.vue";
import ServiceCard from "../components/ServiceCard.vue";
@@ -181,17 +183,24 @@ export default {
lastReview: 2,
sliderRunning: false,
windowWidth: window.innerWidth,
+ scroll: 0
};
},
mounted() {
window.addEventListener("resize", this.onWidthChange);
this.onWidthChange();
this.updateReviews();
+
+ window.addEventListener('scroll', this.onScroll);
},
beforeDestroy() {
window.removeEventListener("resize", this.onWidthChange);
+ window.removeEventListener("scroll", this.onScroll);
},
methods: {
+ onScroll(){
+ this.scroll = window.scrollY;
+ },
onWidthChange() {
this.windowWidth = window.innerWidth;
let newLast = this.lastReview;
diff --git a/tailwind.config.js b/tailwind.config.js
index 1030545..bcc5c6d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,7 @@ module.exports = {
boxShadow: {
"4x10": "0 3.7px 10.2px rgba(0, 0, 0, 0.10)",
"3x28": "0 3px 28px rgba(203, 203, 203, 0.25)",
+ "14x28": "0 14px 28px rgba(203, 203, 203, 0.25)",
},
fontFamily: {
sans: ["Futura", ...defaultTheme.fontFamily.sans],
--
GitLab