From 57911377ef916e24ff3ad11456844940f04b844a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= <ondra@ondrovo.com>
Date: Mon, 23 Jul 2018 22:16:48 +0200
Subject: [PATCH] much better css for nav items

---
 resources/assets/sass/_helpers.scss           |  6 ++++
 .../bootstrap-customizations/_navbar.scss     | 18 +++--------
 resources/views/layouts/main-nav.blade.php    | 31 ++++++++++++++++---
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/resources/assets/sass/_helpers.scss b/resources/assets/sass/_helpers.scss
index 34c8690..8ddad0c 100644
--- a/resources/assets/sass/_helpers.scss
+++ b/resources/assets/sass/_helpers.scss
@@ -12,3 +12,9 @@
 		opacity: 0;
 	}
 }
+
+@media (max-width:767px){
+	.mobile-only {
+		display: none;
+	}
+}
diff --git a/resources/assets/sass/bootstrap-customizations/_navbar.scss b/resources/assets/sass/bootstrap-customizations/_navbar.scss
index 52446a8..a070142 100644
--- a/resources/assets/sass/bootstrap-customizations/_navbar.scss
+++ b/resources/assets/sass/bootstrap-customizations/_navbar.scss
@@ -4,23 +4,13 @@
 	border-bottom: 1px solid $primary;
 
 	box-shadow: 0 -3px 8px rgba(black, 1);
-}
-
-.page-navbar .container {
-	align-items: stretch;
-}
 
-.navbar-collapse {
-	align-items: stretch;
+	white-space: nowrap;
 }
 
-.navbar-nav {
-	align-items: stretch;
-
-	li a {
-		display: inline-block;
-		padding: $sp1;
-	}
+.nav-link {
+	padding: $sp1 $sp3;
+	display: inline-block;
 }
 
 .dropdown-menu {
diff --git a/resources/views/layouts/main-nav.blade.php b/resources/views/layouts/main-nav.blade.php
index d7f4edd..3a19036 100644
--- a/resources/views/layouts/main-nav.blade.php
+++ b/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>