updated mainNav to use router-link

src/components/Nav.vue

@@ -8,15 +8,18 @@
 
       <div id="mainNav" class="collapse navbar-collapse navbar-nav justify-content-between">
         <ul class="list-unstyled">
-          <li class="nav-item text-warning fw-bold" data-bs-target="#mainNav.show" data-bs-toggle="collapse"
+          <li class="nav-item">
-              @click="GoToLink('/')">
+            <router-link class="navbar-brand" to="/" @click="closeNav">
-            CSGO<span class="text-up text-white fw-bold">WTF</span>
+              CSGO<span class="text-up text-white fw-bold">WTF</span>
+            </router-link>
           </li>
-          <li class="nav-item" data-bs-target="#mainNav.show" data-bs-toggle="collapse" @click="GoToLink('/explore')">
+          <li class="nav-item">
-            Explore
+            <router-link class="nav-link" to="/explore" @click="closeNav">
+              Explore
+            </router-link>
           </li>
         </ul>
-        <form class="d-flex" data-bs-target="#mainNav.show" @keydown.enter.prevent="parseSearch">
+        <form class="d-flex" @keydown.enter.prevent="parseSearch">
           <label for="search">
             <i class="fas fa-search"></i>
           </label>
@@ -46,7 +49,7 @@
 <script>
 import {reactive} from "vue";
 import {useStore} from 'vuex'
-import {GetUser, GoToLink, GoToPlayer} from '../utils'
+import {GetUser, GoToPlayer} from '../utils'
 
 export default {
   name: 'Nav',
@@ -57,6 +60,12 @@ export default {
       error: ''
     })
 
+    const closeNav = () => {
+      const nav = document.querySelector('#mainNav')
+      if (nav.classList.contains('show'))
+        nav.classList.remove('show')
+    }
+
     const parseSearch = async () => {
       const input = data.searchInput
       const customUrlPattern = 'https://steamcommunity.com/id/'
@@ -95,10 +104,13 @@ export default {
             data.searchInput = ''
             document.activeElement.blur()
 
-            if (store.state.vanityUrl)
+            if (store.state.vanityUrl) {
+              closeNav()
               GoToPlayer(store.state.vanityUrl)
-            else if (store.state.id64)
+            } else if (store.state.id64) {
+              closeNav()
               GoToPlayer(store.state.id64)
+            }
 
           } else if (res === 404) {
             data.searchInput = ''
@@ -115,7 +127,7 @@ export default {
     }
 
     return {
-      data, parseSearch, GoToLink
+      data, parseSearch, closeNav
     }
   }
 }
@@ -123,6 +135,22 @@ export default {
 
 <style lang="scss" scoped>
 nav {
+  .nav-link {
+    text-decoration: none;
+    color: white !important;
+
+    .router-link-exact-active {
+      box-shadow: 0 4px 2px -2px var(--bs-warning);
+    }
+
+    &:hover {
+      color: #bdbdbd !important;
+      transition: 250ms ease-in-out;
+      cursor: pointer;
+      box-shadow: 0 4px 2px -2px var(--bs-warning);
+    }
+  }
+
   max-width: 100vw;
   height: 70px;
   width: 100vw;
@@ -132,7 +160,7 @@ nav {
   ul {
     display: flex;
 
-    li {
+    li, .navbar-brand {
       font-size: 1.5rem;
       font-weight: lighter;
       margin: 22px 0 0 10px;
@@ -143,17 +171,17 @@ nav {
         font-size: 40%;
         vertical-align: top;
       }
+    }
 
-      &:first-child {
+    .navbar-brand {
-        font-size: 2rem;
+      color: var(--bs-warning);
-        font-weight: bold;
+      font-size: 2rem;
-        margin-top: 17px;
+      font-weight: bold;
-        margin-left: 0;
+      margin-top: 17px;
-      }
+      margin-left: 0;
 
-      &:hover router-link {
+      &:hover {
-        color: var(--bs-info);
+        color: var(--bs-warning);
-        transition: 100ms ease-in-out;
       }
     }
   }
@@ -195,6 +223,45 @@ nav {
   }
 }
 
+@media screen and (max-width: 410px) {
+  form {
+    margin-left: auto !important;
+    margin-right: auto !important;
+
+    input[type="search"] {
+      margin-left: 0 !important;
+      max-width: 60vw !important;
+      min-width: 60vw !important;
+    }
+  }
+}
+
+@media screen and (max-width: 455px) and (min-width: 410px) {
+  form {
+    margin-left: auto !important;
+    margin-right: auto !important;
+
+    input[type="search"] {
+      margin-left: 0 !important;
+      max-width: 65vw !important;
+      min-width: 65vw !important;
+    }
+  }
+}
+
+@media screen and (max-width: 610px) and (min-width: 456px) {
+  form {
+    margin-left: auto !important;
+    margin-right: auto !important;
+
+    input[type="search"] {
+      margin-left: 0 !important;
+      max-width: 68vw !important;
+      min-width: 68vw !important;
+    }
+  }
+}
+
 @media screen and (max-width: 768px) {
   nav {
     button {
@@ -236,8 +303,9 @@ nav {
 
         input[type="search"] {
           margin-bottom: 15px;
-          max-width: 100%;
+          margin-left: 37px;
-          min-width: 82%;
+          max-width: 400px;
+          min-width: 400px;
           font-size: 1rem;
 
           white-space: nowrap;
@@ -252,7 +320,8 @@ nav {
         button {
           margin-left: 10px;
           display: block;
-          margin-top: -15px;
+          margin-top: -2px;
+          height: 40px;
         }
       }
     }