fixed 'not working collapsible nav'

src/components/Nav.vue

@@ -1,32 +1,43 @@
 <template>
-  <nav class="navbar navbar-expand navbar-dark fixed-top">
+  <nav class="navbar navbar-expand-md navbar-dark fixed-top">
     <div class="container">
-      <button aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
+      <button aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
-              data-bs-target="#navbar-collapse" data-bs-toggle="collapse" type="button">
+              data-bs-target="#mainNav" data-bs-toggle="collapse" type="button">
         <span class="navbar-toggler-icon"></span>
       </button>
 
-      <div class="collapse navbar-collapse navbar-nav fs-5" id="navbar-collapse">
+      <div id="mainNav" class="collapse navbar-collapse navbar-nav justify-content-between">
-        <router-link class="navbar-brand text-warning fw-bold fs-3" to="/">
+        <ul class="list-unstyled">
-          CSGO<span class="text-up text-white fw-bold">WTF</span>
+          <li class="nav-item text-warning fw-bold" data-bs-target="#mainNav.show" data-bs-toggle="collapse"
-        </router-link>
+              @click="GoToLink('/')">
+            CSGO<span class="text-up text-white fw-bold">WTF</span>
+          </li>
+          <li class="nav-item" data-bs-target="#mainNav.show" data-bs-toggle="collapse" @click="GoToLink('/explore')">
+            Explore
+          </li>
+        </ul>
+        <form class="d-flex" data-bs-target="#mainNav.show" @keydown.enter.prevent="parseSearch">
+          <label for="search">
+            <svg class="bi bi-search" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+              <path
+                  d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+            </svg>
+          </label>
 
-        <router-link class="nav-link" to="/explore">Explore</router-link>
+          <input id="search" v-model="data.searchInput" aria-label="Search"
+                 class="form-control bg-transparent border-0"
+                 placeholder="SteamID64, Profile Link or Custom URL"
+                 type="search">
+          <button
+              class="btn border-2 btn-outline-info"
+              type="button"
+              @click="parseSearch"
+          >
+            Search!
+          </button>
+        </form>
       </div>
 
-      <form class="d-flex justify-content-end" @keydown.enter.prevent="parseSearch">
-        <label for="search">
-          <svg class="bi bi-search" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-            <path
-                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
-          </svg>
-        </label>
-
-        <input id="search" v-model="data.searchInput" aria-label="Search"
-               class="form-control bg-transparent border-0"
-               placeholder="SteamID64, Profile Link or Custom URL"
-               type="search">
-      </form>
     </div>
   </nav>
 </template>
@@ -36,6 +47,7 @@ import {reactive} from "vue";
 import {useStore} from 'vuex'
 import {sanitize} from 'string-sanitizer'
 import router from "../router";
+import {GoToLink} from '../utils'
 
 export default {
   name: 'Nav',
@@ -81,7 +93,7 @@ export default {
     }
 
     return {
-      data, parseSearch
+      data, parseSearch, GoToLink
     }
   }
 }
@@ -93,6 +105,29 @@ nav {
   height: 70px;
   width: 100vw;
   background: rgba(16, 18, 26, 1);
+  z-index: 2;
+
+  ul {
+    display: flex;
+
+    li {
+      font-size: 1.5rem;
+      font-weight: lighter;
+      margin: 15px 5px 0 5px;
+      cursor: pointer;
+      transition: 100ms ease-in-out;
+
+      &:first-child {
+        font-size: 1.5rem;
+        font-weight: bold;
+      }
+
+      &:hover {
+        color: var(--bs-info);
+        transition: 100ms ease-in-out;
+      }
+    }
+  }
 
   .text-up {
     font-size: 40%;
@@ -127,9 +162,37 @@ nav {
 
 @media screen and (max-width: 768px) {
   nav {
-    input[type="search"] {
+    .navbar-collapse {
-      min-width: 100%;
+      background: var(--bs-secondary);
-      max-width: 100%;
+    }
+
+    ul {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+      width: 100%;
+
+      li {
+        line-height: 1;
+        padding: 0 0 20px 0;
+        border-bottom: 1px solid rgba(255, 255, 255, .1);
+      }
+    }
+
+    form {
+      label {
+        display: none;
+      }
+
+      input[type="search"] {
+        margin-bottom: 15px;
+        width: 100%;
+      }
+
+      button {
+        display: block;
+        margin-top: -15px;
+      }
     }
   }
 }

src/utils/GoTo.js

@@ -7,3 +7,7 @@ export const GoToMatch = (id) => {
 export const GoToPlayer = (id) => {
     router.push(`/player/${id}`)
 }
+
+export const GoToLink = (link) => {
+    router.push(`${link}`)
+}

src/utils/index.js

@@ -1,12 +1,12 @@
 import {FormatDate, FormatDuration, FormatFullDate, FormatFullDuration} from "./DateTime";
-import {GoToMatch, GoToPlayer} from "./GoTo";
+import {GoToMatch, GoToPlayer, GoToLink} from "./GoTo";
 import {SaveLastVisitedToLocalStorage} from "./LocalStorage";
 import {GetHLTV_1} from "./HLTV";
 import {DisplayRank} from "./Display";
 
 export {
     FormatDate, FormatFullDuration, FormatFullDate, FormatDuration,
-    GoToMatch, GoToPlayer,
+    GoToMatch, GoToPlayer, GoToLink,
     SaveLastVisitedToLocalStorage,
     GetHLTV_1,
     DisplayRank