Fix: sidebar options disappearing
This commit is contained in:
@@ -16,12 +16,44 @@
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</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>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
const sidebarCollapseButton = document.getElementById('sidebarCollapse');
|
const sidebarCollapseButton = document.getElementById('sidebarCollapse');
|
||||||
const sidebarIcon = document.getElementById('sidebarIcon');
|
const sidebarIcon = document.getElementById('sidebarIcon');
|
||||||
const sidebar = document.getElementById('sidebar');
|
const sidebar = document.getElementById('sidebar');
|
||||||
|
|
||||||
|
// Handle main sidebar collapse
|
||||||
sidebarCollapseButton.addEventListener('click', function () {
|
sidebarCollapseButton.addEventListener('click', function () {
|
||||||
sidebar.classList.toggle('collapsed');
|
sidebar.classList.toggle('collapsed');
|
||||||
if (sidebar.classList.contains('collapsed')) {
|
if (sidebar.classList.contains('collapsed')) {
|
||||||
@@ -32,5 +64,42 @@
|
|||||||
sidebarIcon.classList.add('fa-arrow-left');
|
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>
|
</script>
|
||||||
@@ -183,7 +183,7 @@
|
|||||||
<img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
|
<img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
|
||||||
</div>
|
</div>
|
||||||
<h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Activities Attended</h6>
|
<h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Activities Attended</h6>
|
||||||
<i class="fas fa-chevron-down ms-auto small textWhite"></i>
|
<i class="fas fa-chevron-down ms-auto small textWhite collapse-icon"></i>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="collapse" id="activitiesAttendedCollapse">
|
<div class="collapse" id="activitiesAttendedCollapse">
|
||||||
@@ -208,10 +208,10 @@
|
|||||||
<img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
|
<img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
|
||||||
</div>
|
</div>
|
||||||
<h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Activities Organised</h6>
|
<h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Activities Organised</h6>
|
||||||
<i class="fas fa-chevron-down ms-auto small textWhite"></i>
|
<i class="fas fa-chevron-down ms-auto small textWhite collapse-icon"></i>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="collapse" id="activitiesOrganisedCollapse">
|
<div class="collapse multi-collapse" id="activitiesOrganisedCollapse">
|
||||||
<div class="ps-4">
|
<div class="ps-4">
|
||||||
<a class="nav-link py-1" href="{{ route('faculty.ActivitiesOrganisedForm') }}">
|
<a class="nav-link py-1" href="{{ route('faculty.ActivitiesOrganisedForm') }}">
|
||||||
<div class="d-flex align-items-center">
|
<div class="d-flex align-items-center">
|
||||||
@@ -232,11 +232,11 @@
|
|||||||
<div class="col-2">
|
<div class="col-2">
|
||||||
<img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
|
<img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
|
||||||
</div>
|
</div>
|
||||||
<h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Iv Organised</h6>
|
<h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">IV Organised</h6>
|
||||||
<i class="fas fa-chevron-down ms-auto small textWhite"></i>
|
<i class="fas fa-chevron-down ms-auto small textWhite collapse-icon"></i>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="collapse" id="ivOrganisedCollapse">
|
<div class="collapse multi-collapse" id="ivOrganisedCollapse">
|
||||||
<div class="ps-4">
|
<div class="ps-4">
|
||||||
<a class="nav-link py-1" href="{{ route('faculty.IvOrganisedForm') }}">
|
<a class="nav-link py-1" href="{{ route('faculty.IvOrganisedForm') }}">
|
||||||
<div class="d-flex align-items-center">
|
<div class="d-flex align-items-center">
|
||||||
@@ -258,10 +258,10 @@
|
|||||||
<img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
|
<img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
|
||||||
</div>
|
</div>
|
||||||
<h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Publications</h6>
|
<h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Publications</h6>
|
||||||
<i class="fas fa-chevron-down ms-auto small textWhite"></i>
|
<i class="fas fa-chevron-down ms-auto small textWhite collapse-icon"></i>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="collapse" id="publicationsCollapse">
|
<div class="collapse multi-collapse" id="publicationsCollapse">
|
||||||
<div class="ps-4">
|
<div class="ps-4">
|
||||||
<a class="nav-link py-1" href="{{ route('faculty.PublicationsForm') }}">
|
<a class="nav-link py-1" href="{{ route('faculty.PublicationsForm') }}">
|
||||||
<div class="d-flex align-items-center">
|
<div class="d-flex align-items-center">
|
||||||
@@ -283,10 +283,10 @@
|
|||||||
<img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
|
<img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
|
||||||
</div>
|
</div>
|
||||||
<h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Books Published</h6>
|
<h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Books Published</h6>
|
||||||
<i class="fas fa-chevron-down ms-auto small textWhite"></i>
|
<i class="fas fa-chevron-down ms-auto small textWhite collapse-icon"></i>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="collapse" id="booksPublishedCollapse">
|
<div class="collapse multi-collapse" id="booksPublishedCollapse">
|
||||||
<div class="ps-4">
|
<div class="ps-4">
|
||||||
<a class="nav-link py-1" href="{{ route('faculty.BooksPublishedForm') }}">
|
<a class="nav-link py-1" href="{{ route('faculty.BooksPublishedForm') }}">
|
||||||
<div class="d-flex align-items-center">
|
<div class="d-flex align-items-center">
|
||||||
@@ -308,10 +308,10 @@
|
|||||||
<img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
|
<img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
|
||||||
</div>
|
</div>
|
||||||
<h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">External Engagement</h6>
|
<h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">External Engagement</h6>
|
||||||
<i class="fas fa-chevron-down ms-auto small textWhite"></i>
|
<i class="fas fa-chevron-down ms-auto small textWhite collapse-icon"></i>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="collapse" id="externalEngagementCollapse">
|
<div class="collapse multi-collapse" id="externalEngagementCollapse">
|
||||||
<div class="ps-4">
|
<div class="ps-4">
|
||||||
<a class="nav-link py-1" href="{{ route('faculty.ExternalEngagementForm') }}">
|
<a class="nav-link py-1" href="{{ route('faculty.ExternalEngagementForm') }}">
|
||||||
<div class="d-flex align-items-center">
|
<div class="d-flex align-items-center">
|
||||||
@@ -333,10 +333,10 @@
|
|||||||
<img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
|
<img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
|
||||||
</div>
|
</div>
|
||||||
<h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Online Courses</h6>
|
<h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Online Courses</h6>
|
||||||
<i class="fas fa-chevron-down ms-auto small textWhite"></i>
|
<i class="fas fa-chevron-down ms-auto small textWhite collapse-icon"></i>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="collapse" id="onlineCoursesCollapse">
|
<div class="collapse multi-collapse" id="onlineCoursesCollapse">
|
||||||
<div class="ps-4">
|
<div class="ps-4">
|
||||||
<a class="nav-link py-1" href="{{ route('faculty.OnlineCoursesForm') }}">
|
<a class="nav-link py-1" href="{{ route('faculty.OnlineCoursesForm') }}">
|
||||||
<div class="d-flex align-items-center">
|
<div class="d-flex align-items-center">
|
||||||
@@ -358,10 +358,10 @@
|
|||||||
<img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
|
<img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
|
||||||
</div>
|
</div>
|
||||||
<h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Patents/Copyrights</h6>
|
<h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Patents/Copyrights</h6>
|
||||||
<i class="fas fa-chevron-down ms-auto small textWhite"></i>
|
<i class="fas fa-chevron-down ms-auto small textWhite collapse-icon"></i>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="collapse" id="patentsCollapse">
|
<div class="collapse multi-collapse" id="patentsCollapse">
|
||||||
<div class="ps-4">
|
<div class="ps-4">
|
||||||
<a class="nav-link py-1" href="{{ route('faculty.PatentsForm') }}">
|
<a class="nav-link py-1" href="{{ route('faculty.PatentsForm') }}">
|
||||||
<div class="d-flex align-items-center">
|
<div class="d-flex align-items-center">
|
||||||
@@ -376,7 +376,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<!-- Add other faculty links here -->
|
|
||||||
@endif
|
@endif
|
||||||
<li class="nav-item mt-auto mb-5">
|
<li class="nav-item mt-auto mb-5">
|
||||||
<form method="POST" action="{{ route('logout') }}" class="nav-link py-1">
|
<form method="POST" action="{{ route('logout') }}" class="nav-link py-1">
|
||||||
|
|||||||
Reference in New Issue
Block a user