moved vue link down

Author: MrCull

MyDevTools/Components/Layout/NavMenu.razor

@@ -1,7 +1,6 @@
 <div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
         <a class="navbar-brand" href="">My Dev Tools</a>
-        <a class="navbar-brand" href="https://mydevtools.org" rel="noopener noreferrer">Vue Version</a>
         <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
             <span class="navbar-toggler-icon"></span>
         </button>
@@ -80,6 +79,12 @@
                 <span class="bi bi-box" aria-hidden="true"></span> Container Ids
             </NavLink>
         </div>
+        <hr class="nav-separator" />
+        <div class="nav-item px-3 mt-auto">
+            <a class="nav-link" href="https://mydevtools.org" target="_blank" rel="noopener noreferrer" aria-label="Visit Vue version">
+                <span class="bi bi-code-slash" aria-hidden="true"></span> Vue Version
+            </a>
+        </div>
     </nav>
 </div>
 

MyDevTools/Components/Layout/NavMenu.razor.css

@@ -75,3 +75,10 @@
         overflow-y: auto;
     }
 }
+
+.nav-separator {
+    margin: 0.5rem 1rem;
+    border: 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    opacity: 0.5;
+}