Base solution for your next web application
Open Closed

Two menus in one module #31


User avatar
0
cosmic created

Hi, is there any way to define two unique menus in one module? I need two menus in my web application, one in the sidebar (MainMenu) and one in the top bar (TopMenu). Thank you for help.


2 Answer(s)
  • User Avatar
    0
    langman66 created

    I have navigation menus for my public facing website (typical stuff like Home, Contact Us, About, Login) and then once the user logs into the internal application I have menus like (Dashboard, Profile, Campaigns, etc.).

    Here's how I've built the different menus in my NavigationProvider.

    //This is the "MainMenu".
    
                context.Manager.MainMenu
                    .AddItem(
                        new MenuItemDefinition(
                            "Home",
                            new LocalizableString("HomePage", CaptureConsts.LocalizationSourceName),
                            url: "/",
                            icon: "fa fa-home"
                            )
                    )
                    .AddItem(
                        new MenuItemDefinition(
                            "About",
                            new LocalizableString("About", CaptureConsts.LocalizationSourceName),
                            url: "/Home/About",
                            icon: "fa fa-cog"
                            )
                    )                
                    .AddItem(
                        new MenuItemDefinition(
                            "Contact",
                            new LocalizableString("Contact", CaptureConsts.LocalizationSourceName),
                            url: "/Home/Contact",
                            icon: "fa fa-info"
                            )
                    .AddItem(
                        new MenuItemDefinition(
                            "Login",
                            new LocalizableString("Login", CaptureConsts.LocalizationSourceName), url: "/Account/Login",
                            icon: "fa fa-info"                                
                        ))
                    );
    
    
    //This is the "Dashboard" menu.
    
                var dashboardMenuDefinition = new MenuDefinition("Dashboard", new LocalizableString("Dashboard", CaptureConsts.LocalizationSourceName));
    
    
                var dashboardMenuItemDefinition = new MenuItemDefinition(
                    "Dashboard",
                    new LocalizableString("Dashboard", CaptureConsts.LocalizationSourceName), url: "/app/dashboard",
                    icon: "icon-home");
    
                var campaigns = new MenuItemDefinition(
                    "Campaigns",
                    new LocalizableString("Campaigns", CaptureConsts.LocalizationSourceName), url: "javascript:;",
                    icon: "icon-settings")
                    .AddItem(
                        new MenuItemDefinition(
                            "AllCampaigns",
                            new LocalizableString("AllCampaigns", CaptureConsts.LocalizationSourceName),
                            url: "/app/campaigns", icon: "icon-puzzle"
                            ))
                    .AddItem(
                        new MenuItemDefinition(
                            "CreateCampaign",
                            new LocalizableString("CreateCampaign", CaptureConsts.LocalizationSourceName),
                            url: "/app/campaigns/0/edit", icon: "fa fa-file-o"
                            ));
                    //.AddItem(
                    //    new MenuItemDefinition(
                    //        "CreateCampaign",
                    //        new LocalizableString("CreateCampaign", CaptureConsts.LocalizationSourceName),
                    //        url: "/app/campaigns/createedit", icon: "fa fa-file-o"
                    //        ));
                //url: "/app/campaign/:campaignId/edit",
                
                var userProfile = new MenuItemDefinition(
                    "UserProfile",
                    new LocalizableString("UserProfile", CaptureConsts.LocalizationSourceName), url: "/app/userprofile/account",
                    icon: "icon-user");
    
    
                dashboardMenuDefinition.AddItem(dashboardMenuItemDefinition);
                dashboardMenuDefinition.AddItem(campaigns);
                dashboardMenuDefinition.AddItem(userProfile);
    
                context.Manager.Menus.Add("Dashboard", dashboardMenuDefinition);
    

    The javascript object structure looks like the following, which you will see in the AbpScripts/GetScripts api call.

    (function() {
        abp.nav = {};
        abp.nav.menus = {
            'MainMenu': {
                name: 'MainMenu',
                displayName: 'Main menu',
                items: [{
                        name: 'Home',
                        icon: 'fa fa-home',
                        url: '/',
                        displayName: 'Home page',
                        items: []
                    } , {
                        name: 'About',
                        icon: 'fa fa-cog',
                        url: '/Home/About',
                        displayName: 'About',
                        items: []
                    } , {
                        name: 'Contact',
                        icon: 'fa fa-info',
                        url: '/Home/Contact',
                        displayName: 'Contact',
                        items: [{
                                name: 'Login',
                                icon: 'fa fa-info',
                                url: '/Account/Login',
                                displayName: 'Login',
                                items: []
                            }]
                    }]
                }
     ,         'Dashboard': {
                name: 'Dashboard',
                displayName: 'Dashboard',
                items: [{
                        name: 'Dashboard',
                        icon: 'icon-home',
                        url: '/app/dashboard',
                        displayName: 'Dashboard',
                        items: []
                    } , {
                        name: 'Campaigns',
                        icon: 'icon-settings',
                        url: 'javascript:;',
                        displayName: 'Campaigns',
                        items: [{
                                name: 'AllCampaigns',
                                icon: 'icon-puzzle',
                                url: '/app/campaigns',
                                displayName: 'All Campaigns',
                                items: []
                            } , {
                                name: 'CreateCampaign',
                                icon: 'fa fa-file-o',
                                url: '/app/campaigns/0/edit',
                                displayName: 'Create Campaign',
                                items: []
                            }]
                    } , {
                        name: 'UserProfile',
                        icon: 'icon-user',
                        url: '/app/userprofile/account',
                        displayName: 'User Profile',
                        items: []
                    }]
                }
        };
    })();
    
  • User Avatar
    0
    cosmic created

    I solved it. It was really simple, just one line of code to add a new menu

    context.Manager.Menus.Add("TopMenu", new MenuDefinition("TopMenu", new FixedLocalizableString("Top menu")));
    

    In your code is it exactly same as my solution, thank you for help.