From 12ed3503dcf2741d703f11dc89108912824a80fe Mon Sep 17 00:00:00 2001
From: utarwyn <maxime.malgorn@laposte.net>
Date: Thu, 6 Jun 2024 19:30:45 +0200
Subject: [PATCH] Add Slack link to header

---
 src/assets/icons/slack.svg                 |  1 +
 src/components/shared/layout/AppHeader.vue | 63 +++++++++++++++++-----
 2 files changed, 50 insertions(+), 14 deletions(-)
 create mode 100644 src/assets/icons/slack.svg

diff --git a/src/assets/icons/slack.svg b/src/assets/icons/slack.svg
new file mode 100644
index 0000000..bd0727c
--- /dev/null
+++ b/src/assets/icons/slack.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127"><path fill="#E01E5A" d="M27 80a13 13 0 1 1-13-13h13v13zm7 0a13 13 0 1 1 26 0v33a13 13 0 1 1-26 0V80z"/><path fill="#36C5F0" d="M47 27a13 13 0 1 1 13-13v13H47zm0 7a13 13 0 1 1 0 26H14a13 13 0 1 1 0-26h33z"/><path fill="#2EB67D" d="M100 47a13 13 0 1 1 13 13h-13V47zm-7 0a13 13 0 1 1-26 0V14a13 13 0 1 1 26 0v33z"/><path fill="#ECB22E" d="M80 100a13 13 0 1 1-13 13v-13h13zm0-7a13 13 0 1 1 0-26h33a13 13 0 1 1 0 26H80z"/></svg>
diff --git a/src/components/shared/layout/AppHeader.vue b/src/components/shared/layout/AppHeader.vue
index 2994a88..34c46d5 100644
--- a/src/components/shared/layout/AppHeader.vue
+++ b/src/components/shared/layout/AppHeader.vue
@@ -1,39 +1,73 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref } from "vue";
 import BurgerMenuButton from "@/components/shared/layout/header/BurgerMenuButton.vue";
-import Github from "@/assets/icons/github.svg";
-import Linkedin from "@/assets/icons/linkedin.svg";
+import GitHubIcon from "@/assets/icons/github.svg";
+import LinkedinIcon from "@/assets/icons/linkedin.svg";
+import SlackIcon from "@/assets/icons/slack.svg";
 import NavItem from "@/components/shared/layout/header/HeaderNavItem.vue";
 
 const isMenuOpen = ref(false);
 
-const closeMenu = () => isMenuOpen.value = false;
+const closeMenu = () => (isMenuOpen.value = false);
 
-const items = [
+const navItems = [
   { name: "Contributeur", to: "/contributeur" },
   { name: "Entreprises", to: "/entreprise" },
   { name: "Notre collectif", to: "/collectif" },
 ];
+
+const socialItems = [
+  {
+    label: "Suivez-nous sur Linkedin",
+    link: "https://linkedin.com/company/ecocode-io/",
+    icon: LinkedinIcon,
+  },
+  {
+    label: "Rejoignez notre Github",
+    link: "https://github.com/green-code-initiative/ecoCode",
+    icon: GitHubIcon,
+  },
+  {
+    label: "Rejoignez notre Slack",
+    link: "https://join.slack.com/t/ecocode-workspace/shared_invite/zt-2k95pq26e-0PKlnz3_ECd_ipp7kATrFQ",
+    icon: SlackIcon,
+  },
+];
 </script>
 
 <template>
   <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"/>
+        <img
+          src="@/assets/img/logo-dark.webp"
+          width="150"
+          height="25"
+          alt="ecoCode logo"
+          @click="closeMenu"
+        />
       </router-link>
       <nav :class="{ open: isMenuOpen }">
-        <nav-item v-for="item of items" :key="item.name" :name="item.name" :to="item.to" @click="closeMenu" />
+        <nav-item
+          v-for="item of navItems"
+          :key="item.name"
+          :name="item.name"
+          :to="item.to"
+          @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
+        v-for="item of socialItems"
+        :key="item.label"
+        :href="item.link"
+        target="_blank"
+        :aria-label="item.label"
+      >
+        <component :is="item.icon" width="24" height="24" />
       </a>
-      <BurgerMenuButton v-model="isMenuOpen" class="burger-button"/>
+      <BurgerMenuButton v-model="isMenuOpen" class="burger-button" />
     </div>
   </header>
 </template>
@@ -63,7 +97,8 @@ header {
     align-items: center;
   }
 
-  .go-to-home, .menu-burger {
+  .go-to-home,
+  .menu-burger {
     display: flex;
     align-items: center;
   }