Open Closed

Modify the behavior of the hidding side menu effect #6284


User avatar
0
Lexuan.Zhou created
  • 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)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

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

  • User Avatar
    0
    Lexuan.Zhou created

    Hi, Thanks. That would be very helpful

  • User Avatar
    0
    liangshiwei created
    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

  • User Avatar
    0
    Lexuan.Zhou created

    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?

  • User Avatar
    0
    liangshiwei created
    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.

Made with ❤️ on ABP v9.1.0-preview. Updated on December 10, 2024, 06:38