From e23cc423bc86e2dcfec4c4a1d05af0bcd2c68e2b Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Tue, 4 Oct 2022 14:16:18 +0800
Subject: [PATCH] fix header css

---
 src/App.vue                          |  27 +--
 src/components/layouts/TheHeader.vue | 294 +++++++++++++--------------
 2 files changed, 144 insertions(+), 177 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 419d6c4..005aaaf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,39 +1,22 @@
 <template>
-  <!-- <div class="list">
-  
-    <router-link to="/login">Login</router-link><br />
-    <router-link to="/register">Register</router-link><br />
-    <router-link to="/">Home</router-link><br />
-    
-  </div> -->
-
   <router-view />
 </template>
 
 <script>
-
 export default {
   name: "App",
 };
 </script>
 
 <style scoped>
-
 /* 
 
-#1e417b //main color nav
-#2f68c5 //main button
+#132a4f //Shades
+#1e417b //#######MAIN COLOR - nav element#############
+#2f68c5 //Tints - main button
+#82a4dc //nav button
+#d5e1f3 //background nav:active
 #eaf0f9 //background inline message
 
 */
-#app {
-  /* font-family: Inter, Helvetica, Arial, sans-serif; */
-  /* -webkit-font-smoothing: antialiased; */
-  /* -moz-osx-font-smoothing: grayscale; */
-  /* text-align: center; */
-  /* color: #2c3e50; */
-  /* background-color: #e8ebef; */
-}
-
-
 </style>
diff --git a/src/components/layouts/TheHeader.vue b/src/components/layouts/TheHeader.vue
index 3f61387..fe94e60 100644
--- a/src/components/layouts/TheHeader.vue
+++ b/src/components/layouts/TheHeader.vue
@@ -1,8 +1,121 @@
 <template>
+  <!-- Navbar for laptop screen size (width>992px) -->
+  <div class="card lg:flex hidden border-none">
+    <div
+      class="
+        flex
+        justify-content-between
+        px-3
+        md:px-6
+        h-3rem
+        flex-wrap
+        main-color
+      "
+    >
+      <div class="flex align-items-center justify-content-center">
+        <div class="company-title" type="button" v-on:click="toHome()">
+          <div class="logo-title">eLelong</div>
+          <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
+        </div>
+      </div>
+      <div class="flex align-items-center justify-content-center">
+        <nav class="main-nav">
+          <router-link class="nav-button" v-bind:to="{ name: 'home' }"
+            >Utama</router-link
+          >
+          <router-link class="nav-button" v-bind:to="{ name: 'list' }"
+            >Senarai</router-link
+          >
+          <router-link class="nav-button" v-bind:to="{ name: 'cart' }"
+            >Troli</router-link
+          >
+          <router-link class="nav-button" v-bind:to="{ name: 'bid-record' }"
+            >Rekod</router-link
+          >
+          <router-link class="nav-button" v-bind:to="{ name: 'result' }"
+            >Keputusan</router-link
+          >
+          <router-link class="nav-button" v-bind:to="{ name: 'login' }"
+            >Login</router-link
+          >
+        </nav>
+      </div>
+      <div class="flex align-items-center justify-content-center">
+        <div class="profile-title hidden lg:flex">
+          <div class="dropdown">
+            <div
+              class="dropdown-toggle"
+              type="button"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              <i class="bi bi-person-circle me-1"></i>{{ username }}
+            </div>
+            <ul class="dropdown-menu">
+              <li>
+                <div
+                  type="button"
+                  class="dropdown-item"
+                  v-on:click="toProfile()"
+                >
+                  Profil <i class="bi bi-person-workspace"></i>
+                </div>
+              </li>
+              <li><hr class="dropdown-divider" /></li>
+              <li>
+                <div
+                  type="button"
+                  v-on:click="doLogout()"
+                  class="dropdown-item"
+                >
+                  Log Keluar <i class="bi bi-box-arrow-right"></i>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Sidebar for phone, tab screen size (width<992px) -->
+  <div class="card lg:hidden md:flex border-none">
+    <div
+      class="
+        flex
+        justify-content-between
+        px-3
+        md:px-6
+        h-3rem
+        flex-wrap
+        main-color
+      "
+    >
+      <div class="flex align-items-center justify-content-center">
+        <div class="company-title" type="button" v-on:click="toHome()">
+          <div class="logo-title">eLelong</div>
+          <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
+        </div>
+      </div>
+
+      <div class="flex align-items-center justify-content-center">
+        <i
+          class="pi pi-bars text-white lg:hidden"
+          @click="visibleRight = true"
+        ></i>
+      </div>
+    </div>
+    <div>
+      <div class="flex justify-content-center h-2rem bg-red-500">
+        Countdown 00:00:00
+      </div>
+    </div>
+  </div>
   <Sidebar v-model:visible="visibleRight" position="right">
     <div class="grid">
       <div class="col-12">
-        <div class="text-center">Hai, {{ username }}</div>
+        <div class="text-center">
+          <i class="bi bi-person-circle me-1"></i> {{ username }}
+        </div>
       </div>
       <div class="col-12">
         <router-link
@@ -46,156 +159,23 @@
           >Profil</router-link
         >
       </div>
+      <div class="col-12">
+        <router-link
+          class="main-nav-link main-nav-link-sidebar"
+          v-bind:to="{ name: 'login' }"
+          >Login</router-link
+        >
+      </div>
       <div class="col-12">
         <a
           class="main-nav-link main-nav-link-sidebar"
           v-on:click="doLogout()"
           href="#"
