From aa34fff979d69a9987202d07f7ae7ac537555a85 Mon Sep 17 00:00:00 2001
From: arifal <arifalhidayat10@gmail.com>
Date: Fri, 12 Sep 2025 14:14:32 +0700
Subject: [PATCH] fix sidebar hover on collapsed

---
 .../views/layouts/partials/topbar.blade.php   | 204 +++++-------------
 1 file changed, 50 insertions(+), 154 deletions(-)

diff --git a/resources/views/layouts/partials/topbar.blade.php b/resources/views/layouts/partials/topbar.blade.php
index 3001cd0..e272afe 100644
--- a/resources/views/layouts/partials/topbar.blade.php
+++ b/resources/views/layouts/partials/topbar.blade.php
@@ -9,27 +9,9 @@
                                    class="fs-24 align-middle"></iconify-icon>
                          </button>
                     </div>
-
-                    <!-- App Search-->
-                    <!-- <form class="app-search d-none d-md-block me-auto">
-                         <div class="position-relative">
-                              <input type="search" class="form-control" placeholder="admin,widgets..."
-                                   autocomplete="off" value="">
-                              <iconify-icon icon="solar:magnifer-outline" class="search-widget-icon"></iconify-icon>
-                         </div>
-                    </form> -->
                </div>
 
                <div class="d-flex align-items-center gap-2">
-                    <!-- Theme Color (Light/Dark) -->
-                    {{-- <div class="topbar-item">
-                         <button type="button" class="topbar-button" id="light-dark-mode">
-                              <iconify-icon icon="solar:moon-outline"
-                                   class="fs-22 align-middle light-mode"></iconify-icon>
-                              <iconify-icon icon="solar:sun-2-outline"
-                                   class="fs-22 align-middle dark-mode"></iconify-icon>
-                         </button>
-                    </div> --}}
 
                     <div class="topbar-item">
                          <a href="{{ route('chatbot.index') }}" class="topbar-button">
@@ -37,118 +19,6 @@
                          </a>
                      </div>
 
-                    <!-- Notification -->
-                    {{-- <div class="dropdown topbar-item">
-                         <button type="button" class="topbar-button position-relative"
-                              id="page-header-notifications-dropdown" data-bs-toggle="dropdown" aria-haspopup="true"
-                              aria-expanded="false">
-                              <iconify-icon icon="solar:bell-bing-outline" class="fs-22 align-middle"></iconify-icon>
-                              <span
-                                   class="position-absolute topbar-badge fs-10 translate-middle badge bg-danger rounded-pill">5<span
-                                        class="visually-hidden">unread messages</span></span>
-                         </button>
-                         <div class="dropdown-menu py-0 dropdown-lg dropdown-menu-end"
-                              aria-labelledby="page-header-notifications-dropdown">
-                              <div class="p-2 border-bottom bg-light bg-opacity-50">
-                                   <div class="row align-items-center">
-                                        <div class="col">
-                                             <h6 class="m-0 fs-16 fw-semibold"> Notifications (5)</h6>
-                                        </div>
-                                        <div class="col-auto">
-                                             <a href="javascript: void(0);" class="text-dark text-decoration-underline">
-                                                  <small>Clear All</small>
-                                             </a>
-                                        </div>
-                                   </div>
-                              </div>
-                              <div data-simplebar style="max-height: 250px;">
-                                   <!-- Item -->
-                                   <a href="javascript:void(0);" class="dropdown-item p-2 border-bottom text-wrap">
-                                        <div class="d-flex">
-                                             <div class="flex-shrink-0">
-                                                  <img src="/images/users/avatar-1.jpg"
-                                                       class="img-fluid me-2 avatar-sm rounded-circle" alt="avatar-1" />
-                                             </div>
-                                             <div class="flex-grow-1">
-                                                  <p class="mb-0"><span class="fw-medium">Sally Bieber </span>started
-                                                       following you. Check out their profile!"</span></p>
-                                             </div>
-                                        </div>
-                                   </a>
-                                   <!-- Item -->
-                                   <a href="javascript:void(0);" class="dropdown-item p-2 border-bottom">
-                                        <div class="d-flex">
-                                             <div class="flex-shrink-0">
-                                                  <div class="avatar-sm me-2">
-                                                       <span
-                                                            class="avatar-title text-bg-info fw-semibold fs-20 rounded-circle">
-                                                            G
-                                                       </span>
-                                                  </div>
-                                             </div>
-                                             <div class="flex-grow-1">
-                                                  <p class="mb-0 fw-medium">Gloria Chambers</p>
-                                                  <p class="mb-0 text-wrap">
-                                                       mentioned you in a comment: '@admin, check this out!
-                                                  </p>
-                                             </div>
-                                        </div>
-                                   </a>
-                                   <!-- Item -->
-                                   <a href="javascript:void(0);" class="dropdown-item p-2 border-bottom">
-                                        <div class="d-flex">
-                                             <div class="flex-shrink-0">
-                                                  <img src="/images/users/avatar-3.jpg"
-                                                       class="img-fluid me-2 avatar-sm rounded-circle" alt="avatar-3" />
-                                             </div>
-                                             <div class="flex-grow-1">
-                                                  <p class="mb-0 fw-medium">Jacob Gines</p>
-                                                  <p class="mb-0 text-wrap">
-                                                       Answered to your comment on the cash flow forecast's graph 🔔.
-                                                  </p>
-                                             </div>
-                                        </div>
-                                   </a>
-                                   <!-- Item -->
-                                   <a href="javascript:void(0);" class="dropdown-item p-2 border-bottom">
-                                        <div class="d-flex">
-                                             <div class="flex-shrink-0">
-                                                  <div class="avatar-sm me-2">
-                                                       <span
-                                                            class="avatar-title bg-soft-warning text-warning fs-20 rounded-circle">
-                                                            <iconify-icon icon="solar:leaf-outline"></iconify-icon>
-                                                       </span>
-                                                  </div>
-                                             </div>
-                                             <div class="flex-grow-1">
-                                                  <p class="mb-0 fw-medium text-wrap">A new system update is available.
-                                                       Update now for the latest features.</p>
-                                             </div>
-                                        </div>
-                                   </a>
-                                   <!-- Item -->
-                                   <a href="javascript:void(0);" class="dropdown-item p-2 border-bottom">
-                                        <div class="d-flex">
-                                             <div class="flex-shrink-0">
-                                                  <img src="/images/users/avatar-5.jpg"
-                                                       class="img-fluid me-2 avatar-sm rounded-circle" alt="avatar-5" />
-                                             </div>
-                                             <div class="flex-grow-1">
-                                                  <p class="mb-0 fw-medium">Shawn Bunch</p>
-                                                  <p class="mb-0 text-wrap">
-                                                       commented on your post: 'Great photo!
-                                                  </p>
-                                             </div>
-                                        </div>
-                                   </a>
-                              </div>
-                              <div class="text-center p-2">
-                                   <a href="javascript:void(0);" class="btn btn-primary btn-sm">View All Notification <i
-                                             class="bx bx-right-arrow-alt ms-1"></i></a>
-                              </div>
-                         </div>
-                    </div> --}}
-
                     <!-- User -->
                     <div class="dropdown topbar-item">
                          <a type="button" class="topbar-button" id="page-header-user-dropdown" data-bs-toggle="dropdown"
