🔌 Add websocket page

layouts/default.vue

@@ -7,6 +7,11 @@
         </nuxt-link>
         <h3>Lightweight API request builder</h3>
       </div>
+
+      <nav>
+        <nuxt-link to="/">HTTP</nuxt-link>
+        <nuxt-link to="/websocket">WebSocket</nuxt-link>
+      </nav>
     </header>
 
     <nuxt id="main" />
@@ -41,6 +46,43 @@
     margin: 0 auto;
     max-width: 1200px;
   }
+
+  header { padding-right: 0; }
+
+  nav {
+    a {
+      display: inline-block;
+      position: relative;
+      padding: 8px 16px;
+
+      &.nuxt-link-exact-active {
+        color: black;
+        &:before { width: 100%; height: 100% }
+      }
+
+      &:before {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: -1;
+
+        background-color: var(--ac-color);
+        border-radius: 4px;
+        margin: auto;
+      }
+
+      &:not(.nuxt-link-exact-active):hover:before {
+        animation: linkHover 0.3s forwards ease-in-out;
+      }
+
+      @keyframes linkHover {
+        0% { width: 0; height: 2px; }
+        100% { width: 100%; height: 2px; }
+      }
+    }
+  }
 </style>
 
 <script>
@@ -49,11 +91,16 @@
   export default {
     data () {
       return {
+        // Once the PWA code is initialized, this holds a method
+        // that can be called to show the user the installation
+        // prompt.
         showInstallPrompt: null
       }
     },
 
     mounted () {
+      // Initializes the PWA code - checks if the app is installed,
+      // etc.
       (async () => {
         this.showInstallPrompt = await intializePwa();
       })();