horizontal menu

config/admin.php

@@ -211,6 +211,7 @@ return [
         // Whether enable menu bind to a permission.
         'bind_permission' => true,
 
+        'default_icon' => 'feather icon-circle',
     ],
 
     /*
@@ -284,8 +285,11 @@ return [
         // default, blue, blue-light, green
         'color' => 'default',
 
+        // sidebar-separate
         'body_class' => [],
 
+        'horizontal_menu' => false,
+
         'sidebar_collapsed' => false,
 
         // light, primary, dark

resources/assets/dcat/js/bootstrappers/Menu.js

@@ -2,6 +2,7 @@
 export default class Menu {
     constructor(Dcat) {
         this.init();
+        this.initHorizontal();
     }
 
     // 菜单点击选中效果
@@ -29,4 +30,28 @@ export default class Menu {
             $(this).addClass('active')
         });
     }
+
+    initHorizontal() {
+        let selectors = {
+            item: '.horizontal-menu .main-menu-content li.nav-item',
+            link: '.horizontal-menu .main-menu-content li.nav-item .nav-link',
+        };
+
+        $(selectors.item).on('mouseover', function () {
+            $(this).addClass('open')
+        }).on('mouseout', function () {
+            $(this).removeClass('open')
+        });
+
+        $(selectors.link).on('click', function () {
+            let $this = $(this);
+
+            $(selectors.link).removeClass('active');
+
+            $this.addClass('active');
+
+            $this.parents('.dropdown').find('.nav-link').eq(0).addClass('active');
+            $this.parents('.dropdown-submenu').find('.nav-link').eq(0).addClass('active')
+        });
+    }
 }

resources/assets/dcat/sass/components/_horizontal-menu.scss

@@ -1,5 +1,14 @@
 
 .horizontal-menu {
+  .navbar-fixed-top .content-wrapper {
+    padding-top: 6.1rem;
+  }
+
+  .header-navbar.navbar-shadow {
+    box-shadow: none;
+    border-bottom: 1px solid $border-color;
+  }
+
   .content-wrapper, .main-footer, .main-header {
     margin-left: 0!important;
   }
@@ -10,15 +19,34 @@
     top: 0;
   }
 
-  .header-navbar.navbar-horizontal,
+  .header-navbar.navbar-horizontal {
+    top: $navbar-horizontal-top;
+    position: fixed;
+  }
+
   .main-horizontal-sidebar {
-    top: 68px;
+    top: $navbar-horizontal-top;
     left: 0;
     position: fixed;
     width: 100%;
     height: inherit;
     min-height: auto;
     bottom: inherit;
+    box-shadow: none;
+    //padding: 0 $content-wrapper-padding;
+  }
+
+  .main-horizontal-sidebar > div {
+    box-shadow: $shadow;
+    background: $white;
+    //border-radius: .4rem;
+  }
+
+  [class*=sidebar-dark-] .nav-sidebar > .nav-item.menu-open > .nav-link,
+  [class*=sidebar-dark-] .nav-sidebar > .nav-item:hover > .nav-link,
+  [class*=sidebar-dark-] .nav-sidebar > .nav-item > .nav-link:focus,
+  [class*=sidebar-dark-] .nav-sidebar > .nav-item i {
+    color: $font-color;
   }
 
   .nav-sidebar > .nav-item {
@@ -27,18 +55,27 @@
     .nav-link {
       color: $font-color;
       font-size: 1rem;
-      padding: 0.4rem 1rem;
+      padding: 0.45rem .7rem;
+      transition: all .35s ease!important;
     }
 
     .nav-link.dropdown-toggle::after {
       margin-top: 0!important;
     }
 
+    .nav-link.active i,
     .nav-link.active {
-      color: $primary;
+      color: $primary!important;
       font-weight: 600;
     }
   }
+
+  .dropdown-menu {
+    .nav-item:hover > .nav-link {
+      padding-left: 1rem;
+    }
+  }
+
   .nav.nav-pills {
     margin-bottom: 0;
   }
@@ -55,10 +92,65 @@
     animation: .8s cubic-bezier(.25,.8,.25,1) 0s normal forwards 1 fadein;
   }
 
+  [class*=sidebar-light-] {
+    background-color: transparent;
+
+    .nav-sidebar > .nav-item > .nav-treeview {
+      background: $white;
+      border-radius: .4rem;
+    }
+  }
+
+  .nav-sidebar > .nav-item > .nav-link i {
+    margin-right: 0.35rem!important;
+  }
+
+  .nav-pills .nav-link.active {
+    background-color: transparent;
+  }
+
+  .horizontal-navbar-brand {
+    margin-top: -5px;
+    display: none;
+
+    .logo-lg {
+      font-size: 1.3rem;
+    }
+  }
+}
+
+// 黑色主题
+body.dark-mode.horizontal-menu {
+  .header-navbar.navbar-shadow {
+    border-color: $body-dark-border-color;
+  }
+
   [class*=sidebar-light-] .nav-sidebar > .nav-item > .nav-treeview {
-    background: #fff;
+    background: $body-dark-color;
     border-radius: .4rem;
   }
+
+  [class*=sidebar-dark-] .nav-sidebar > .nav-item i {
+    color: $body-dark-font-color;
+  }
+
+  .main-horizontal-sidebar > div,
+  [class*=sidebar-dark-],
+  [class*=sidebar-light-] {
+    background-color: $body-dark-color;
+  }
+
+  [class*=sidebar-dark-] .nav-sidebar > .nav-item > .nav-link.active {
+    background-color: transparent;
+  }
+
+  a.nav-link.active p {
+    color: $primary!important;
+  }
+
+  [class*=sidebar-light-] .nav-sidebar > .nav-item:hover > .nav-link:not(.active) {
+    color: $white;
+  }
 }
 
 @media (min-width: 576px) {
@@ -76,4 +168,3 @@
     -webkit-box-direction: normal;
   }
 }
-

resources/assets/dcat/sass/components/_layout.scss

@@ -3,7 +3,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 }
 
 .content .content-wrapper {
-  padding: 7rem 2.5rem 0;
+  padding: 7rem $content-wrapper-padding 0;
 }
 
 .navbar-fixed-top {

resources/assets/dcat/sass/variables/_variables.scss

@@ -34,3 +34,7 @@ $menu-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
 $card-border-radius: .25rem;
 
 $input-height: 34px;
+
+$content-wrapper-padding: 2.5rem;
+
+$navbar-horizontal-top: 60px;

resources/views/partials/menu.blade.php

@@ -2,6 +2,8 @@
     $depth = $item['depth'] ?? 0;
 
     $horizontal = config('admin.layout.horizontal_menu');
+
+    $defaultIcon = config('admin.menu.default_icon', 'feather icon-circle');
 @endphp
 
 @if($builder->visible($item))
@@ -22,7 +24,7 @@
             <a href="#"
                class="nav-link {{ $builder->isActive($item) ? ($horizontal ? 'active' : '') : '' }}
                     {{ $horizontal ? 'dropdown-toggle' : '' }}">
-                {!! str_repeat('&nbsp;', $depth) !!}<i class="fa fa-fw {{ $item['icon'] ?: 'feather icon-circle' }}"></i>
+                {!! str_repeat('&nbsp;', $depth) !!}<i class="fa fa-fw {{ $item['icon'] ?: $defaultIcon }}"></i>
                 <p>
                     {{ $builder->translate($item['title']) }}
 

resources/views/partials/navbar.blade.php

@@ -18,19 +18,33 @@
             </div>
             @endif
 
-            <div class="navbar-collapse">
-                <div class="mr-auto float-left bookmark-wrapper d-flex align-items-center">
+            <div class="navbar-collapse d-flex justify-content-between">
+                <div class="d-flex align-items-center">
                     {!! Dcat\Admin\Admin::navbar()->render('left') !!}
                 </div>
-                <div class="float-right d-flex align-items-center">
-                    {!! Dcat\Admin\Admin::navbar()->render() !!}
+
+                @if($configData['horizontal_menu'])
+                <div class="d-md-block horizontal-navbar-brand">
+                    <ul class="nav navbar-nav flex-row">
+                        <li class="nav-item mr-auto">
+                            <a href="{{ admin_url('/') }}" class="waves-effect waves-light">
+                                <span class="logo-lg">{!! config('admin.logo') !!}</span>
+                            </a>
+                        </li>
+                    </ul>
                 </div>
-                <ul class="nav navbar-nav float-right">
-                    {{--User Account Menu--}}
-                    {!! admin_section(Dcat\Admin\Admin::SECTION['NAVBAR_USER_PANEL']) !!}
+                @endif
 
-                    {!! admin_section(Dcat\Admin\Admin::SECTION['NAVBAR_AFTER_USER_PANEL']) !!}
-                </ul>
+                <div class=" d-flex align-items-center">
+                    {!! Dcat\Admin\Admin::navbar()->render() !!}
+
+                    <ul class="nav navbar-nav">
+                        {{--User Account Menu--}}
+                        {!! admin_section(Dcat\Admin\Admin::SECTION['NAVBAR_USER_PANEL']) !!}
+
+                        {!! admin_section(Dcat\Admin\Admin::SECTION['NAVBAR_AFTER_USER_PANEL']) !!}
+                    </ul>
+                </div>
             </div>
         </div>
     </div>

resources/views/partials/sidebar.blade.php

@@ -1,6 +1,6 @@
 <div class="{{ $configData['horizontal_menu'] ? 'header-navbar navbar-expand-sm navbar navbar-horizontal' : 'main-menu' }}">
     <div class="main-menu-content">
-        <aside class="{{ $configData['horizontal_menu'] ? 'main-horizontal-sidebar' : 'main-sidebar' }} {{ $configData['sidebar_style'] }} shadow">
+        <aside class="{{ $configData['horizontal_menu'] ? 'main-horizontal-sidebar' : 'main-sidebar shadow' }} {{ $configData['sidebar_style'] }}">
 
             @if(! $configData['horizontal_menu'])
             <div class="navbar-header">
@@ -16,8 +16,7 @@
             @endif
 
             <div class="p-0 {{ $configData['horizontal_menu'] ? 'pl-1 pr-1' : 'sidebar pb-3' }}">
-                <ul
-                    class="nav nav-pills nav-sidebar {{ $configData['horizontal_menu'] ? '' : 'flex-column' }}"
+                <ul class="nav nav-pills nav-sidebar {{ $configData['horizontal_menu'] ? '' : 'flex-column' }}"
                     {!! $configData['horizontal_menu'] ? '' : 'data-widget="treeview"' !!}
                      style="padding-top: 10px">
                     {!! admin_section(Dcat\Admin\Admin::SECTION['LEFT_SIDEBAR_MENU_TOP']) !!}
@@ -29,13 +28,4 @@
             </div>
         </aside>
     </div>
-</div>
-
-<script>
-    $('.horizontal-menu .main-menu-content li.nav-item').on('mouseover', function () {
-        console.log(13, $(this));
-        $(this).addClass('open')
-    }).on('mouseout', function () {
-        $(this).removeClass('open')
-    })
-</script>
+</div>

src/Admin.php

@@ -23,7 +23,6 @@ use Illuminate\Database\Eloquent\Model;
 use Illuminate\Http\Exceptions\HttpResponseException;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Event;
-use Illuminate\Support\Str;
 use Symfony\Component\HttpFoundation\Response;
 
 class Admin
@@ -31,7 +30,7 @@ class Admin
     use HasAssets;
     use HasHtml;
 
-    const VERSION = '2.0.17-beta';
+    const VERSION = '2.0.18-beta';
 
     const SECTION = [
         // 往 <head> 标签内输入内容

src/Console/stubs/config.stub

@@ -208,6 +208,7 @@ return [
         // Whether enable menu bind to a permission.
         'bind_permission' => true,
 
+		'default_icon' => 'feather icon-circle',
     ],
 
     /*
@@ -281,8 +282,11 @@ return [
         // default, blue, blue-light, green
         'color' => 'default',
 
+		// sidebar-separate
         'body_class' => [],
 
+        'horizontal_menu' => false,
+
         'sidebar_collapsed' => false,
 
         // light, primary, dark

src/Layout/Content.php

@@ -7,7 +7,6 @@ use Dcat\Admin\Admin;
 use Dcat\Admin\Exception\RuntimeException;
 use Dcat\Admin\Traits\HasBuilderEvents;
 use Illuminate\Contracts\Support\Renderable;
-use Illuminate\Support\Str;
 use Illuminate\Support\Traits\Macroable;
 use Illuminate\Support\ViewErrorBag;
 
@@ -493,7 +492,6 @@ class Content implements Renderable
         }
 
         if ($data['horizontal_menu']) {
-            $data['body_class'][] = 'horizontal-layout';
             $data['body_class'][] = 'horizontal-menu';
         }
 

src/Widgets/DarkModeSwitcher.php

@@ -4,7 +4,6 @@ namespace Dcat\Admin\Widgets;
 
 use Dcat\Admin\Admin;
 use Illuminate\Contracts\Support\Renderable;
-use Illuminate\Support\Str;
 
 class DarkModeSwitcher implements Renderable
 {