Modify the behavior of the hidding side menu effect #6284

Lexuan.Zhou created one year ago

ABP Framework version: v7.3.2
UI Type: Blazor Server
Database System: EF Core (SQL Server)
Tiered (for MVC) or Auth Server Separated (for Angular): no
Exception message and full stack trace:
Steps to reproduce the issue:

At the moment, I think the behavior is that, when the mouse is moved way from the panel, the side menu will be hidden. Is there a way to make it simpler? i.e Once I click it, it shows the side menu. If I click it again, it hides the menu(such that it ignores the position of the mouse)

liangshiwei created one year ago

Support Team Fullstack Developer

Hi,

You need to customize the leptonx by replacing the component, I can provide an example if you needed.

Lexuan.Zhou created one year ago

Hi, Thanks. That would be very helpful

liangshiwei created one year ago

Support Team Fullstack Developer

Hi,

This is a simple way:

MyMainHeader.razor

@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu.Navigation
@using Volo.Abp.LeptonX.Shared.Localization
@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu.MainHeader
@using Volo.Abp.DependencyInjection

@inherits MainHeader
@attribute [Dependency(ReplaceServices = true)]
@attribute [ExposeServices(typeof(MainHeader))]

@{
	LocalizationResource = typeof(LeptonXResource);
}

<div class="lpx-sidebar-container">
	<div class="lpx-sidebar lpx-scroll-container" id="lpx-sidebar">
		<nav class="lpx-nav">
			<div class="lpx-logo-container" aria-hidden="true"
				   data-lpx-toggle="sidebar">
				
					<div class="lpx-brand-logo"></div>
				
				<i class="lpx-icon bi bi-filter-left menu-collapse-icon hidden-in-hover-trigger" >
				</i>
			</div>

			<div class="lpx-menu-filter hidden-in-hover-trigger" data-lpx-menu-filter="sidebar">
				<i class="lpx-icon bi bi-filter menu-filter-icon" aria-hidden="true"></i>
				<input class="menu-filter-input hidden-in-hover-trigger" type="text" placeholder="@L["FilterMenu"]" />
				<span class="menu-filter-clear hidden">
					<i class="lpx-icon bi bi-x clear-icon" aria-hidden="true"></i>
				</span>
			</div>
			<ul class="lpx-nav-menu" id="desktop-sidebar">
				<MainMenu />
			</ul>
		</nav>
	</div>
</div>

blazor-global-styles.css

.hover-trigger .lpx-sidebar-container:hover {
  min-width: 72px !important;
}

.hover-trigger .lpx-sidebar-container:hover .lpx-logo-container {
  max-width: 72px !important;
}

.hover-trigger .lpx-sidebar-container:hover .lpx-sidebar {
  min-width: 72px !important;
}

.hover-trigger .lpx-sidebar-container:hover .lpx-sidebar .lpx-nav {
  min-width: 72px!important;
}

.hover-trigger .lpx-sidebar-container:hover .lpx-brand-logo {
  background-image: var(--lpx-logo-icon) !important;
}

.hover-trigger .lpx-sidebar-container:hover .hidden-in-hover-trigger {
  display: none !important;   
}

It has a limitation, but when the menu is closed, you cannot see and select menu items

Lexuan.Zhou created one year ago

Yeah, It is what i expect visually but to your point i still need to be able to select the menu items. Basically I just want to replicate the same behavior of the menu from asp.net zero