Customizing the web menu

Support
#1

Dear All,

How can I customize the base items of the side menu, such as adding icons to the administration and help menu, and their menu items? or for example, changing their style sheets so that they are consistent with the menu items that I have added myself?

Thanks.

#2

Hello!
To solve this problem you should do following three things:

  1. Create AppMainWindow extension (via Cuba Studio)
  2. Assign to menu items custom style names
  3. Create theme extension (via Cuba Studio)
  4. Write your own styling rules
    Let’s talk about details:
  5. Extending AppMainWindow
    To create the AppMainWindow extension, open ‘Generic UI’ tab in Cuba Studio, click ‘New’ and choose ‘Main Window’ option:
    public://attachments/e04e1149e44718e45345a637ecccca16.png
  6. Assigning custom style names
    Open previously created ExtAppMainWindow in your IDE and add the following code:
@Override
public void ready() {
    // iterate over first-level menu items
    mainMenu.getMenuItems()
            .forEach(this::addStyleNameRecursive);
}

private void addStyleNameRecursive(AppMenu.MenuItem menuItem) {
    String styleName = menuItem.getStyleName();
    // menu item will have default style name + "user-stylename-" + menu item caption (e.g. "users")
    menuItem.setStyleName(styleName + " user-stylename-" + menuItem.getCaption().toLowerCase());

    // iterate over submenu items if they exist
    if (menuItem.hasChildren()) {
        menuItem.getChildren().forEach(this::addStyleNameRecursive);
    }
}
  1. Extending theme
    To extend theme open ‘Project Properties’, click ‘Create theme extension’, choose a theme that you want to extend and click ‘OK’. Cuba Studio will add few files to your project:
  1. app-component.scss
  2. halo-ext.scss (or havana-ext.scss)
  3. halo-ext-defaults.scss (or havana-ext-defaults.scss)
    We are interested in the second file.
  1. Adding custom styling
    Open halo-ext.scss and add the following lines:
.v-menubar-menuitem {
  &.user-stylename-users {
    color: red;
    font-weight: 600;
  }
}

It will style Administration -> Users menu item:
public://attachments/e10c6493b98080298326785f9cb2b28d.png

e04e1149e44718e45345a637ecccca16

e10c6493b98080298326785f9cb2b28d

#3

Thanks a lot Daniil for the detailed explanation

#4

You are welcome!

#5

Hi
This is interesting.

Did you create a menu manually and named it as “mainMenu”? How can in inject it?

#6

mainMenu has protected access in AppMainWindow, so we can get access to it in the ExtAppMainWindow.

#7

Thanks, But how can inject that in my ExtAppMainWindow?

I tried something like this but don’t find it…


  @Inject
    private MainMenu mainMenu;

I have this one though but not mainMenu!!


  @Inject
    private AppMenu appMenu;
#8

There is no need in injecting of mainMenu. You can just use it in your ExtAppMainWindow.