105 lines
3.9 KiB
PHP
105 lines
3.9 KiB
PHP
<link rel="stylesheet" href="{{ asset('assets/frontend/css/app.css') }}">
|
|
|
|
<!-- Main Sidebar - Collapsible -->
|
|
<nav id="sidebar" class="col-md-2 col-lg-2 d-none d-md-block bgGradDown sidebar min-vh-100 pt-4 position-fixed">
|
|
<div class="sidebar-sticky vh-100">
|
|
<!-- Collapse button -->
|
|
<div class="d-flex justify-content-end mb-3 px-3">
|
|
<button id="sidebarCollapse" class="btn btn-transparent">
|
|
<i id="sidebarIcon" class="fas fa-arrow-left text-white"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<ul class="nav flex-column position-relative customHeight">
|
|
@include('layouts.partials.sidebar_navigators')
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<style>
|
|
/* Style for collapsed sidebar */
|
|
#sidebar.collapsed {
|
|
width: 70px;
|
|
}
|
|
|
|
#sidebar.collapsed .sidebar-text {
|
|
display: none;
|
|
}
|
|
|
|
/* Add smooth transition for collapse */
|
|
.collapse {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* Fix for dropdown menu */
|
|
.collapse:not(.show) {
|
|
display: none;
|
|
}
|
|
|
|
/* Make sure .collapse.show is explicitly displayed */
|
|
.collapse.show {
|
|
display: block !important;
|
|
}
|
|
|
|
/* Make collapse parent non-clickable on child elements */
|
|
.collapse.show a {
|
|
pointer-events: auto;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const sidebarCollapseButton = document.getElementById('sidebarCollapse');
|
|
const sidebarIcon = document.getElementById('sidebarIcon');
|
|
const sidebar = document.getElementById('sidebar');
|
|
|
|
// Handle main sidebar collapse
|
|
sidebarCollapseButton.addEventListener('click', function () {
|
|
sidebar.classList.toggle('collapsed');
|
|
if (sidebar.classList.contains('collapsed')) {
|
|
sidebarIcon.classList.remove('fa-arrow-left');
|
|
sidebarIcon.classList.add('fa-arrow-right');
|
|
} else {
|
|
sidebarIcon.classList.remove('fa-arrow-right');
|
|
sidebarIcon.classList.add('fa-arrow-left');
|
|
}
|
|
});
|
|
|
|
// Handle the dropdown icons
|
|
document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(function(collapseToggle) {
|
|
// Get the target collapse element ID
|
|
const targetId = collapseToggle.getAttribute('href');
|
|
const targetElement = document.querySelector(targetId);
|
|
const iconElement = collapseToggle.querySelector('.fa-chevron-down');
|
|
|
|
if (iconElement && targetElement) {
|
|
// Create a MutationObserver to watch for changes to the collapse element
|
|
const observer = new MutationObserver(function(mutations) {
|
|
mutations.forEach(function(mutation) {
|
|
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
|
|
// Check if the collapse is shown
|
|
if (targetElement.classList.contains('show')) {
|
|
iconElement.classList.remove('fa-chevron-down');
|
|
iconElement.classList.add('fa-chevron-up');
|
|
} else {
|
|
iconElement.classList.remove('fa-chevron-up');
|
|
iconElement.classList.add('fa-chevron-down');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Start observing the target element
|
|
observer.observe(targetElement, {
|
|
attributes: true
|
|
});
|
|
|
|
// Handle initial click on the toggle
|
|
collapseToggle.addEventListener('click', function(e) {
|
|
// This is just for the initial click if needed
|
|
// Bootstrap will handle the actual collapsing
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script> |