updated matchNav for mobile devices

src/views/Match.vue

@@ -33,7 +33,7 @@
             data-bs-target="#matchNav" data-bs-toggle="collapse" type="button">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div id="matchNav" class="collapse navbar-collapse">
+    <div id="matchNav" class="collapse navbar-collapse justify-content-between">
       <ul class="list-unstyled d-flex m-auto">
         <li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
             class="list-item nav-item">
@@ -87,7 +87,7 @@
 <script>
 import {onBeforeMount, onBeforeUnmount, onMounted, reactive, watch} from "vue";
 import axios from 'axios'
-import {DisplayRank, FixMapName, FormatFullDate, GetAvgRank, GoToLink, LoadImage} from "../utils";
+import {closeNav, DisplayRank, FixMapName, FormatFullDate, GetAvgRank, GoToLink, LoadImage} from "../utils";
 import {useStore} from "vuex";
 import {useRoute} from 'vue-router'
 
@@ -180,6 +180,10 @@ export default {
       store.commit('resetMatchDetails')
     })
 
+    document.addEventListener('click', () => {
+      closeNav('#matchNav')
+    })
+
     return {
       data, DisplayRank, FormatFullDate
     }
@@ -271,6 +275,34 @@ export default {
 }
 
 @media screen and (max-width: 991px) {
+  .nav {
+    button {
+      outline: 1px solid var(--bs-primary);
+      margin-left: auto;
+      float: right;
+      margin-right: 1rem;
+
+      &:focus {
+        box-shadow: none;
+        outline: 1px solid var(--bs-primary);
+      }
+    }
+
+    .navbar-collapse {
+      border-radius: 5px;
+      border: 1px solid var(--bs-primary);
+
+      ul {
+        flex-direction: column;
+
+        li {
+          width: 100%;
+          text-align: center;
+        }
+      }
+    }
+  }
+
   #scoreWrapper {
     justify-content: flex-start;
     overflow-x: scroll;