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;

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;

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;

public/icons/arrow-right-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>

public/nav/portfolio.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M20.005 2C21.107 2 22 2.898 22 3.99v16.02c0 1.099-.893 1.99-1.995 1.99H4v-4H2v-2h2v-3H2v-2h2V8H2V6h2V2h16.005zM8 4H6v16h2V4zm12 0H10v16h10V4z"/></svg>