replace nav script with CSS

_includes/sidebar.html

@@ -126,18 +126,23 @@
 
 .submenu {
     display: none;
- /*   padding: 0.5rem 0 0.5rem 0.5rem;*/
+    padding: 0.5rem 0 0.5rem 0.5rem;
     list-style: none;
-    margin: 0.5rem 0;
+    margin: 0;
+    opacity: 0;
+    transform: translateY(-10px);
+    transition: opacity 0.3s ease, transform 0.3s ease;
 }
 
 .submenu .nav-item {
-    margin-bottom: 0.25rem;
+    margin-bottom: 0.5rem;
+    padding-left: 0.75rem;
 }
 
 .submenu .nav-link {
-    padding: 0.375rem 0.75rem;
+    padding: 0.5rem 0.75rem;
     font-size: 0.9rem;
+    transition: all 0.2s ease;
 }
 
 .nav-item.has-children.active .submenu {
@@ -152,6 +157,18 @@
     padding-right: 0.75rem;
 }
 
+.nav-item.has-children > .nav-link:focus + .submenu,
+.nav-item.has-children > .nav-link:active + .submenu,
+.nav-item.has-children:hover .submenu {
+    display: block;
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.nav-item.has-children:hover .submenu-toggle {
+    transform: rotate(180deg);
+}
+
 .sidebar-bottom {
     margin-top: auto;
     justify-content: center;
@@ -167,20 +184,3 @@
 }
 </style>
 
-<!--<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const sidebar = document.getElementById('sidebar');
-    if (!sidebar) return;
-
-    const sidebarMenuItems = sidebar.querySelectorAll('.nav-item.has-children > .nav-link');
-    
-    sidebarMenuItems.forEach(item => {
-        item.addEventListener('click', function(e) {
-            if (!e.target.closest('#sidebar')) return;
-            e.preventDefault();
-            const parent = this.parentElement;
-            parent.classList.toggle('active');
-        });
-    });
-});
-</script>-->