Modify the behavior of the hidding side menu effect #6284 | Support Center | ABP Commercial

Lexuan.Zhou created 4 months 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)

5 Answer(s)

0

liangshiwei created 4 months ago
Support Team Fullstack Developer

Hi,

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

1
0

Lexuan.Zhou created 4 months ago

Hi, Thanks. That would be very helpful

liangshiwei created 4 months 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

0

Lexuan.Zhou created 4 months 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

I will try to pull the Lepton X Pro Module source code and work on that directly. I assume that's where the MainHeader is located at?
0

liangshiwei created 4 months ago
Support Team Fullstack Developer

Hi,

I will try to pull the Lepton X Pro Module source code and work on that directly. I assume that's where the MainHeader is located at?

Yes, you can download the Lepton X Pro Module source code and customize it.

1

Have an answer to this question? Log in and write your answer.