OrcasHub: Start customizing the header to match

assets/style.css

@@ -6,6 +6,82 @@ html, body {
   font-family: sans-serif;
 }
 
+/* OrcasHub logo at the top of the page. */
+.header-logo {
+  display: flex;
+  justify-content: center;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  background-color: #374151;
+}
+@media (min-width: 768px) {
+  .header-logo svg {
+    height: 8rem;
+  }
+}
+@media (max-width: 768px) {
+  .header-logo svg {
+    height: 5rem;
+  }
+}
+
+/* OrcasHub header links */
+.navbar {
+  height: 3rem;
+  background-color: #374151;
+
+  /* TODO: Hide the navbar links on mobile and replace with toggleable menu. */
+
+  &.d-flex.pa-4 {
+    padding: 0 16px !important;
+  }
+
+  ul {
+    line-height: 1.25rem;
+    display: inline-flex;
+    height: min-content;
+
+    li + li {
+      margin-left: 16px;
+    }
+
+    li {
+      list-style: none;
+      padding: 0.5rem 0.75rem;
+      border-radius: 0.375rem;
+
+      &.active {
+        background-color: #111827;
+
+        a {
+          color: #ffffff;
+        }
+      }
+    }
+
+    a {
+      text-decoration: none;
+      color: #d1d5db;
+      font-weight: 500;
+      font-size: 0.875rem;
+    }
+  }
+}
+
+.right-side-header-buttons {
+  button {
+    color: #d1d5db !important;
+  }
+  a {
+    color: #d1d5db !important;
+  }
+}
+
+/* Remove the background image */
+nav {
+  background-image: none !important;
+}
+
 li {
   margin-left: 10px;
 }

components/NavHeader.vue

@@ -1,8 +1,22 @@
 <template>
-  <div class='d-flex pa-4'>
-    <v-btn icon large nuxt to='/'>
-      <img src='/logo.png' height='40' />
-    </v-btn>
+  <div class="d-flex pa-4 navbar">
+    <ul>
+      <li>
+        <a href="/">Home</a>
+      </li>
+      <li>
+        <a href="/classified/for-sale">Classifieds</a>
+      </li>
+      <li class="active">
+        <a href="/events">Events</a>
+      </li>
+      <li>
+        <a href="https://groups.orcashub.org">Groups</a>
+      </li>
+      <li>
+        <a href="/community-resources">Resources</a>
+      </li>
+    </ul>
 
     <v-spacer/>