Apollo nav doesn't showing in UI

[abdurasul29052002]

Hello @Peppe. Here I'm trying to add ApolloNav to my project but it doesn't shows in UI.

This is the screenshot of my UI.

@Route("/login")
@CssImport("./themes/my-theme/styles.css")
public class Login extends VerticalLayout {
    private final String secretCode = "$2a$10$QfTABx48t.eisUig9l5t6vBiWC5Qr01j2WTZG";

    public Login(PasswordEncoder passwordEncoder) {

        TextField code = new TextField("Secret code", "Secret code");
        Button loginButton = new Button("Login", event -> {
            if (passwordEncoder.matches(code.getValue(), secretCode)) {
                VaadinSession.getCurrent().setAttribute("authenticated", true);
                UI.getCurrent().navigate(Dashboard.class);
            }
        });
        addClassNames("centered");
        addClassNames(
                LumoUtility.Display.FLEX,
                LumoUtility.JustifyContent.CENTER,
                LumoUtility.AlignItems.CENTER
        );

        ApolloNav nav = new ApolloNav();
        nav.setLabel("Main menu");
        nav.setItems(new ArrayList<>());
        nav.getItems().addAll(Arrays.asList(
                new ApolloNavItem("dashboard", "Dashboard", "lineBarChart"),
                new ApolloNavItem("customers", "Customers", "suitcase"),
                new ApolloNavItem("leads", "Leads", "tabA", null,
                        Arrays.asList(
                                new ApolloNavItem("leads/high-profile",
                                        "High profile", "userStar"),
                                new ApolloNavItem("leads/others", "Others",
                                        "userClock"))),
                new ApolloNavItem("todos", "To-dos", "tasks", 9, Arrays.asList(
                        new ApolloNavItem("leads/High", "High", null, 2),
                        new ApolloNavItem("leads/medium", "Medium", null, 4),
                        new ApolloNavItem("leads/low", "Low", null, 3))),
                new ApolloNavItem("inbounds", "Inbounds", "envelope", 12))
        );

        nav.setWidth("200px");

        add(code, loginButton, nav);
    }
}

This is the source code of apollo nav. I have no idea why navbar is not showing in UI i just copied sample code from add ons but it doesn't work. I tried with some changes but still doesn't work please help me.

Vaadin version: 24.4.11 Java version: 17 Apollo nav version: 1.2.0

[Peppe]

Hi @abdurasul29052002! Glad to see that you are interested in ApolloNav. Sadly, the last time I worked on it was over 3 years ago, and it was working with a beta version of Vaadin 20. I don't think it is compatible with Vaadin 24 without some updating.

I have no plans on working on ApolloNav. But you are free to fork and update it.

[abdurasul29052002]

Thank you for your reply. I have forked it. I will try to make it compatible with Vaadin 24.

[abdurasul29052002]

@Peppe I have changed your code. How can i test it. I'm sorry i have never changed any library. I really sorry if i distracting you from your main work but i need your help. It will be some experience to me contributing external libraries.