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?
Hello!
To solve this problem you should do following three things:
Create AppMainWindow extension (via Cuba Studio)
Assign to menu items custom style names
Create theme extension (via Cuba Studio)
Write your own styling rules
Let’s talk about details:
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
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);
}
}
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:
app-component.scss
halo-ext.scss (or havana-ext.scss)
halo-ext-defaults.scss (or havana-ext-defaults.scss)
We are interested in the second file.
Adding custom styling
Open halo-ext.scss and add the following lines: