From 868569c7e4eb6e4d1cd1e51e8ea1dea242c3c5f1 Mon Sep 17 00:00:00 2001
From: Chidiebere Chukwudi <chidideveloper@gmail.com>
Date: Wed, 27 Dec 2023 20:09:19 +0100
Subject: [PATCH] added all logos

---
 public/index.html                         |  3 +-
 src/components/header/HeaderComponent.vue | 41 +++++++++++++++++++++--
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index 8d97ffc..7dbe32e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,8 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+
+  <link rel="icon" type="image/png" href="https://res.cloudinary.com/chidiebere/image/upload/c_thumb,w_200,g_face/v1703702996/WCS_2_1.png">
   <title>
     <%= htmlWebpackPlugin.options.title %>
   </title>
diff --git a/src/components/header/HeaderComponent.vue b/src/components/header/HeaderComponent.vue
index 0802c58..ef0f83d 100644
--- a/src/components/header/HeaderComponent.vue
+++ b/src/components/header/HeaderComponent.vue
@@ -1,7 +1,19 @@
 <template>
   <nav class="navbar navbar-expand-lg bg-dark mb-3">
     <div class="container-fluid">
-      <router-link class="navbar-brand" :to="{ name: 'Home' }">  <img src="https://res.cloudinary.com/chidiebere/image/upload/c_thumb,w_200,g_face/v1703702996/WCS_4.png" style="width: 10em;"> </router-link>
+      <router-link class="navbar-brand" :to="{ name: 'Home' }">
+
+        <!-- desktop logo -->
+        <img class="desktop-logo"
+          src="https://res.cloudinary.com/chidiebere/image/upload/c_thumb,w_200,g_face/v1703702996/WCS_4.png"
+          style="width: 10em;">
+
+        <!-- mobile logo -->
+        <img class="mobile-logo"
+          src="https://res.cloudinary.com/chidiebere/image/upload/c_thumb,w_200,g_face/v1703703886/WCS_555555555555.png"
+          >
+
+      </router-link>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02"
         aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -9,7 +21,8 @@
       <div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02">
         <ul class="navbar-nav mb-2 mb-lg-0">
           <li class="nav-item">
-            <a href="https://github.com/jovialcore/whatcompstack-BE" target="_blank" class="nav-link">Please star (🌟) us on Github </a>
+            <a href="https://github.com/jovialcore/whatcompstack-BE" target="_blank" class="nav-link">Please star (🌟) us
+              on Github </a>
           </li>
         </ul>
       </div>
@@ -17,6 +30,30 @@
   </nav>
 </template>
 
+<style scoped>
+@media (max-width: 767px) {
+  .desktop-logo {
+    display: none;
+  }
+
+  .mobile-logo {
+    display: block;
+  }
+}
+
+@media (min-width: 768px) {
+  .desktop-logo {
+    display: block;
+  }
+
+  .mobile-logo {
+    display: none;
+  }
+}
+</style>
+
+
+
 <script>
 export default {
   name: 'HeaderComponent'