From 25f9e25b3ec9c4eaf62eea4181545edc148b2f3f Mon Sep 17 00:00:00 2001
From: eggy <danielchen04@hotmail.ca>
Date: Mon, 23 Jan 2023 19:57:22 -0500
Subject: [PATCH] feat: add portfolio button and dominant button controls

---
 components/HamburgerMenu.vue | 26 +++++++++++++++++++++++++-
 components/Navbar.vue        | 33 ++++++++++++++++++++++++++++++---
 data/navItems.ts             |  1 +
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/components/HamburgerMenu.vue b/components/HamburgerMenu.vue
index b46d23c..52401f3 100644
--- a/components/HamburgerMenu.vue
+++ b/components/HamburgerMenu.vue
@@ -26,7 +26,12 @@ const getSvgIcon = async (name: string) => {
       </svg>
     </label>
     <div class="drawer prose dark:prose-invert">
-      <li class="m-0" v-for="(item, index) in navItems" :key="index">
+      <li
+        class="m-0"
+        v-for="(item, index) in navItems"
+        :key="index"
+        :class="{ dominant: item.dominant }"
+      >
         <!-- stupid vite doesn't let require work
           i should have just hardcoded the navbar items -->
         <a :href="item.href" class="p-2 flex gap-2">
@@ -36,6 +41,11 @@ const getSvgIcon = async (name: string) => {
             preload="auto"
           />
           {{ item.title }}
+          <img
+            v-if="item.dominant"
+            src="/icons/arrow-right-line.svg"
+            class="m-0"
+          />
         </a>
         <hr class="m-0 m-2" v-if="index !== navItems.length - 1" />
       </li>
@@ -133,6 +143,20 @@ html.dark .drawer {
   width: 100%;
 }
 
+.drawer li.dominant a {
+  background: royalblue;
+  color: white;
+  font-weight: bold;
+}
+
+.drawer li.dominant img {
+  filter: invert(1);
+}
+
+.drawer li.dominant a:hover {
+  background: skyblue;
+}
+
 .drawer li a {
   /* overwrite tailwind */
   text-decoration: none;
diff --git a/components/Navbar.vue b/components/Navbar.vue
index 2e2c63e..78e3b80 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -9,11 +9,16 @@ const props = defineProps<{ activeItem?: string }>();
   <nav class="flex items-center justify-between">
     <ul>
       <li class="home-text"><a href="/">Eggworld</a></li>
-      <li v-for="(item, index) in navItems" :key="index">
+      <li
+        v-for="(item, index) in navItems"
+        :key="index"
+        :class="{ dominant: item.dominant }"
+      >
         <a :href="item.href" class="flex gap-2">
           <img :src="`/nav/${item.title.toLowerCase()}.svg`" />
-          {{ item.title }}</a
-        >
+          {{ item.title }}
+          <img v-if="item.dominant" src="/icons/arrow-right-line.svg" />
+        </a>
       </li>
     </ul>
     <div class="flex items-center">
@@ -74,6 +79,20 @@ li.home-text {
   font-weight: bold;
 }
 
+li.dominant {
+  background: royalblue;
+  color: white;
+  font-weight: bold;
+}
+
+li.dominant:hover {
+  background: skyblue;
+}
+
+li.dominant img {
+  filter: invert(1);
+}
+
 .hamburger {
   width: 0rem;
   opacity: 0;
@@ -87,6 +106,14 @@ li.home-text {
     filter var(--trans), padding-left var(--trans), padding-right var(--trans);
 }
 
+@media screen and (max-width: 750px) and (min-width: 601px) {
+  li.home-text {
+    width: 0;
+    opacity: 0;
+    padding: 0;
+  }
+}
+
 @media screen and (max-width: 600px) {
   .hamburger {
     display: flex;
diff --git a/data/navItems.ts b/data/navItems.ts
index a1c7e38..8c964f7 100644
--- a/data/navItems.ts
+++ b/data/navItems.ts
@@ -2,6 +2,7 @@ export const navItems = [
   { href: "/#about", title: "About" },
   { href: "/blog", title: "Blog" },
   { href: "/stories", title: "Stories" },
+  { href: "https://portfolio.eggworld.me", title: "Portfolio", dominant: true },
 ];
 
 export default navItems;