Make navbar items into buttons

Instead of just icons.

src/_components/navbar.tsx

@@ -1,51 +1,58 @@
-export default function () {
+const items = [
-  const iconStyle = {
+  {
-    filter: "var(--filter-green)",
+    title: "Home",
-  };
+    path: "/",
+    icon: {
+      src:
+        "https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/home.svg",
+      alt: "home icon",
+    },
+  },
+  {
+    title: "Blog",
+    path: "/blog",
+    icon: {
+      src:
+        "https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/news.svg",
+      alt: "blog icon",
+    },
+  },
+  {
+    title: "Resume",
+    path: "/resume",
+    icon: {
+      src:
+        "https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/file-cv.svg",
+      alt: "resume icon",
+    },
+  },
+  {
+    title: "GPG Key",
+    path: "/gpg-key",
+    icon: {
+      src:
+        "https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/key.svg",
+      alt: "key icon",
+    },
+  },
+];
 
+export default function Navbar() {
   return (
     <nav className="navbar">
       <ul className="navbar-list">
-        <li className="navbar-list-item home">
+        {items.map((item) => (
-          <a href="/" title="Home">
+          <li>
-            <img
+            <a href={item.path} className="button">
-              src="https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/home.svg"
+              <img
-              className="icon"
+                alt={item.icon.alt}
-              style={iconStyle}
+                className="icon"
-              alt="home"
+                src={item.icon.src}
-            />
+              />
-          </a>
+              <div>{item.title}</div>
-        </li>
+            </a>
-        <li className="navbar-list-item">
+          </li>
-          <a href="/blog/" title="Blog">
+        ))}
-            <img
-              src="https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/news.svg"
-              className="icon"
-              style={iconStyle}
-              alt="blog"
-            />
-          </a>
-        </li>
-        <li className="navbar-list-item">
-          <a href="/resume/" title="Resume">
-            <img
-              src="https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/file-cv.svg"
-              className="icon"
-              style={iconStyle}
-              alt="resume"
-            />
-          </a>
-        </li>
-        <li className="navbar-list-item">
-          <a href="/gpg-key/" title="GPG Key">
-            <img
-              src="https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/key.svg"
-              className="icon"
-              style={iconStyle}
-              alt="gpg key"
-            />
-          </a>
-        </li>
       </ul>
     </nav>
   );

src/_includes/styles/base.scss

@@ -345,3 +345,27 @@ kbd {
   background-color: var(--color-bg--layer-01);
   border: 1px solid var(--color-black);
 }
+
+.button {
+  align-items: center;
+  border-radius: 10px;
+  color: var(--color-green);
+  display: flex;
+  gap: 0.25em;
+  justify-items: center;
+  padding: 0.5em;
+  border: 1px solid var(--color-green);
+
+  img.icon {
+    font-size: 1.25em;
+    filter: var(--filter-green);
+  }
+
+  &:hover {
+    background-color: var(--color-green);
+    color: var(--color-bg);
+    img.icon {
+      filter: var(--filter-bg);
+    }
+  }
+}

src/_includes/styles/components/navbar.scss

@@ -4,45 +4,26 @@ .navbar {
   margin: 0 auto;
   max-width: var(--page--max-width);
   padding: 1rem;
-}
 
-.navbar-list {
+  .navbar-list {
-  display: flex;
+    display: flex;
-  align-items: center;
+    flex-wrap: wrap;
-  gap: 1rem;
+    align-items: center;
-  list-style: none;
+    gap: 1rem;
-  padding-left: 0;
+    list-style: none;
-  padding-right: 1rem;
+    padding-left: 0;
-}
+    padding-right: 1rem;
 
-.navbar-list-item {
+    li {
-  margin: 0;
+      margin: 0;
-  font-size: 2rem;
+      a {
-  &.home {
+        text-decoration: none;
-    margin-right: auto;
+      }
-  }
+      @media (min-width: $bp-sm) {
-  a {
+        &:first-child {
-    text-decoration: none;
+          margin-right: auto;
-  }
+        }
-}
+      }
-
+    }
-.navbar-actions {
-  display: flex;
-  align-items: center;
-  border-left: 1px solid var(--color-black);
-  padding-left: 1rem;
-}
-
-button.navbar-theme-switcher {
-  background-color: transparent;
-  border-radius: 2px;
-  border: 1px solid var(--color-white);
-  padding: 0.5em;
-  cursor: pointer;
-  color: var(--color-white);
-
-  &:hover {
-    color: var(--color-green);
-    border-color: var(--color-green);
   }
 }

src/_includes/styles/variables.scss

@@ -1,10 +1,17 @@
+/* Breakpoints */
+$bp-sm: 640px;
+$bp-md: 768px;
+$bp-lg: 1024px;
+$bp-xl: 1280px;
+$bp-2xl: 1536px;
+
 :root {
   /* Breakpoints */
-  --bp-sm: 640px;
+  --bp-sm: $bp-sm;
-  --bp-md: 768px;
+  --bp-md: $bp-md;
-  --bp-lg: 1024px;
+  --bp-lg: $bp-lg;
-  --bp-xl: 1280px;
+  --bp-xl: $bp-xl;
-  --bp-2xl: 1536px;
+  --bp-2xl: $bp-2xl;
 
   /* Text */
   --text-xs: 0.75rem;