updated nav-brand

src/components/Nav.vue

@@ -1,6 +1,11 @@
 <template>
   <nav class="navbar navbar-expand-md navbar-dark fixed-top">
     <div class="container">
+      <router-link class="navbar-brand" to="/" @click="closeNav('mainNav')">
+        <img alt="logo-nav"
+             class="logo-nav"
+             src="/images/logo.svg">
+      </router-link>
       <button aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
               data-bs-target="#mainNav" data-bs-toggle="collapse" type="button">
         <span class="navbar-toggler-icon"></span>
@@ -8,13 +13,6 @@
 
       <div id="mainNav" class="collapse navbar-collapse navbar-nav justify-content-between">
         <ul class="list-unstyled">
-          <li class="nav-item">
-            <router-link class="navbar-brand" to="/" @click="closeNav('mainNav')">
-              <img src="/images/logo.svg"
-                   alt="logo-nav"
-                   class="logo-nav">
-            </router-link>
-          </li>
           <li class="nav-item">
             <router-link class="nav-link" to="/matches" @click="closeNav('mainNav')">
               Matches
@@ -162,6 +160,37 @@ export default {
 }
 
 nav {
+  max-width: 100vw;
+  width: 100vw;
+  height: 70px;
+  background: rgba(16, 18, 26, .9);
+  box-shadow: 0 1px 10px 0 #111;
+  z-index: 2;
+  vertical-align: center !important;
+
+  .navbar-brand {
+    img {
+      width: 75px;
+      height: auto;
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 4px 2px -2px var(--bs-warning);
+    }
+
+    &:hover {
+      color: var(--bs-warning);
+    }
+  }
+
+  ul li {
+    font-size: 1.5rem;
+    font-weight: lighter;
+    margin: 22px 0 0 10px;
+    cursor: pointer;
+    transition: 100ms ease-in-out;
+
     .nav-link {
       text-decoration: none;
       color: white !important;
@@ -182,45 +211,6 @@ nav {
         box-shadow: 0 4px 2px -2px var(--bs-warning);
       }
     }
-
-  max-width: 100vw;
-  height: 70px;
-  width: 100vw;
-  background: rgba(16, 18, 26, .9);
-  box-shadow: 0 1px 10px 0 #111;
-  z-index: 2;
-  ul {
-    display: flex;
-
-    li, .navbar-brand {
-      .logo-nav {
-        height: 35px;
-        margin-bottom: 5px;
-      }
-
-      font-size: 1.5rem;
-      font-weight: lighter;
-      margin: 22px 0 0 10px;
-      cursor: pointer;
-      transition: 100ms ease-in-out;
-    }
-
-    .navbar-brand {
-      color: var(--bs-warning);
-      font-size: 2rem;
-      font-weight: bold;
-      margin-top: 17px;
-      margin-left: 0;
-
-      &:focus-visible {
-        outline: none;
-        box-shadow: 0 4px 2px -2px var(--bs-warning);
-      }
-
-      &:hover {
-        color: var(--bs-warning);
-      }
-    }
   }
 
   form {