Update header design

green-code-initiative · May 19, 2024 · 2d4e8d0 · 2d4e8d0
1 parent 3fbf902
commit 2d4e8d0
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 87 deletions.
diff --git a/src/assets/icons/trophy.svg b/src/assets/icons/trophy.svg
diff --git a/src/assets/img/logo-dark.webp b/src/assets/img/logo-dark.webp
diff --git a/src/assets/img/logo.webp b/src/assets/img/logo.webp
diff --git a/src/assets/variables.css b/src/assets/variables.css
@@ -10,9 +10,11 @@
     --color-on-tertiary: #ffffff;
     --color-quaternary: #5374c9;
     --color-on-quaternary: #ffffff;
+    --color-additionnal-1: hsl(40, 100%, 89%);
+    --color-additionnal-1-hover: hsl(40, 100%, 81%);
 
+    --color-surface: white;
     --color-on-surface: #022826;
-    --color-card-background: white;
 
     /* Shadows */
     --shadow-small: 0px 2px 2px rgba(0, 0, 0, .04);

diff --git a/src/components/global/BoxInfo.vue b/src/components/global/BoxInfo.vue
@@ -52,7 +52,7 @@ defineProps<{ title: string; text: string }>();
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
-    background-color: var(--color-card-background);
+    background-color: var(--color-surface);
     margin-top: 10px;
 }
 

diff --git a/src/components/global/Header.vue b/src/components/global/Header.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
-import { useRoute } from 'vue-router';
-import ChevronLeftIcon from '@/assets/icons/chevron_left.svg?component';
-import ChevronRightIcon from '@/assets/icons/chevron_right.svg?component';
+import { ref } from 'vue';
 import BurgerMenuButton from "@/components/global/header/BurgerMenuButton.vue";
+import Github from "@/assets/icons/github.svg";
+import Linkedin from "@/assets/icons/linkedin.svg";
+import Trophy from "@/assets/icons/trophy.svg";
+import NavItem from "@/components/global/header/NavItem.vue";
 
-const route = useRoute();
 const isMenuOpen = ref(false);
 
 const closeMenu = () => isMenuOpen.value = false;
@@ -15,42 +15,55 @@ const items = [
   { name: "Entreprises", to: "/entreprise" },
   { name: "Notre collectif", to: "/collectif" },
 ];
-
-const currentColor = computed(() => {
-  if (route.path === '/contributeur') {
-    return '#529a75';
-  } else if (route.path === '/entreprise') {
-    return '#4f65a0';
-  } else if (route.path.startsWith('/collectif')) {
-    return '#95353e';
-  }
-  return '#3a4e72';
-});
 </script>
 
 <template>
-  <header :style="{ backgroundColor: currentColor }">
-    <router-link to="/" class="go-to-home">
-      <img src="@/assets/img/logo.webp" width="167" height="25" alt="ecoCode logo" @click="closeMenu"/>
-    </router-link>
-    <nav :style="{ backgroundColor: currentColor }" :class="{ open: isMenuOpen }">
-      <router-link v-for="item of items" :key="item.name" :to="item.to" @click="closeMenu">
-        <ChevronLeftIcon aria-hidden="true" class="left"/>
-        {{ item.name }}
-        <ChevronRightIcon aria-hidden="true" class="right"/>
+  <header>
+    <div class="left">
+      <router-link to="/" class="go-to-home">
+        <img src="@/assets/img/logo-dark.webp" width="150" height="25" alt="ecoCode logo" @click="closeMenu"/>
       </router-link>