@@ -162,28 +32,6 @@
                               <!-- item-->
                               <h6 class="dropdown-header">{{ Auth::user()->email }}</h6>
 
-                              <!-- <a class="dropdown-item" href="#">
-                                   <iconify-icon icon="solar:user-outline"
-                                        class="align-middle me-2 fs-18"></iconify-icon><span class="align-middle">My
-                                        Account</span>
-                              </a>
-
-                              <a class="dropdown-item" href="#">
-                                   <iconify-icon icon="solar:wallet-outline"
-                                        class="align-middle me-2 fs-18"></iconify-icon><span
-                                        class="align-middle">Pricing</span>
-                              </a>
-                              <a class="dropdown-item" href="#">
-                                   <iconify-icon icon="solar:help-outline"
-                                        class="align-middle me-2 fs-18"></iconify-icon><span
-                                        class="align-middle">Help</span>
-                              </a>
-                              <a class="dropdown-item" href="auth-{{ route ('dashboard.home') }}">
-                                   <iconify-icon icon="solar:lock-keyhole-outline"
-                                        class="align-middle me-2 fs-18"></iconify-icon><span class="align-middle">Lock
-                                        screen</span>
-                              </a> -->
-
                               <div class="dropdown-divider my-1"></div>
 
                               <form id="logout-form" action="{{route('logout')}}" method="POST" style="display: none;">
@@ -200,12 +48,60 @@
           </div>
      </div>
 </header>
+<style>
+     /* Tampilkan hover submenu HANYA saat sidebar collapsed (berbagai kemungkinan class) */
+     body.sidebar-collapsed .app-sidebar .navbar-nav > li.nav-item.has-children:hover > .collapse,
+     .app-sidebar.collapsed .navbar-nav > li.nav-item.has-children:hover > .collapse,
+     .app-sidebar.mini .navbar-nav > li.nav-item.has-children:hover > .collapse {
+          display: block !important;
+          position: absolute;
+          top: 0;
+          left: calc(100% + 8px);
+          background: #ffffff;
+          border-radius: 8px;
+          box-shadow: 0 8px 20px rgba(0,0,0,0.08);
+          padding: 6px 6px;
+          min-width: 260px;
+          width: clamp(260px, 40vw, 380px); /* responsive, bounded width */
+          box-sizing: border-box;
+          overflow: hidden; /* clip inner overflow to maintain box */
+          z-index: 3;
+     }
+
+     .app-sidebar .sub-navbar-nav {
+          width: 100%;
+          max-width: 100%; /* pastikan nggak lebih besar dari box */
+     }
+
+     .app-sidebar .sub-navbar-nav .nav-link,
+     .app-sidebar .sub-navbar-nav .nav-link .nav-text {
+     display: block !important;
+     width: 100% !important;
+     max-width: 100% !important;
+     white-space: normal !important;
+     word-break: break-word !important;
+     overflow-wrap: break-word !important;
+     }
+
+     .app-sidebar .sub-navbar-nav .nav-link:hover {
+          background: #f1fbf5;
+          color: #146c43;
+     }
+
+     .app-sidebar .sub-navbar-nav .nav-link .nav-text {
+          display: inline !important;
+          visibility: visible !important;
+          opacity: 1 !important;
+     }
+
+     /* Do not force-hide parent nav-text in any state */
+</style>
 <script>
      function logoutUser() {
          // Hapus token dari localStorage
          localStorage.removeItem('token');
- 
+
          // Submit form logout Laravel
          document.getElementById('logout-form').submit();
      }
- </script>
\ No newline at end of file
+</script>
\ No newline at end of file