improved navbar button styles

resources/assets/sass/bootstrap-customizations/_navbar.scss

@@ -5,3 +5,24 @@
 
 	box-shadow: 0 -3px 8px rgba(black, 1);
 }
+
+.page-navbar .container {
+	align-items: stretch;
+}
+
+.navbar-collapse {
+	align-items: stretch;
+}
+
+.navbar-nav {
+	align-items: stretch;
+
+	li a {
+		display: inline-block;
+		padding: $sp1;
+	}
+}
+
+.dropdown-menu {
+	box-shadow: 0 3px 4px 0 rgba(black, .1);
+}

resources/views/layouts/main-nav.blade.php

@@ -6,18 +6,18 @@
       <img src="/images/logo.svg" alt="Logo" height="32px" style="margin: -10px 0" class="mr-2">{{--
       --}}datatable.directory
     </a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
-            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
+
+    <button class="navbar-toggler"
+            type="button"
+            data-toggle="collapse"
+            data-target="#mainNavContent"
+            aria-controls="mainNavContent"
+            aria-expanded="false"
+            aria-label="{{ __('Toggle navigation') }}">
       <span class="navbar-toggler-icon"></span>
     </button>
 
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <!-- Left Side Of Navbar -->
-      <ul class="navbar-nav mr-auto">
-
-      </ul>
-
-      <!-- Right Side Of Navbar -->
+    <div class="collapse navbar-collapse" id="mainNavContent">
       <ul class="navbar-nav ml-auto">
         <!-- Authentication Links -->
         @guest()
@@ -27,6 +27,7 @@
               {{ __('Login') }}
             </a>
           </li>
+
           <li class="nav-item">
             <a class="nav-link" href="{{ route('register') }}">
               <i class="fa-user-plus pr-1"></i>
@@ -35,17 +36,21 @@
           </li>
         @else
           <li class="nav-item dropdown">
-            <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
+            <a id="mainNavDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false" v-pre>
               <i class="fa-user-circle-o fa-pr"></i>{{--
               --}}{{ user()->title }} <span class="caret"></span>
             </a>
 
-            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
+            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="mainNavDropdown">
               <a class="dropdown-item" href="{{ route('logout') }}"
                  onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
+                {{-- this is some hack against CSRF - logout only via POST --}}
                 <i class="fa-sign-out fa-pr"></i>{{ __('Logout') }}
               </a>
+              <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
+                @csrf
+              </form>
 
               <a class="dropdown-item" href="{{ route('user.edit') }}">
                 <i class="fa-sliders fa-pr"></i>{{ __('Settings') }}
@@ -54,10 +59,6 @@
               <a class="dropdown-item" href="{{ route('user.manage-oauth') }}">
                 <i class="fa-key-modern fa-pr"></i>{{ __('Security') }}
               </a>
-
-              <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
-                @csrf
-              </form>
             </div>
           </li>
         @endif