much better css for nav items

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

@@ -35,7 +35,27 @@
             </a>
           </li>
         @else
-          <li class="nav-item dropdown">
+          <li class="nav-item ml-1 d-md-none">
+            <a class="nav-link" 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>
+          </li>
+
+          <li class="nav-item ml-1 d-md-none">
+            <a class="nav-link" href="{{ route('user.edit') }}">
+              <i class="fa-sliders fa-pr"></i>{{ __('Settings') }}
+            </a>
+          </li>
+
+          <li class="nav-item ml-1 d-md-none">
+            <a class="nav-link" href="{{ route('user.manage-oauth') }}">
+              <i class="fa-key-modern fa-pr"></i>{{ __('Security') }}
+            </a>
+          </li>
+
+          <li class="nav-item dropdown mobile-only">
             <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>{{--
@@ -43,14 +63,12 @@
             </a>
 
             <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') }}
@@ -59,7 +77,12 @@
               <a class="dropdown-item" href="{{ route('user.manage-oauth') }}">
                 <i class="fa-key-modern fa-pr"></i>{{ __('Security') }}
               </a>
+
             </div>
+
+            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
+              @csrf
+            </form>
           </li>
         @endif
       </ul>