fix sidebar hover on collapsed
This commit is contained in:
arifal
@@ -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,6 +48,54 @@
|
||||
</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
|
||||
@@ -208,4 +104,4 @@
|
||||
// Submit form logout Laravel
|
||||
document.getElementById('logout-form').submit();
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
Reference in New Issue
Block a user