133 lines
5.3 KiB
PHP
133 lines
5.3 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>
|
||
/* 1 – make the bar skinny when you click the arrow */
|
||
#sidebar.collapsed { width: 70px; }
|
||
|
||
/* 2 – hide ALL text while it’s skinny … */
|
||
#sidebar.collapsed .sidebar-text { display: none; }
|
||
|
||
/* 3 – …except the text that lives in the OPEN dropdown panel */
|
||
#sidebar.collapsed .collapse.show .sidebar-text {
|
||
display: block !important; /* <-- the magic switch-back-on line */
|
||
}
|
||
|
||
|
||
|
||
/* Add smooth transition for collapse */
|
||
.collapse {
|
||
transition: height 0.3s ease;
|
||
}
|
||
|
||
|
||
|
||
/* Make collapse parent non-clickable on child elements */
|
||
.collapse.show a {
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* …your existing rules… */
|
||
|
||
/* ← NEW override: when the panel is open, actually show it */
|
||
.collapse.show {
|
||
visibility: visible !important;
|
||
}
|
||
|
||
|
||
</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('.dropdown-arrow');
|
||
|
||
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');
|
||
}
|
||
const isOpen = targetElement.classList.contains('show');
|
||
iconElement.classList.toggle('fa-chevron-down', !isOpen);
|
||
iconElement.classList.toggle('fa-chevron-up', isOpen);
|
||
}
|
||
});
|
||
});
|
||
|
||
// Start observing the target elementl
|
||
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
|
||
});
|
||
}
|
||
});
|
||
/* ─── EIBS: allow only one open panel ─── */
|
||
const allCollapses = document.querySelectorAll('.collapse');
|
||
|
||
allCollapses.forEach(function (panel) {
|
||
/* When any panel STARTS to open… */
|
||
panel.addEventListener('show.bs.collapse', function () {
|
||
|
||
/* …loop through every other panel… */
|
||
allCollapses.forEach(function (openPanel) {
|
||
if (openPanel !== panel && openPanel.classList.contains('show')) {
|
||
/* …and close it. */
|
||
/* If Bootstrap already has an instance → use it, otherwise create one on the fly */
|
||
(bootstrap.Collapse.getInstance(openPanel) ||
|
||
new bootstrap.Collapse(openPanel))
|
||
.hide();
|
||
}
|
||
});
|
||
});
|
||
});
|
||
});
|
||
</script>
|