From 3dddde6e6357978c9b36912aa6ef07034a528f5e Mon Sep 17 00:00:00 2001
From: Andrew B <bigspeedfpv@gmail.com>
Date: Mon, 20 Feb 2023 18:49:32 -0500
Subject: [PATCH] feat: add navbar

---
 app.vue         | 83 +++++++++++++++++++++++++++++++++++++++++++++++++
 pages/about.vue |  9 ++++++
 pages/index.vue | 57 +++++++++++++++++++++++++++------
 3 files changed, 140 insertions(+), 9 deletions(-)
 create mode 100644 pages/about.vue

diff --git a/app.vue b/app.vue
index 8f62b8b..0d2dd72 100644
--- a/app.vue
+++ b/app.vue
@@ -1,3 +1,86 @@
 <template>
   <NuxtPage />
+
+  <div class="container">
+    <div class="nav">
+      <NuxtLink to="/" :class="{ inactive: route.path !== '/' }" title="Home">
+        Home
+      </NuxtLink>
+      <NuxtLink
+        to="/about"
+        :class="{ inactive: route.path !== '/about' }"
+        title="About"
+      >
+        About
+      </NuxtLink>
+      <NuxtLink
+        to="/portfolio"
+        :class="{ inactive: route.path !== '/portfolio' }"
+        title="Portfolio"
+      >
+        Portfolio
+      </NuxtLink>
+      <NuxtLink
+        to="/contact"
+        :class="{ inactive: route.path !== '/contact' }"
+        title="Contact"
+      >
+        Contact
+      </NuxtLink>
+    </div>
+  </div>
 </template>
+
+<script setup>
+const route = useRoute();
+</script>
+
+<style scoped>
+.container {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+
+  font-size: 1rem;
+}
+
+.nav {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.25rem;
+
+  height: 100%;
+  border: var(--brand-black) 1px solid;
+  border-radius: 0.5rem;
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.5));
+
+  background: var(--brand-background);
+  color: var(--brand-white);
+}
+
+.inactive {
+  color: var(--brand-white);
+  font-weight: normal;
+}
+
+a {
+  text-align: center;
+}
+
+a::after {
+  display: block;
+  content: attr(title);
+  font-weight: bold;
+  height: 1px;
+  color: transparent;
+  overflow: hidden;
+  visibility: hidden;
+}
+</style>
diff --git a/pages/about.vue b/pages/about.vue
new file mode 100644
index 0000000..c1a501e
--- /dev/null
+++ b/pages/about.vue
@@ -0,0 +1,9 @@
+<template><h1>About</h1></template>
+
+<script>
+export default {
+  name: "About",
+};
+</script>
+
+<style scoped></style>
diff --git a/pages/index.vue b/pages/index.vue
index 2f4a583..56691a8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="full flex">
     <div class="flex row">
-      <div class="flex col align-right">
+      <div class="flex col start">
         <h1>Andrew Brower</h1>
-        <span>Full-Stack Web Developer</span>
+        <span>Full-Stack Web Developer<br />and FPV Pilot</span>
       </div>
       <div class="divider" />
-      <div class="flex col align-left">
-        <NuxtLink to="/about">About</NuxtLink>
-
-        <a href="https://github.com/bigspeedfpv">GitHub</a>
+      <div class="flex col end">
+        <NuxtLink to="/about" title="About">About</NuxtLink>
+        <NuxtLink to="/projects" title="Projects">Projects</NuxtLink>
+        <a href="https://github.com/bigspeedfpv" title="GitHub">GitHub</a>
       </div>
     </div>
   </div>
@@ -26,7 +26,6 @@
 .flex {
   display: flex;
   justify-content: center;
-  align-items: center;
 }
 
 .col {
@@ -34,16 +33,18 @@
   gap: 0.75rem;
 }
 
-.col.align-right {
+.col.start {
   align-items: flex-end;
+  text-align: end;
 }
 
-.col.align-left {
+.col.end {
   align-items: flex-start;
 }
 
 .row {
   flex-direction: row;
+  align-items: center;
   gap: 1.5rem;
 }
 
@@ -53,4 +54,42 @@
   background: var(--brand-white);
   opacity: 25%;
 }
+
+a {
+  color: var(--brand-white);
+  font-weight: normal;
+  font-size: 1.1rem;
+  transition: font-weight 0.2s ease-in-out;
+}
+
+a:hover {
+  font-weight: 600;
+}
+
+a::after {
+  display: block;
+  content: attr(title);
+  font-weight: 600;
+  height: 1px;
+  color: transparent;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+@media (max-width: 500px) {
+  .row {
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  .col {
+    align-items: center !important;
+    text-align: center !important;
+  }
+
+  .divider {
+    width: 150px;
+    height: 1px;
+  }
+}
 </style>
-- 
2.51.2