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,12 +160,18 @@ export default {
 }
 
 nav {
-  .nav-link {
-    text-decoration: none;
-    color: white !important;
+  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;
 
-    .router-link-exact-active {
-      box-shadow: 0 4px 2px -2px var(--bs-warning);
+  .navbar-brand {
+    img {
+      width: 75px;
+      height: auto;
     }
 
     &:focus-visible {
@@ -176,49 +180,35 @@ nav {
     }
 
     &:hover {
-      color: #bdbdbd !important;
-      transition: 250ms ease-in-out;
-      cursor: pointer;
-      box-shadow: 0 4px 2px -2px var(--bs-warning);
+      color: 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;
+  ul li {
+    font-size: 1.5rem;
+    font-weight: lighter;
+    margin: 22px 0 0 10px;
+    cursor: pointer;
+    transition: 100ms ease-in-out;
 
-    li, .navbar-brand {
-      .logo-nav {
-        height: 35px;
-        margin-bottom: 5px;
+    .nav-link {
+      text-decoration: none;
+      color: white !important;
+
+      .router-link-exact-active {
+        box-shadow: 0 4px 2px -2px var(--bs-warning);
       }
 
-      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);
+        color: #bdbdbd !important;
+        transition: 250ms ease-in-out;
+        cursor: pointer;
+        box-shadow: 0 4px 2px -2px var(--bs-warning);
       }
     }
   }