Merge pull request #32 from Lifemap-ToL/14-update-social-networks

fix social networks
Lifemap-ToL · Sep 12, 2024 · ee610fe · ee610fe
2 parents a8e7b30 + 38dd7ff
commit ee610fe
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 13 deletions.
diff --git a/src/assets/styles/layout/navbar/_navbar.scss b/src/assets/styles/layout/navbar/_navbar.scss
@@ -47,6 +47,11 @@ $navbar-separator-spacing: 18px !default;
     @include navbar-item;
     padding: 0 $navbar-link-spacing;
     font-size: $global-lg-font-size;
+    opacity: 0.8;
+
+    &:hover {
+      opacity: 1;
+    }
   }
 
   &--separator {

diff --git a/src/primary/homepage/navbar/Navbar.component.ts b/src/primary/homepage/navbar/Navbar.component.ts
@@ -4,8 +4,10 @@ import { LanguageDropdownVue } from '@/primary/common/language-dropdown';
 import type { MittModalBus } from '@/primary/common/modal/MittModalBus';
 import { markRaw } from 'vue';
 import { NavSidebarVue } from '@/primary/homepage/navbar/nav-sidebar';
+import { XIconVue } from '@/primary/homepage/navbar/x-icon';
+import { GithubIconVue } from '@/primary/homepage/navbar/github-icon';
 
-@Component({ components: { DropdownVue, LanguageDropdownVue } })
+@Component({ components: { DropdownVue, LanguageDropdownVue, XIconVue, GithubIconVue } })
 export default class NavbarComponent extends Vue {
   @Inject()
   private sidebarBus!: () => MittModalBus;

diff --git a/src/primary/homepage/navbar/Navbar.vue b/src/primary/homepage/navbar/Navbar.vue
@@ -26,13 +26,14 @@
     </a>
     <div class="navbar--separator -desktop"></div>
     <div class="navbar--social -desktop">
-      <i class="icon -color-facebook-light -hover-color-facebook -font-xl mdi mdi-facebook"></i>
+      <a href="https://x.com/lifemap_tol" target="_blank" rel="noopener noreferrer">
+        <XIconVue></XIconVue>
+      </a>
     </div>
     <div class="navbar--social -desktop">
-      <i class="icon -color-twitter-light -hover-color-twitter -font-xl mdi mdi-twitter"></i>
-    </div>
-    <div class="navbar--social -desktop">
-      <i class="icon -color-github-light -hover-color-github -clickable -font-xl mdi mdi-github"></i>
+      <a href="https://github.com/Lifemap-ToL/lifemap-front" target="_blank" rel="noopener noreferrer">
+        <GithubIconVue></GithubIconVue>
+      </a>
     </div>
     <div class="navbar--link">
       <LanguageDropdownVue></LanguageDropdownVue>

diff --git a/...navbar/nav-sidebar/NavSidebarComponent.ts → ...avbar/github-icon/GithubIcon.component.ts b/...navbar/nav-sidebar/NavSidebarComponent.ts → ...avbar/github-icon/GithubIcon.component.ts
@@ -1,4 +1,4 @@
 import { Component, Vue } from 'vue-facing-decorator';
 
 @Component
-export default class NavSidebarComponent extends Vue {}
+export default class GithubIconComponent extends Vue {}
diff --git a/src/primary/homepage/navbar/github-icon/GithubIcon.vue b/src/primary/homepage/navbar/github-icon/GithubIcon.vue
@@ -0,0 +1,10 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="20" height="20">
+    <path
+      fill="#fff"
+      d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+    ></path>
+  </svg>
+</template>
+
+<script lang="ts" src="./GithubIcon.component.ts"></script>
diff --git a/src/primary/homepage/navbar/github-icon/index.ts b/src/primary/homepage/navbar/github-icon/index.ts
@@ -0,0 +1,4 @@
+import GithubIconComponent from './GithubIcon.component';
+import GithubIconVue from './GithubIcon.vue';
+
+export { GithubIconComponent, GithubIconVue };
diff --git a/src/primary/homepage/navbar/nav-sidebar/NavSidebar.component.ts b/src/primary/homepage/navbar/nav-sidebar/NavSidebar.component.ts
@@ -0,0 +1,6 @@
+import { Component, Vue } from 'vue-facing-decorator';
+import { XIconVue } from '@/primary/homepage/navbar/x-icon';
+import { GithubIconVue } from '@/primary/homepage/navbar/github-icon';
+
+@Component({ components: { XIconVue, GithubIconVue } })
+export default class NavSidebarComponent extends Vue {}
diff --git a/src/primary/homepage/navbar/nav-sidebar/NavSidebar.vue b/src/primary/homepage/navbar/nav-sidebar/NavSidebar.vue
@@ -4,10 +4,13 @@
       <img src="@/assets/images/logo-lifemap.png" alt="Lifemap header logo" class="nav-sidebar--brand--logo" />
       <div class="nav-sidebar--brand--title">Lifemap</div>
     </div>
-    <div class="flex-container -gap-xs -justify-center">
-      <i class="icon -color-facebook-light -hover-color-facebook -font-xl mdi mdi-facebook"></i>
-      <i class="icon -color-twitter-light -hover-color-twitter -font-xl mdi mdi-twitter"></i>
-      <i class="icon -color-github-light -hover-color-github -clickable -font-xl mdi mdi-github"></i>
+    <div class="flex-container -justify-center">
+      <a href="https://x.com/lifemap_tol" target="_blank" rel="noopener noreferrer">
+        <XIconVue></XIconVue>
+      </a>
+      <a href="https://github.com/Lifemap-ToL/lifemap-front" target="_blank" rel="noopener noreferrer">
+        <GithubIconVue></GithubIconVue>
+      </a>
     </div>
     <div class="menu">
       <a
@@ -30,4 +33,4 @@
   </nav>
 </template>
 
-<script lang="ts" src="./NavSidebarComponent"></script>
+<script lang="ts" src="./NavSidebar.component.ts"></script>
diff --git a/src/primary/homepage/navbar/nav-sidebar/index.ts b/src/primary/homepage/navbar/nav-sidebar/index.ts
@@ -1,4 +1,4 @@
-import NavSidebarComponent from './NavSidebarComponent';
+import NavSidebarComponent from './NavSidebar.component';
 import NavSidebarVue from './NavSidebar.vue';
 
 export { NavSidebarComponent, NavSidebarVue };
diff --git a/src/primary/homepage/navbar/x-icon/XIcon.component.ts b/src/primary/homepage/navbar/x-icon/XIcon.component.ts
@@ -0,0 +1,4 @@
+import { Component, Vue } from 'vue-facing-decorator';
+
+@Component
+export default class XIconComponent extends Vue {}
diff --git a/src/primary/homepage/navbar/x-icon/XIcon.vue b/src/primary/homepage/navbar/x-icon/XIcon.vue
@@ -0,0 +1,10 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="20" height="20">
+    <path
+      fill="#fff"
+      d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+    ></path>
+  </svg>
+</template>
+
+<script lang="ts" src="./XIcon.component.ts"></script>
diff --git a/src/primary/homepage/navbar/x-icon/index.ts b/src/primary/homepage/navbar/x-icon/index.ts
@@ -0,0 +1,4 @@
+import XIconComponent from './XIcon.component';
+import XIconVue from './XIcon.vue';
+
+export { XIconComponent, XIconVue };