-    </nav>
-    <BurgerMenuButton v-model="isMenuOpen" class="burger-button"/>
+      <nav :class="{ open: isMenuOpen }">
+        <nav-item v-for="item of items" :key="item.name" :name="item.name" :to="item.to" @click="closeMenu" />
+        <nav-item name="Challenge 2024" to="https://challenge.ecocode.io" class="special" :icon="Trophy" @click="closeMenu"/>
+      </nav>
+    </div>
+    <div class="right">
+      <a href="https://linkedin.com/company/ecocode-io/" target="_blank" aria-label="Suivez-nous sur Linkedin">
+        <Linkedin width="24" height="24"/>
+      </a>
+      <a href="https://github.com/green-code-initiative/ecoCode" target="_blank" aria-label="Suivez-nous sur Github">
+        <Github width="24" height="24"/>
+      </a>
+      <BurgerMenuButton v-model="isMenuOpen" class="burger-button"/>
+    </div>
   </header>
 </template>
 
 <style lang="scss" scoped>
 header {
   height: 60px;
   display: flex;
-  position: relative;
+  position: sticky;
+  top: 0;
   justify-content: space-between;
-  padding: 0 2rem;
+  align-items: center;
+  padding: 0 20px;
+  background-color: var(--color-surface);
+  color: var(--color-on-surface);
+  box-shadow: var(--shadow-border-small);
+  z-index: 1;
+
+  .left {
+    display: flex;
+    gap: 3rem;
+  }
+
+  .right {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
 
   .go-to-home, .menu-burger {
     display: flex;
@@ -61,45 +74,15 @@ header {
 nav {
   display: none;
   align-items: center;
-  gap: 4rem;
-
-  > a {
-    color: white;
-    position: relative;
-    text-transform: uppercase;
-    opacity: 0.8;
-
-    svg {
-      position: absolute;
-      opacity: 0;
-      transition: transform ease-in-out .2s, opacity ease-in-out .2s;
-    }
-
-    svg.left {
-      left: -1.5rem;
-      bottom: 0.3rem;
-      transform: translateY(1rem);
-    }
-
-    svg.right {
-      right: -1.5rem;
-      top: 0.3rem;
-      transform: translateY(-1rem);
-    }
-
-    &.router-link-active {
-      opacity: 1;
-      text-shadow: 0 0 1px white;
-
-      svg {
-        opacity: 1;
-        transform: rotateZ(35deg) translateY(0);
-      }
-    }
-  }
+  gap: 1.25rem;
+  background-color: var(--color-surface);
 }
 
 @media screen and (min-width: 920px) {
+  header {
+    padding: 0 60px;
+  }
+
   nav {
     display: flex;
   }
@@ -114,8 +97,7 @@ nav {
     display: none;
     flex-direction: column;
     padding: 1rem;
-    gap: 1.5rem;
-    z-index: 1;
+    gap: 1rem;
     position: absolute;
     width: 100%;
     left: 0;
@@ -125,5 +107,9 @@ nav {
       display: flex;
     }
   }
+
+  .right a {
+    display: none;
+  }
 }
 </style>
diff --git a/src/components/global/header/BurgerMenuButton.vue b/src/components/global/header/BurgerMenuButton.vue
@@ -5,26 +5,23 @@ defineProps<{ modelValue: boolean }>()
 
 <template>
   <button :class="{ active: modelValue }" @click="$emit('update:modelValue', !modelValue)">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40">
-      <g stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
-        <path class="top-line" d="M10 10h40Z"/>
-        <path class="middle-line" d="M10 20h40Z"/>
-        <path class="bottom-line" d="M10 30h40Z"/>
-      </g>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path class="top-line" fill-rule="evenodd" d="m3 12 1-1h16a1 1 0 1 1 0 2H4l-1-1Z" clip-rule="evenodd"/>
+      <path class="middle-line" fill-rule="evenodd" d="m3 6 1-1h16a1 1 0 1 1 0 2H4L3 6Z" clip-rule="evenodd"/>
+      <path class="bottom-line" fill-rule="evenodd" d="m3 18 1-1h16a1 1 0 1 1 0 2H4l-1-1Z" clip-rule="evenodd"/>
     </svg>
   </button>
 </template>
 
 <style lang="scss" scoped>
 button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  display: block;
   appearance: none;
-  outline: none;
   background-color: transparent;
   border: none;
+  padding: 0.75rem;
   width: 48px;
+  height: 48px;
 
   svg {
     path {
@@ -52,13 +49,11 @@ button {
     transform: translateY(0px);
   }
   30% {
-    transform-origin: center;
     animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
-    transform: translateY(-10px);
+    transform: translateY(-6px);
   }
   100% {
-    transform-origin: center;
-    transform: translateY(-10px) rotate(45deg) scale(0.9);
+    transform: translateY(-6px) rotate(45deg) scale(0.9);
   }
 }
 
@@ -68,13 +63,11 @@ button {
     transform: translateY(0px);
   }
   30% {
-    transform-origin: center;
     animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
-    transform: translateY(10px);
+    transform: translateY(0);
   }
   100% {
-    transform-origin: center;
-    transform: translateY(10px) rotate(-45deg) scale(0.9);
+    transform: translateY(0) rotate(-45deg) scale(0.9);
   }
 }
 

diff --git a/src/components/global/header/NavItem.vue b/src/components/global/header/NavItem.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+
+const props = defineProps<{ name: string; to: string; icon?: any }>()
+
+const isExternal = computed(() => props.to.startsWith("http"));
+</script>
+
+<template>
+  <a v-if="isExternal" :href="to" v-bind="$attrs">
+    {{ name }}
+    <component v-if="icon" :is="icon" width="16" height="16"/>
+  </a>
+  <router-link v-else :to="to">
+    {{ name }}
+  </router-link>
+</template>
+
+<style lang="scss" scoped>
+a {
+  font-weight: bold;
+  color: inherit;
+  padding: 0.4rem 0.75rem;
+  border-radius: var(--radius);
+  transition: background-color .08s ease-in-out;
+
+  &.special {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    background-color: var(--color-additionnal-1);
+    animation: gelatine 3s infinite 3s;
+  }
+
+  &.special:hover {
+    background-color: var(--color-additionnal-1-hover);
+  }
+
+  &:hover,
+  &.router-link-active {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+}
+
+@keyframes gelatine {
+  from, to, 16% {
+    transform: scale(1, 1);
+  }
+  5% {
+    transform: scale(0.95, 1.05);
+  }
+  10% {
+    transform: scale(1.05, 0.95);
+  }
+  15% {
+    transform: scale(0.98, 1.02);
+  }
+}
+</style>