From 1476eb9c958a49c839673ea33d3f4f191b4669b4 Mon Sep 17 00:00:00 2001
From: Brian Mason <brianmason@Brians-MBP.localdomain>
Date: Tue, 20 Jun 2023 16:07:30 -0400
Subject: [PATCH 1/2] Navbar complete

---
 src/App.css               |  2 +-
 src/components/Navbar.vue | 82 +++++++++++++++++++++++++++++++--------
 2 files changed, 66 insertions(+), 18 deletions(-)

diff --git a/src/App.css b/src/App.css
index 9ae5a98..efb9551 100644
--- a/src/App.css
+++ b/src/App.css
@@ -23,7 +23,7 @@ body {
   --background:white;
   --color: black;
   --accent: #232323;
-  --light: #f0eeeb;
+  --light: #ffffff;
   --logo: invert(9%) sepia(10%) saturate(418%) hue-rotate(22deg) brightness(98%) contrast(89%);
   --dark: #232323;
   --dark-accent: rgb(76, 75, 72);
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 90e0c77..46199df 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -3,12 +3,46 @@
     <router-link to="/">
       <img src="@/assets/logo.svg" />
     </router-link>
-    <router-link to="/card"> Cards </router-link>
-    <router-link to="/transaction"> Transactions </router-link>
-    <router-link to="/fundingsource"> Funding </router-link>
-    <toggle-button :value="darkMode" @change="toggleDarkMode" />
-    <a href="https://lithic.com" target="_blank"> Learn More </a>
-    <a href="https://docs.lithic.com" target="_blank"> API Docs </a>
+    <div>
+      <router-link
+        to="/"
+        exact
+        class="nav-link"
+        :class="{ active: $route.path === '/' }"
+      >
+        Overview</router-link
+      >
+      <router-link
+        to="/card"
+        class="nav-link"
+        :class="{ active: $route.path === '/card' }"
+      >
+        Cards
+      </router-link>
+      <router-link
+        to="/fundingsource"
+        class="nav-link"
+        :class="{ active: $route.path === '/fundingsource' }"
+      >
+        Funding
+      </router-link>
+      <a href="https://lithic.com" target="_blank" class="nav-link"
+        >Learn More</a
+      >
+      <a href="https://docs.lithic.com" target="_blank" class="nav-link"
+        >Docs</a
+      >
+    </div>
+
+    <div class="switch-container">
+      <p>Light</p>
+      <toggle-button
+        :value="darkMode"
+        @change="toggleDarkMode"
+        class="toggle"
+      />
+      <p>Dark</p>
+    </div>
   </div>
 </template>
 
@@ -21,7 +55,7 @@ export default {
     },
   },
   methods: {
-    toggleDarkMode: function () {
+    toggleDarkMode() {
       this.$store.commit("toggleDarkMode");
     },
   },
@@ -36,23 +70,24 @@ export default {
   top: 0;
   height: 56px;
   width: 100%;
-  background: var(--light, #f0eeeb);
-  padding: 0 24px;
+  padding: 0 100px;
+  background: var(--light, #ffffff);
   display: flex;
   align-items: center;
+  justify-content: space-between;
+
+  > img {
+    filter: var(--logo);
+    height: 20px;
+  }
 
-  > * {
-    font-weight: bold;
+  > div > .nav-link {
+    font-weight: 400;
     font-family: "Graphik";
     text-decoration: none;
     margin-right: 24px;
 
-    > img {
-      filter: var(--logo);
-      height: 20px;
-    }
-
-    &:nth-child(5) {
+    &:nth-child(7) {
       margin-left: auto;
     }
 
@@ -63,6 +98,19 @@ export default {
     &:hover {
       opacity: 0.7;
     }
+
+    &.active {
+      text-decoration: underline;
+    }
+  }
+
+  .switch-container {
+    display: flex;
+    align-items: center;
+  }
+
+  .toggle {
+    margin: 0 12px;
   }
 }
 </style>

From 5e8322a6caffd3f2531040f8d386f929fca2799b Mon Sep 17 00:00:00 2001
From: Brian Mason <b.mason@lithic.com>
Date: Tue, 20 Jun 2023 16:37:10 -0400
Subject: [PATCH 2/2] Added light and dark mode text toggle

---
 src/components/Navbar.vue | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 46199df..e548b06 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar">
+  <div class="navbar" :class="{ 'dark-mode': darkMode }">
     <router-link to="/">
       <img src="@/assets/logo.svg" />
     </router-link>
@@ -10,8 +10,8 @@
         class="nav-link"
         :class="{ active: $route.path === '/' }"
       >
-        Overview</router-link
-      >
+        Overview
+      </router-link>
       <router-link
         to="/card"
         class="nav-link"
@@ -35,13 +35,13 @@
     </div>
 
     <div class="switch-container">
-      <p>Light</p>
+      <p :class="{ 'dark-text': darkMode }">Light</p>
       <toggle-button
         :value="darkMode"
         @change="toggleDarkMode"
         class="toggle"
       />
-      <p>Dark</p>
+      <p :class="{ 'dark-text': !darkMode }">Dark</p>
     </div>
   </div>
 </template>
@@ -107,10 +107,17 @@ export default {
   .switch-container {
     display: flex;
     align-items: center;
-  }
-
-  .toggle {
-    margin: 0 12px;
+    .toggle {
+      margin: 0 12px;
+    }
+    .dark-text {
+      opacity: 0.5;
+    }
+    .dark-mode {
+      .dark-text {
+        opacity: 1;
+      }
+    }
   }
 }
 </style>