-          >Loq Keluar</a
+          ><i class="bi bi-box-arrow-right me-1"></i> Log Keluar</a
         >
       </div>
     </div>
   </Sidebar>
-  <div class="card hidden lg:flex border-none">
-    <div
-      class="
-        flex
-        justify-content-between
-        px-3
-        md:px-6
-        h-3rem
-        flex-wrap
-        main-color
-      "
-    >
-      <div class="flex align-items-center justify-content-center">
-        <div class="company-title" type="button" v-on:click="toHome()">
-          <div class="logo-title">eLelong</div>
-          <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
-        </div>
-      </div>
-      <div class="flex align-items-center justify-content-center">
-        <nav class="main-nav hidden lg:flex">
-          <ul class="main-nav-list">
-            <li>
-              <router-link class="main-nav-link" v-bind:to="{ name: 'home' }"
-                >Utama</router-link
-              >
-            </li>
-            <li>
-              <router-link class="main-nav-link" v-bind:to="{ name: 'list' }"
-                >Senarai</router-link
-              >
-            </li>
-            <li>
-              <router-link class="main-nav-link" v-bind:to="{ name: 'cart' }"
-                >Troli</router-link
-              >
-            </li>
-            <li>
-              <router-link
-                class="main-nav-link"
-                v-bind:to="{ name: 'bid-record' }"
-                >Rekod</router-link
-              >
-            </li>
-            <li>
-              <router-link class="main-nav-link" v-bind:to="{ name: 'result' }"
-                >Keputusan</router-link
-              >
-            </li>
-            <!-- <li>
-              <router-link class="main-nav-link" v-bind:to="{ name: 'login' }"
-                >Login</router-link
-              >
-            </li> -->
-          </ul>
-        </nav>
-      </div>
-      <div class="flex align-items-center justify-content-center">
-        <div class="profile-title hidden lg:flex">
-          <div class="dropdown">
-            <div
-              class="dropdown-toggle"
-              type="button"
-              data-bs-toggle="dropdown"
-              aria-expanded="false"
-            >
-              <i class="bi bi-person-circle me-1"></i>{{ username }}
-            </div>
-            <ul class="dropdown-menu">
-              <li>
-                <div
-                  type="button"
-                  class="dropdown-item"
-                  v-on:click="toProfile()"
-                >
-                  Profil <i class="bi bi-person-workspace"></i>
-                </div>
-              </li>
-              <li><hr class="dropdown-divider" /></li>
-              <li>
-                <div
-                  type="button"
-                  v-on:click="doLogout()"
-                  class="dropdown-item"
-                >
-                  Log Keluar <i class="bi bi-box-arrow-right"></i>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <!-- <div class="flex align-items-center justify-content-center">
-        <i
-          class="pi pi-bars text-white lg:hidden"
-          @click="visibleRight = true"
-        ></i>
-      </div> -->
-    </div>
-  </div>
-  <div class="card sticky lg:hidden md:flex border-none">
-    <div
-      class="
-        flex
-        justify-content-between
-        px-3
-        md:px-6
-        h-3rem
-        flex-wrap
-        main-color
-      "
-    >
-      <div class="flex align-items-center justify-content-center">
-        <div class="company-title" type="button" v-on:click="toHome()">
-          <div class="logo-title">eLelong</div>
-          <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
-        </div>
-      </div>
-
-      <div class="flex align-items-center justify-content-center">
-        <i
-          class="pi pi-bars text-white lg:hidden"
-          @click="visibleRight = true"
-        ></i>
-      </div>
-    </div>
-    <div>
-      <div
-      class="
-        flex
-        justify-content-between
-        px-3
-        md:px-6
-        h-2rem
-        flex-wrap
-        bg-red-500
-      "
-    >
-    </div>
-    </div>
-  </div>
 </template>
 
 <script>
@@ -271,12 +251,6 @@ router-link:hover {
   color: blue;
 } */
 
-@media screen and (max-width: 769px) {
-  .header {
-    padding: 0 1rem;
-  }
-}
-
 .main-color {
   background-color: #1e417b;
 }
@@ -304,7 +278,7 @@ router-link:hover {
   display: flex;
   justify-content: center;
   align-items: center;
-  color: #e8ebef;
+  color: #eaf0f9;
   font-size: 1rem;
   font-weight: 700;
 }
@@ -328,7 +302,7 @@ router-link:hover {
   align-items: center;
   justify-content: center;
   height: 2.4rem;
-  color: #bbc2d0;
+  color: #82a4dc;
   font-weight: 500;
   font-size: 1rem;
   transition: all 0.3s;
@@ -342,19 +316,29 @@ router-link:hover {
   color: #1e417b !important;
 }
 
+.nav-button {
+  text-decoration: none;
+  margin: 0 1.5rem;
+  color: #82a4dc;
+}
+
+.nav-button:hover {
+  color: #eaf0f9;
+}
+
 a.router-link-exact-active {
-  background: #bbc2d0;
-  color: #1d3461;
+  background: #d5e1f3;
+  color: #1e417b;
   border-radius: 10px;
-  padding: 1rem;
+  padding: 7px 20px;
 }
 
 a.router-link-exact-active:hover {
-  color: #142444;
+  color: #132a4f;
 }
 
 .profile-title {
-  color: #fff;
+  color: #eaf0f9;
 }
 
 .arrow-logo {