Move dashboard svgs to the root directory and update the dashboard navbar

resources/assets/sass/dashboard.scss

@@ -18,9 +18,6 @@ $c-dashboard-light: #f1f1f1;
 $c-dashboard-edit: #87823e;
 $c-dashboard-delete: #87483e;
 
-// Sizes
-$navbar-height: 50px;
-
 //
 // Main Dashboard Styles
 //
@@ -37,21 +34,23 @@ body {
 }
 
 .navbar {
+    margin-bottom: $grid-gutter-width;
     border: 0;
     background-color: $c-dashboard-dark;
 
+    @include media-breakpoint-down(md) {
+        padding-right: 8px;
+        padding-left: 8px;
+    }
+
     @include media-breakpoint-down(sm) {
         margin-bottom: 0px;
     }
 
-    &-header {
-        height: $navbar-height;
-    }
-
     &-brand {
+        @include font-sans-bold;
         overflow: hidden;
         max-width: calc(100vw - 60px);
-        font-weight: bold;
         white-space: nowrap;
 
         @include media-breakpoint-down(sm) {
@@ -59,65 +58,37 @@ body {
         }
     }
 
-    #spark-navbar-collapse {
+    &-toggler {
+        position: absolute;
+        top: 3px;
+        right: 0px;
         border: 0;
-        box-shadow: none;
 
-        .dropdown {
-            .dropdown-toggle .caret {
-                margin-left: 4px;
+        @include media-breakpoint-up(md) {
+            top: 10px;
         }
-
-            &.open .dropdown-toggle {
-                background-color: darken($c-dashboard-dark, 5%);
-                color: $c-dashboard-light;
     }
 
     .dropdown-menu {
-                top: calc(100% - 1px);
-                right: -1px;
-                background-color: $c-dashboard-dark;
+        padding: 0px;
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
 
-                > li > a:hover, > li > a:focus {
-                    background-color: transparent;
+        @include media-breakpoint-up(lg) {
+            top: 45px;
         }
 
-                > li > a {
-                    &, &:hover, &:focus {
-                        color: #fff;
-                    }
-                }
-            }
-        }
+        @include media-breakpoint-down(md) {
+            border-bottom-right-radius: 0;
+            border-bottom-left-radius: 0;
         }
 
-    .navbar-brand, .navbar-default .navbar-nav > li > a, .navbar-nav > li > a {
-        &, &:hover, &:focus {
-            color: $c-dashboard-light;
+        .dropdown-item {
+            @include media-breakpoint-down(md) {
+                padding-right: 8px;
+                padding-left: 8px;
             }
         }
-
-    .navbar-toggle {
-        position: absolute;
-        top: 6px;
-        right: 8px;
-        margin: 0px;
-        border: 0;
-
-        &, &:hover, &:focus {
-            background-color: transparent;
-        }
-
-        .icon-bar {
-            width: 27px;
-            height: 4px;
-            background-color: $c-dashboard-light;
-            transition: background-color 100ms;
-        }
-
-        &:hover .icon-bar {
-            background-color: darken($c-dashboard-dark, 15%);
-        }
     }
 }
 
@@ -281,8 +252,18 @@ body {
     color: $c-text-light;
     font-size: 14px;
     transition: background-color 100ms;
-    &:hover { background-color: darken($c-dashboard-dark, 5%); }
-    &:focus { background-color: lighten($c-dashboard-dark, 5%); }
+
+    &:hover {
+        background-color: darken($c-dashboard-dark, 5%);
+    }
+
+    &:focus {
+        background-color: lighten($c-dashboard-dark, 5%);
+    }
+
+    &, &:hover, &:focus {
+        text-decoration: none;
+    }
 
     &.vertical-margin {
         margin-top: 3px;
@@ -296,27 +277,46 @@ body {
     &.btn-warning {
         border-color: darken($c-dashboard-edit, 10%);
         background-color: $c-dashboard-edit;
-        &:hover { background-color: darken($c-dashboard-edit, 5%); }
-        &:focus { background-color: lighten($c-dashboard-edit, 5%); }
+
+        &:hover {
+            background-color: darken($c-dashboard-edit, 5%);
+        }
+
+        &:focus {
+            background-color: lighten($c-dashboard-edit, 5%);
+        }
     }
 
     &.btn-danger {
         border-color: darken($c-dashboard-delete, 10%);
         background-color: $c-dashboard-delete;
-        &:hover { background-color: darken($c-dashboard-delete, 5%); }
-        &:focus { background-color: lighten($c-dashboard-delete, 5%); }
+
+        &:hover {
+            background-color: darken($c-dashboard-delete, 5%);
+        }
+
+        &:focus {
+            background-color: lighten($c-dashboard-delete, 5%);
+        }
     }
 
     &.btn-secondary {
         border-color: darken($c-dashboard-light, 10%);
         background-color: $c-dashboard-light;
         color: $c-text;
-        &:hover { background-color: darken($c-dashboard-light, 5%); }
-        &:focus { background-color: lighten($c-dashboard-light, 5%); }
+
+        &:hover {
+            background-color: darken($c-dashboard-light, 5%);
         }
 
-    &.btn-link { color: $c-dashboard-light; }
-    &, &:hover, &:focus { text-decoration: none; }
+        &:focus {
+            background-color: lighten($c-dashboard-light, 5%);
+        }
+    }
+
+    &.btn-link {
+        color: $c-dashboard-light;
+    }
 }
 
 .view-table-container {
@@ -743,82 +743,82 @@ body {
     }
 
     &.fa-arrows-alt:after {
-        background-image: url("/img/dashboard/fa/arrows-alt.svg");
+        background-image: url("/img/dashboard/arrows-alt.svg");
     }
 
     &.fa-bold:after {
-        background-image: url("/img/dashboard/fa/bold.svg");
+        background-image: url("/img/dashboard/bold.svg");
     }
 
     &.fa-code:after {
-        background-image: url("/img/dashboard/fa/code.svg");
+        background-image: url("/img/dashboard/code.svg");
     }
 
     &.fa-columns:after {
-        background-image: url("/img/dashboard/fa/columns.svg");
+        background-image: url("/img/dashboard/columns.svg");
     }
 
     &.fa-eraser:after {
-        background-image: url("/img/dashboard/fa/eraser.svg");
+        background-image: url("/img/dashboard/eraser.svg");
     }
 
     &.fa-eye:after {
-        background-image: url("/img/dashboard/fa/eye.svg");
+        background-image: url("/img/dashboard/eye.svg");
     }
 
     &.fa-header:after {
-        background-image: url("/img/dashboard/fa/header.svg");
+        background-image: url("/img/dashboard/header.svg");
     }
 
     &.fa-italic:after {
-        background-image: url("/img/dashboard/fa/italic.svg");
+        background-image: url("/img/dashboard/italic.svg");
     }
 
     &.fa-link:after {
-        background-image: url("/img/dashboard/fa/link.svg");
+        background-image: url("/img/dashboard/link.svg");
     }
 
     &.fa-list-ol:after {
-        background-image: url("/img/dashboard/fa/list-ol.svg");
+        background-image: url("/img/dashboard/list-ol.svg");
     }
 
     &.fa-list-ul:after {
-        background-image: url("/img/dashboard/fa/list-ul.svg");
+        background-image: url("/img/dashboard/list-ul.svg");
     }
 
     &.fa-minus:after {
-        background-image: url("/img/dashboard/fa/minus.svg");
+        background-image: url("/img/dashboard/minus.svg");
     }
 
     &.fa-picture-o:after {
-        background-image: url("/img/dashboard/fa/picture-o.svg");
+        background-image: url("/img/dashboard/picture-o.svg");
     }
 
     &.fa-question-circle:after {
-        background-image: url("/img/dashboard/fa/question-circle.svg");
+        background-image: url("/img/dashboard/question-circle.svg");
     }
 
     &.fa-quote-left:after {
-        background-image: url("/img/dashboard/fa/quote-left.svg");
+        background-image: url("/img/dashboard/quote-left.svg");
     }
 
     &.fa-repeat:after {
-        background-image: url("/img/dashboard/fa/repeat.svg");
+        background-image: url("/img/dashboard/repeat.svg");
     }
 
     &.fa-star:after {
-        background-image: url("/img/dashboard/fa/star.svg");
+        background-image: url("/img/dashboard/star.svg");
     }
 
     &.fa-strikethrough:after {
-        background-image: url("/img/dashboard/fa/strikethrough.svg");
+        background-image: url("/img/dashboard/strikethrough.svg");
     }
 
     &.fa-table:after {
-        background-image: url("/img/dashboard/fa/table.svg");
+        background-image: url("/img/dashboard/table.svg");
     }
 
     &.fa-undo:after {
-        background-image: url("/img/dashboard/fa/undo.svg");
+        background-image: url("/img/dashboard/undo.svg");
     }
 }

resources/views/dashboard/sections/nav.blade.php

@@ -1,60 +1,55 @@
-<nav class="navbar navbar-default">
-    <div class="container-fluid">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#spark-navbar-collapse">
-                <span class="sr-only">Toggle Navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
+<nav class="navbar navbar-expand-lg navbar-dark">
+    @set('current_page', preg_replace([ '/^.*\/dashboard\/?/', '/\/.*/' ], [ '', '' ], Request::url()))
 
     <a class="navbar-brand" href="{{ url('/dashboard') }}">
         {{ env('APP_NAME') }} Dashboard
     </a>
-        </div>
 
-        <div id="spark-navbar-collapse" class="navbar-collapse collapse">
-            <ul class="nav navbar-nav navbar-right">
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dashboard-navbar" aria-controls="dashboard-navbar" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div id="dashboard-navbar" class="collapse navbar-collapse">
+        <ul class="navbar-nav ml-auto">
             @if (Auth::guest())
-                    <li><a href="{{ url('/login') }}">Login</a></li>
+                <li class="nav-item"><a class="nav-link" href="{{ url('/login') }}">Login</a></li>
 
                 @if(env('REGISTRATION', false))
-                        <li><a href="{{ url('/register') }}">Register</a></li>
+                    <li class="nav-item"><a class="nav-link" href="{{ url('/register') }}">Register</a></li>
                 @endif
             @else
                 @foreach(App\Models\DashboardMenu::$menu as $menu_item)
                     @if(is_array($menu_item[1]))
-                            <li class="dropdown">
-                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
+                        <li class="nav-item dropdown">
+                            <a id="menu-dropdown" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 {{ $menu_item[0] }} <span class="caret"></span>
                             </a>
 
-                                <ul class="dropdown-menu" role="menu">
+                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="menu-dropdown">
                                 @foreach($menu_item[1] as $submenu_item)
-                                        <li><a href="{{ url('/dashboard/' . $submenu_item[1]) }}">{{ $submenu_item[0] }}</a></li>
+                                    <a class="dropdown-item" href="{{ url('/dashboard/' . $submenu_item[1]) }}">{{ $submenu_item[0] }}</a>
                                 @endforeach
-                                </ul>
+                            </div>
                         </li>
                     @else
                         <li class="nav-item">
-                                <a href="{{ url('/dashboard/' . $menu_item[1]) }}">
+                            <a class="nav-link {{ $current_page == $menu_item[1] ? 'active' : '' }}" href="{{ url('/dashboard/' . $menu_item[1]) }}">
                                 {{ $menu_item[0] }}
                             </a>
                         </li>
                     @endif
                 @endforeach
 
-                    <li class="dropdown">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
+                <li class="nav-item dropdown">
+                    <a id="user-dropdown" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         {{ Auth::user()->name }} <span class="caret"></span>
                     </a>
 
-                        <ul class="dropdown-menu" role="menu">
-                            <li><a href="{{ url('/logout') }}">Logout</a></li>
-                        </ul>
+                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="user-dropdown">
+                        <a class="dropdown-item" href="{{ url('/logout') }}">Logout</a>
+                    </div>
                 </li>
             @endif
         </ul>
     </div>
-    </div>
 </nav>