Open Closed

Is there a way to change from SideMenu to TopMenu in runtime? #7429


User avatar
0
rafael.gonzales created
  • ABP Framework version: v8.2.0
  • UI Type: MVC
    • Database System: EF Core (MySQL)
    • Tiered (for MVC) or Auth Server Separated (for Angular): no

Is there a way to change from SideMenu to TopMenu in runtime?

Configure<LeptonXThemeMvcOptions>(options =>
{
    options.ApplicationLayout = LeptonXMvcLayouts.SideMenu;
});
Configure<LeptonXThemeMvcOptions>(options =>
{
    options.ApplicationLayout = LeptonXMvcLayouts.TopMenu;
});

I've been trying to modify the LeptonX, GlobalScript, and GlobalStyle contributor, the style-initializer using a cookie approach but I didn't have much luck. Probably because I couldn't identify all the different files that need to be modified to make a cookie approach (for example) to handle a runtime modification of the sidebar from TopMenu to SideMenu and vice-versa, could you please help me implement this feature?


3 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    You can try:

    public class IndexModel : QwPageModel
    {
        public IOptions<LeptonXThemeMvcOptions> Options { get; }
        
        public IndexModel(IOptions<LeptonXThemeMvcOptions> options)
        {
            Options = options;
        }
    
        public void OnGet()
        {
            Options.Value.ApplicationLayout = Options.Value.ApplicationLayout == LeptonXMvcLayouts.SideMenu ? LeptonXMvcLayouts.TopMenu : LeptonXMvcLayouts.SideMenu;
        }
    }
    
  • User Avatar
    0
    rafael.gonzales created

    It does the trick, I will add a cookie implementation to save a state where the user can change the layout based on that value.

    Please, let me ask you another question related. Based on this feature, the idea is to add another button to the configuration panel in the Main Toolbar but it seems that there is no contributor or CSharp way to add another option to this place

    I checked that there are two possible ways to add some buttons in that place. One of them it's to use JQuery to add it dynamically on the fly and the other one it's to modify the Lepton X, template to include this option. Is that correct or probably there is another way to add it that I am not seeing?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    One of them it's to use JQuery to add it dynamically on the fly and the other one it's to modify the Lepton X

    Yes, you can add it via Jquery or override the page

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11