diff --git a/src/lib/scss/custom/structure/_vertical.scss b/src/lib/scss/custom/structure/_vertical.scss index a8e2e38d..2764456a 100644 --- a/src/lib/scss/custom/structure/_vertical.scss +++ b/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 { diff --git a/src/routes/VerticalLayout/Sidebar.svelte b/src/routes/VerticalLayout/Sidebar.svelte index f2611ca1..285ce2b4 100644 --- a/src/routes/VerticalLayout/Sidebar.svelte +++ b/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); } } }