Merge branch 'horizontal' into github

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

@@ -0,0 +1,79 @@
+
+.horizontal-menu {
+  .content-wrapper, .main-footer, .main-header {
+    margin-left: 0!important;
+  }
+
+  .header-navbar {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+  }
+
+  .header-navbar.navbar-horizontal,
+  .main-horizontal-sidebar {
+    top: 68px;
+    left: 0;
+    position: fixed;
+    width: 100%;
+    height: inherit;
+    min-height: auto;
+    bottom: inherit;
+  }
+
+  .nav-sidebar > .nav-item {
+    padding-bottom: .6rem;
+
+    .nav-link {
+      color: $font-color;
+      font-size: 1rem;
+      padding: 0.4rem 1rem;
+    }
+
+    .nav-link.dropdown-toggle::after {
+      margin-top: 0!important;
+    }
+
+    .nav-link.active {
+      color: $primary;
+      font-weight: 600;
+    }
+  }
+  .nav.nav-pills {
+    margin-bottom: 0;
+  }
+
+  .nav.dropdown-menu {
+    display: none;
+    margin-top: -.2rem;
+    min-width: 200px;
+  }
+
+  .open > .nav.dropdown-menu {
+    display: block;
+    -webkit-animation: .8s cubic-bezier(.25,.8,.25,1) 0s normal forwards 1 fadein;
+    animation: .8s cubic-bezier(.25,.8,.25,1) 0s normal forwards 1 fadein;
+  }
+
+  [class*=sidebar-light-] .nav-sidebar > .nav-item > .nav-treeview {
+    background: #fff;
+    border-radius: .4rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .navbar-expand-sm {
+    -webkit-flex-flow: row nowrap;
+    -ms-flex-flow: row nowrap;
+    flex-flow: row nowrap;
+    -webkit-box-pack: start;
+    -webkit-justify-content: flex-start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+  }
+  .navbar-expand-sm, .navbar-expand-sm .navbar-nav {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+  }
+}
+

resources/assets/dcat/sass/dcat-app.scss

@@ -96,6 +96,7 @@ li {
 @import "./components/tab";
 // menu
 @import "./components/menu";
+@import "./components/horizontal-menu";
 // alert
 @import "./components/alert";
 // code

resources/views/partials/menu.blade.php

@@ -1,13 +1,15 @@
 @php
-    $active = $builder->isActive($item);
-
     $depth = $item['depth'] ?? 0;
+
+    $horizontal = config('admin.layout.horizontal_menu');
 @endphp
 
 @if($builder->visible($item))
     @if(empty($item['children']))
         <li class="nav-item">
-            <a @if(mb_strpos($item['uri'], '://') !== false) target="_blank" @endif href="{{ $builder->getUrl($item['uri']) }}" class="nav-link {!! $builder->isActive($item) ? 'active' : '' !!}">
+            <a @if(mb_strpos($item['uri'], '://') !== false) target="_blank" @endif
+               href="{{ $builder->getUrl($item['uri']) }}"
+               class="nav-link {!! $builder->isActive($item) ? 'active' : '' !!}">
                 {!! str_repeat('&nbsp;', $depth) !!}<i class="fa fa-fw {{ $item['icon'] ?: 'feather icon-circle' }}"></i>
                 <p>
                     {{ $builder->translate($item['title']) }}
@@ -15,25 +17,27 @@
             </a>
         </li>
     @else
-        @php
-            $active = $builder->isActive($item);
-        @endphp
 
-        <li class="nav-item has-treeview {{ $active ? 'menu-open' : '' }}">
-            <a href="#" class="nav-link">
+        <li class="{{ $horizontal ? 'dropdown' : 'has-treeview' }} {{ $depth > 0 ? 'dropdown-submenu' : '' }} nav-item {{ $builder->isActive($item) ? 'menu-open' : '' }}">
+            <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>
                 <p>
                     {{ $builder->translate($item['title']) }}
-                    <i class="right fa fa-angle-left"></i>
+
+                    @if(! $horizontal)
+                        <i class="right fa fa-angle-left"></i>
+                    @endif
                 </p>
             </a>
-            <ul class="nav nav-treeview">
+            <ul class="nav {{ $horizontal ? 'dropdown-menu' : 'nav-treeview' }}">
                 @foreach($item['children'] as $item)
                     @php
                         $item['depth'] = $depth + 1;
                     @endphp
 
-                    @include('admin::partials.menu', $item)
+                    @include('admin::partials.menu', ['item' => $item])
                 @endforeach
             </ul>
         </li>

resources/views/partials/navbar.blade.php

@@ -6,6 +6,7 @@
 
     <div class="navbar-wrapper">
         <div class="navbar-container content">
+            @if(! $configData['horizontal_menu'])
             <div class="mr-auto float-left bookmark-wrapper d-flex align-items-center">
                 <ul class="nav navbar-nav">
                     <li class="nav-item mr-auto">
@@ -15,6 +16,7 @@
                     </li>
                 </ul>
             </div>
+            @endif
 
             <div class="navbar-collapse">
                 <div class="mr-auto float-left bookmark-wrapper d-flex align-items-center">
@@ -46,8 +48,4 @@ results found.</span></div>
         </a>
     </li>
 </ul>
-<script>
-    $('.menu-toggle').on('click', function () {
-        $(this).find('i').toggleClass('icon-circle icon-disc')
-    })
-</script>
+

resources/views/partials/sidebar.blade.php

@@ -1,6 +1,8 @@
-<div class="main-menu">
+<div class="{{ $configData['horizontal_menu'] ? 'header-navbar navbar-expand-sm navbar navbar-horizontal' : 'main-menu' }}">
     <div class="main-menu-content">
-        <aside class="main-sidebar {{ $configData['sidebar_style'] }} shadow">
+        <aside class="{{ $configData['horizontal_menu'] ? 'main-horizontal-sidebar' : 'main-sidebar' }} {{ $configData['sidebar_style'] }} shadow">
+
+            @if(! $configData['horizontal_menu'])
             <div class="navbar-header">
                 <ul class="nav navbar-nav flex-row">
                     <li class="nav-item mr-auto">
@@ -11,9 +13,13 @@
                     </li>
                 </ul>
             </div>
+            @endif
 
-            <div class="sidebar p-0 pb-3">
-                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" style="padding-top: 10px">
+            <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' }}"
+                    {!! $configData['horizontal_menu'] ? '' : 'data-widget="treeview"' !!}
+                     style="padding-top: 10px">
                     {!! admin_section(Dcat\Admin\Admin::SECTION['LEFT_SIDEBAR_MENU_TOP']) !!}
 
                     {!! admin_section(Dcat\Admin\Admin::SECTION['LEFT_SIDEBAR_MENU']) !!}
@@ -23,4 +29,13 @@
             </div>
         </aside>
     </div>
-</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>

src/Layout/Content.php

@@ -438,6 +438,7 @@ class Content implements Renderable
             'navbar_class'      => 'sticky',
             'footer_type'       => '',
             'body_class'        => [],
+            'horizontal_menu'   => false,
         ];
 
         $data = array_merge(
@@ -445,11 +446,6 @@ class Content implements Renderable
             $this->config
         );
 
-        // 1.0 版本兼容 sidebar_dark 参数
-        if (empty($data['sidebar_style']) && ! empty($data['sidebar_dark'])) {
-            $data['sidebar_style'] = 'sidebar-dark-white';
-        }
-
         $allOptions = [
             'theme'             => '',
             'footer_type'       => '',
@@ -458,6 +454,7 @@ class Content implements Renderable
             'sidebar_collapsed' => [],
             'navbar_color'      => [],
             'navbar_class'      => ['floating' => 'floating-nav', 'sticky' => 'fixed-top', 'hidden' => 'd-none'],
+            'horizontal_menu'   => [],
         ];
 
         $maps = [
@@ -495,6 +492,11 @@ class Content implements Renderable
             $data['sidebar_style'] = 'sidebar-dark-white';
         }
 
+        if ($data['horizontal_menu']) {
+            $data['body_class'][] = 'horizontal-layout';
+            $data['body_class'][] = 'horizontal-menu';
+        }
+
         return [
             'theme'             => $data['theme'],
             'sidebar_collapsed' => $data['sidebar_collapsed'],
@@ -503,6 +505,7 @@ class Content implements Renderable
             'sidebar_class'     => $data['sidebar_collapsed'] ? 'sidebar-collapse' : '',
             'body_class'        => implode(' ', $data['body_class']),
             'sidebar_style'     => $data['sidebar_style'],
+            'horizontal_menu'   => $data['horizontal_menu'],
         ];
     }