From 6557cbd0bcb5bb692ba7ba35b62b65d664e42905 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 21:50:07 +0200
Subject: [PATCH] improved navbar button styles

---
 .../bootstrap-customizations/_navbar.scss     | 21 +++++++++++++
 resources/views/layouts/main-nav.blade.php    | 31 ++++++++++---------
 2 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/resources/assets/sass/bootstrap-customizations/_navbar.scss b/resources/assets/sass/bootstrap-customizations/_navbar.scss
index e89a1d2..52446a8 100644
--- a/resources/assets/sass/bootstrap-customizations/_navbar.scss
+++ b/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);
+}
diff --git a/resources/views/layouts/main-nav.blade.php b/resources/views/layouts/main-nav.blade.php
index 80ca374..d7f4edd 100644
--- a/resources/views/layouts/main-nav.blade.php
+++ b/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