App Layout - Addon

Flow
64

Evgeniy Zherebin:
Hello Johannes, thank you for great and very usefull add-on! Please, answer these questions about 2.0.0 version:

  1. How to add badge to menu, like “Home [9+]
    " in 1.x version demo (”.add(“Home”, VaadinIcons.HOME, badge, View1.class)")?
  2. Why .addToSection(new LeftClickableComponent(…), FOOTER) not aligned to bottom of AppMenu, like in 1.x version demo?
  3. How to change main color (appbar and active menu items) and other predefined styles of app-layout?
  4. How to reduce font-size on mobile layout (title and menu item caption)?

Hi!
Here are some answers to your questions:

DefaultNotificationHolder notificationHolder = new DefaultNotificationHolder(newStatus -> {/*Do something with it*/});
DefaultBadgeHolder badgeHolder = new DefaultBadgeHolder();
LeftNavigationComponent home = new LeftNavigationComponent("Home", VaadinIcon.HOME.create(), View1.class);
LeftNavigationComponent menu = new LeftNavigationComponent("Menu", VaadinIcon.MENU.create(), View9.class);
notificationHolder.bind(home.getBadge());
badgeHolder.bind(menu.getBadge());

The answers to Question 2,3,4 will change when Version 2.0.1 is released:

  1. The reason why this didn’t work out of the box is that I introduced a webcomponent that does a similar job as the old menu but doesn’t support sticky footer / headers this out of the box. 2.0.1 will at least allow to set a sticky footer again.

  2. In 2.0.1 I cleaned up the older sass/css variables from V1.*.
    [The CSS Variables that are available]
    (https://github.com/appreciated/vaadin-app-layout/blob/master/app-layout-addon/src/main/resources/META-INF/resources/frontend/com/github/appreciated/app-layout/app-layout.css)
    Here an example how to overwrite them:

  1. Since V2.0.1 inherits now styles from lumo this might not be necessary anymore. You may open an issue on github where we can talk in detail about this.