horizontal menu

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

@@ -10,30 +10,54 @@
     top: 0;
   }
 
-  .header-navbar.navbar-horizontal, .main-sidebar {
+  .header-navbar.navbar-horizontal,
+  .main-horizontal-sidebar {
     top: 68px;
+    left: 0;
     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;
- }
+  .nav-sidebar > .nav-item {
+    padding-bottom: .6rem;
 
-  .wrapper .sidebar {
-    height: inherit!important;
-  }
+    .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: .8rem;
+    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;
   }
 }
 

resources/views/partials/menu.blade.php

@@ -18,8 +18,10 @@
         </li>
     @else
 
-        <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"' : '' }}>
+        <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']) }}
@@ -29,13 +31,13 @@
                     @endif
                 </p>
             </a>
-            <ul class="nav nav-treeview {{ $horizontal ? 'dropdown-menu' : '' }}">
+            <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/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="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">
@@ -15,8 +15,11 @@
             </div>
             @endif
 
-            <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">
+            <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']) !!}
@@ -26,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>