sidebar bugs fixed

.gitignore

@@ -1 +1,2 @@
-/node_modules
+/node_modules
+.github

index.html

@@ -32,15 +32,13 @@
 
           <li class="nav-item">
             <a class="nav-link" href="#">
-              <span class="icon" data-bs-toggle="tooltip" data-bs-title="Dashboard"><i
-                  class="fas fa-dashboard"></i></span>
+              <span class="icon" data-bs-toggle="tooltip" data-bs-title="Dashboard"><i class="fas fa-dashboard"></i></span>
               <span class="menu">Dashboard</span>
             </a>
           </li>
 
           <!-- drodown menu start -->
-          <li class="nav-item position-relative" data-bs-toggle="collapse" href="#masterCollapse" role="button"
-            aria-expanded="false" aria-controls="masterCollapse">
+          <li class="nav-item position-relative" data-bs-toggle="collapse" href="#masterCollapse" role="button" aria-expanded="false" aria-controls="masterCollapse">
             <a class="nav-link" href="#">
               <span class="icon" data-bs-toggle="tooltip" data-bs-title="Master">
                 <i class="fas fa-cubes"></i>
@@ -108,17 +106,15 @@
 
             <div class="ms-auto d-flex align-items-center">
 
-              <div class="nav-item d-none d-md-block me-2" data-bs-toggle="tooltip" data-bs-title="Full Screen"
-                data-bs-placement="left">
+              <div class="nav-item d-none d-md-block me-2" data-bs-toggle="tooltip" data-bs-title="Full Screen" data-bs-placement="left">
                 <a href="#" class="nav-link" id="fullscreen">
                   <i class="fa-solid fa-expand"></i>
                 </a>
               </div>
 
               <div class="dropdown">
 
-                <a class="nav-link dropdown-toggle py-1 px-3 rounded-1" href="#" role="button" data-bs-toggle="dropdown"
-                  aria-expanded="false">
+                <a class="nav-link dropdown-toggle py-1 px-3 rounded-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                   <i class="fas fa-user-circle me-1"></i>Sahil
                 </a>
 
@@ -249,8 +245,7 @@ <h4 class="text-secondary fw-bold">Charts</h4>
         <!-- main content end -->
 
         <!-- footer start -->
-        <footer
-          class="bg-light shadow text-secondary text-center d-flex flex-column flex-md-row justify-content-between p-3 p-md-4">
+        <footer class="bg-light shadow text-secondary text-center d-flex flex-column flex-md-row justify-content-between p-3 p-md-4">
           <div>Copyright &copy; 2022 <a href="https://dcodemania.com">DCodeMania</a></div>
           <div>Made with ❤️ in India</div>
         </footer>

public/js/main.js

@@ -40,5 +40,29 @@ fullscreen.onclick = function () {
   }
 }
 
+const collapseElement = document.querySelector('[data-bs-toggle="collapse"]');
+let isCollapsed = true;
+
+collapseElement.addEventListener('click', function () {
+  if (isCollapsed) {
+    this.classList.add('collapsed');
+    isCollapsed = false;
+  } else {
+    this.classList.remove('collapsed');
+    isCollapsed = true;
+  }
+});
+
+const childItems = document.querySelectorAll('#masterCollapse .nav-item');
+const parentCollapse = document.querySelector('#masterCollapse');
+
+for (let i = 0; i < childItems.length; i++) {
+  if (childItems[i].classList.contains('active')) {
+    parentCollapse.classList.add('show');
+    collapseElement.classList.add('collapsed');
+    break;
+  }
+}
+
 
 

public/scss/main.scss

@@ -125,12 +125,11 @@ canvas {
 	text-rendering: auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-	content: '\f105';
-	transform: rotate(90deg);
+	content: '\f104';
 	transition: all linear 0.25s;
 }
 [data-bs-toggle='collapse'].collapsed:after {
-	transform: rotate(0deg);
+	transform: rotate(-90deg);
 }
 
 @media (min-width: 768px) {