Two menus in one module #31

2 Answer(s)

• 

  0

  langman66 created 9 years ago

  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: []
                  }]
              }
      };
  })();
  

  Save Cancel
• 

  0

  cosmic created 9 years ago

  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.

  Save Cancel