horizontal menu

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

@@ -0,0 +1,55 @@
+
+.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-sidebar {
+    top: 68px;
+    position: fixed;
+    width: 100%;
+    //z-index: 99!important;
+    height: inherit;
+    min-height: auto;
+    bottom: inherit;
+  }
+
+ .header-navbar .main-menu-content {
+   padding-left: 1.5rem!important;
+   padding-right: 1.3rem!important;
+   transition: .3s ease all;
+   background: inherit;
+   margin-left: 0;
+ }
+
+  .wrapper .sidebar {
+    height: inherit!important;
+  }
+
+  .nav.nav-pills {
+    margin-bottom: .8rem;
+  }
+}
+
+@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,19 +17,19 @@
             </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 menu-open' : '' }} nav-item has-treeview {{ $builder->isActive($item) ? 'menu-open' : '' }}">
+            <a href="#" class="nav-link {{ $horizontal ? 'dropdown-toggle' : '' }}" {{ $horizontal ? 'data-toggle="dropdown"' : '' }}>
                 {!! 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 nav-treeview {{ $horizontal ? 'dropdown-menu' : '' }}">
                 @foreach($item['children'] as $item)
                     @php
                         $item['depth'] = $depth + 1;

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">
+
+            @if(! $configData['horizontal_menu'])
             <div class="navbar-header">
                 <ul class="nav navbar-nav flex-row">
                     <li class="nav-item mr-auto">
@@ -11,9 +13,10 @@
                     </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'] ? '' : 'sidebar pb-3' }}">
+                <ul class="nav nav-pills nav-sidebar {{ $configData['horizontal_menu'] ? '' : 'flex-column' }}" 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']) !!}

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'],
         ];
     }