Add Slack link to header

green-code-initiative · Jun 6, 2024 · 12ed350 · 12ed350
1 parent ced13cd
commit 12ed350
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 14 deletions.
diff --git a/src/assets/icons/slack.svg b/src/assets/icons/slack.svg
diff --git 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;
   }