Merge pull request #427 from iceljc/main

Fix sidebar menu scrolling

Author: iceljc

src/lib/scss/custom/structure/_vertical.scss

@@ -228,6 +228,8 @@
         position: absolute;
         width: $sidebar-collapsed-width !important;
         z-index: 5;
+        overflow-y: auto;
+        scrollbar-width: none;
 
         .simplebar-mask,
         .simplebar-content-wrapper {
@@ -242,6 +244,10 @@
             bottom: 0 !important;
         }
 
+        #vertical-menu {
+            height: auto !important;
+        }
+
         // Sidebar Menu
         #sidebar-menu {
 
@@ -263,7 +269,7 @@
 
             >ul {
                 >li {
-                    position: relative;
+                    position: static;
                     white-space: nowrap;
 
                     >a {
@@ -308,7 +314,7 @@
                         >ul {
                             display: block;
                             left: $sidebar-collapsed-width;
-                            position: absolute;
+                            position: fixed;
                             width: 190px;
                             height: auto !important;
                             box-shadow: 3px 5px 10px 0 rgba(54, 61, 71, .1);
@@ -340,13 +346,15 @@
                     background-color: $sidebar-bg;
 
                     li {
+                        position: relative;
+
                         &:hover {
                             >ul {
                                 display: block;
-                                left: 190px;
+                                left: calc(#{$sidebar-collapsed-width} + 190px);
                                 height: auto !important;
                                 margin-top: -36px;
-                                position: absolute;
+                                position: fixed;
                                 width: 190px;
                             }
                         }
@@ -417,7 +425,7 @@ body[data-sidebar="dark"] {
 
     // Enlarge menu
     &.vertical-collpsed {
-        min-height: 1760px;
+        // min-height: 1760px;
 
         // Side menu
         .vertical-menu {

src/routes/VerticalLayout/Sidebar.svelte

@@ -76,6 +76,7 @@
 		}
 
 		activeMenu();
+		setupCollapsedMenuPositioning();
 
 		const curUrl = getCleanUrl($page.url.pathname);
 		if (curUrl) {
@@ -112,6 +113,41 @@
 		// menuItemScroll()
 	});
 
+	const setupCollapsedMenuPositioning = () => {
+		if (!browser) return;
+
+		const sideMenu = document.querySelector('#side-menu');
+		if (!sideMenu) return;
+
+		// Position fixed submenus on hover when sidebar is collapsed
+		sideMenu.querySelectorAll(':scope > li').forEach((li) => {
+			li.addEventListener('mouseenter', () => {
+				if (!document.body.classList.contains('vertical-collpsed')) return;
+
+				const submenu = li.querySelector(':scope > ul.sub-menu');
+				if (submenu) {
+					const rect = li.getBoundingClientRect();
+					// @ts-ignore
+					submenu.style.top = `${rect.top}px`;
+				}
+			});
+		});
+
+		// Position nested submenus
+		sideMenu.querySelectorAll('.sub-menu li').forEach((li) => {
+			li.addEventListener('mouseenter', () => {
+				if (!document.body.classList.contains('vertical-collpsed')) return;
+
+				const nestedSubmenu = li.querySelector(':scope > ul.sub-menu');
+				if (nestedSubmenu) {
+					const rect = li.getBoundingClientRect();
+					// @ts-ignore
+					nestedSubmenu.style.top = `${rect.top}px`;
+				}
+			});
+		});
+	};
+
 	const activeMenu = () => {
 		if (browser) {
 			document.querySelectorAll('.vertical-menu .has-arrow').forEach((menu) => {
@@ -201,7 +237,7 @@
 			document.body.classList.add('sidebar-enable');
 
 			if (menuElement) {
-				const instance = OverlayScrollbars(menuElement);
+				const instance = OverlayScrollbars(menuElement, options);
 				if (instance) {
 					instance.destroy();
 				}
@@ -211,7 +247,7 @@
 			document.body.classList.remove('sidebar-enable');
 
 			if (menuElement) {
-				const instance = OverlayScrollbars(menuElement);
+				OverlayScrollbars(menuElement, options);
 			}
 		}
 	}