your meaningful message here

This commit is contained in:
Harshil Vora
2025-06-12 00:31:45 -07:00
parent e0010a6929
commit 6b2ccc501c
4 changed files with 409 additions and 257 deletions

View File

@@ -17,34 +17,39 @@
</nav>
<style>
/* Style for collapsed sidebar */
#sidebar.collapsed {
width: 70px;
}
#sidebar.collapsed .sidebar-text {
display: none;
}
/* 1 make the bar skinny when you click the arrow */
#sidebar.collapsed { width: 70px; }
/* 2 hide ALL text while its 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: all 0.3s ease;
transition: height 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;
}
/* …your existing rules… */
/* ← NEW override: when the panel is open, actually show it */
.collapse.show {
visibility: visible !important;
}
</style>
<script>
@@ -70,7 +75,7 @@
// Get the target collapse element ID
const targetId = collapseToggle.getAttribute('href');
const targetElement = document.querySelector(targetId);
const iconElement = collapseToggle.querySelector('.fa-chevron-down');
const iconElement = collapseToggle.querySelector('.dropdown-arrow');
if (iconElement && targetElement) {
// Create a MutationObserver to watch for changes to the collapse element
@@ -85,11 +90,14 @@
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 element
// Start observing the target elementl
observer.observe(targetElement, {
attributes: true
});

View File

@@ -193,7 +193,7 @@
<i class="fas fa-calendar-check text-white"></i>
</div>
<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 collapse-icon"></i>
<i class="fas fa-chevron-down ms-auto small textWhite dropdown-arrow"></i>
</div>
</a>
<div class="collapse" id="activitiesAttendedCollapse">
@@ -218,7 +218,7 @@
<i class="fas fa-calendar-alt text-white"></i>
</div>
<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 collapse-icon"></i>
<i class="fas fa-chevron-down ms-auto small textWhite dropdown-arrow"></i>
</div>
</a>
<div class="collapse multi-collapse" id="activitiesOrganisedCollapse">
@@ -243,7 +243,7 @@
<i class="fas fa-industry text-white"></i>
</div>
<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 collapse-icon"></i>
<i class="fas fa-chevron-down ms-auto small textWhite dropdown-arrow"></i>
</div>
</a>
<div class="collapse multi-collapse" id="ivOrganisedCollapse">
@@ -268,7 +268,7 @@
<i class="fas fa-book text-white"></i>
</div>
<h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Publications</h6>
<i class="fas fa-chevron-down ms-auto small textWhite collapse-icon"></i>
<i class="fas fa-chevron-down ms-auto small textWhite dropdown-arrow"></i>
</div>
</a>
<div class="collapse multi-collapse" id="publicationsCollapse">
@@ -293,7 +293,7 @@
<i class="fas fa-book-open text-white"></i>
</div>
<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 collapse-icon"></i>
<i class="fas fa-chevron-down ms-auto small textWhite dropdown-arrow"></i>
</div>
</a>
<div class="collapse multi-collapse" id="booksPublishedCollapse">
@@ -318,7 +318,7 @@
<i class="fas fa-handshake text-white"></i>
</div>
<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 collapse-icon"></i>
<i class="fas fa-chevron-down ms-auto small textWhite dropdown-arrow"></i>
</div>
</a>
<div class="collapse multi-collapse" id="externalEngagementCollapse">
@@ -343,7 +343,7 @@
<i class="fas fa-laptop-code text-white"></i>
</div>
<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 collapse-icon"></i>
<i class="fas fa-chevron-down ms-auto small textWhite dropdown-arrow"></i>
</div>
</a>
<div class="collapse multi-collapse" id="onlineCoursesCollapse">
@@ -368,7 +368,7 @@
<i class="fas fa-file-alt text-white"></i>
</div>
<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 collapse-icon"></i>
<i class="fas fa-chevron-down ms-auto small textWhite dropdown-arrow"></i>
</div>
</a>
<div class="collapse multi-collapse" id="patentsCollapse">