javafx - Navigation Sidebar with Toggle

Question

So in windows 10 you have the windows menu with the icons on the left side:

When clicking on the hamburger icon the menu expands and text is show.

The expanded part is overlaying the content. The text is showing. and it was animated in (sliding transition).

In my application I want to make a similar menu on the right side (see blue part):

I have absolutely no idea how to get this effect. Currently I made a button with a graphic. I only display the graphic and when I click on the hamburger I show all the text by changing the setContentDisplay(ContentDisplay.GRAPHIC_ONLY) to setContentDisplay(ContentDisplay.RIGHT) 2 things that are wrong with this approach.

1. it pushes the content.
2. You cannot add a transition.

Any help would be appreciated, especially examples.

---

Demo

I made a demo that shows what I currently have:

public class Main extends Application {

  public static void main(String[] args) {
    launch(args);
  }

  @Override
  public void start(Stage primaryStage) {

    BorderPane root = new BorderPane();

    JFXButton[] jfxButtons = {
        new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
        new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
        new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
    };

    JFXHamburger hamburger = new JFXHamburger();
    HamburgerNextArrowBasicTransition transition = new HamburgerNextArrowBasicTransition(hamburger);
    transition.setRate(-1);

    hamburger.setAlignment(Pos.CENTER_RIGHT);
    hamburger.setPadding(new Insets(5));
    hamburger.setStyle("-fx-background-color: #fff;");

    hamburger.setOnMouseClicked(event -> {
      transition.setRate(transition.getRate() * -1);
      transition.play();
      if (transition.getRate() == -1) {
        for (JFXButton jfxButton : jfxButtons) {
          jfxButton.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
        }
      } else {
        for (JFXButton jfxButton : jfxButtons) {
          jfxButton.setContentDisplay(ContentDisplay.RIGHT);
        }
      }
    });

    ScrollPane scrollPane = new ScrollPane();
    VBox vBox = new VBox();
    scrollPane.setContent(vBox);

    vBox.getStyleClass().add("content_scene_right");
    vBox.getChildren().add(hamburger);
    vBox.getChildren().addAll(jfxButtons);

    for (JFXButton jfxButton : jfxButtons) {
      jfxButton.setMaxWidth(Double.MAX_VALUE);
      jfxButton.setRipplerFill(Color.valueOf("#40E0D0"));
      VBox.setVgrow(jfxButton, Priority.ALWAYS);
      jfxButton.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
    }
    vBox.setFillWidth(true);

    Label labelHoverOverTest = new Label("Testing label");

    VBox vbox2 = new VBox();
    vbox2.getChildren().addAll(labelHoverOverTest);
    vbox2.setAlignment(Pos.CENTER_RIGHT);

    root.setRight(scrollPane);
    root.setCenter(vbox2);

    Scene scene = new Scene(root);

    primaryStage.setMinWidth(400);
    primaryStage.setMinHeight(400);

    primaryStage.setScene(scene);
    primaryStage.show();

  }
}

I used JFoenix and fontawesomefx for this demo, but it can also be javafx scene buttons with any graphic.

Here are some images of what the demo looks like:

As you can see it pushes it the content in the center and I can't add any transition.

(here is a sample from bootstrap to give you an idea on What I'm trying to make it look like 1: https://bootsnipp.com/snippets/Pa9xl, 2: https://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle (with this one the content still moves, but it should give you a clear idea on what my vision is))

Answer 1

Problem is that you are using BorderPane and placing everything on same layer, so when content on right changes width it will affect one in the center and such.

In other to avoid this you should make it layered, so for root of view use StackPane, this pane should have 2 children, 1 for main content and 1 for sidebar, make sure that sidebar is above main content, now this 2 can be any Pane that you want. This way sidebar will be placed over main content and it won't push content.

Using code you provided and just adding StackPane you get something like this:

@Override
public void start(Stage primaryStage) {

    StackPane root = new StackPane();
    BorderPane mainContent = new BorderPane();
    BorderPane sidebar = new BorderPane();

    JFXButton[] jfxButtons = {
        new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
        new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
        new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),};

    JFXHamburger hamburger = new JFXHamburger();
    HamburgerNextArrowBasicTransition transition = new HamburgerNextArrowBasicTransition(hamburger);
    transition.setRate(-1);

    hamburger.setAlignment(Pos.CENTER_RIGHT);
    hamburger.setPadding(new Insets(5));
    hamburger.setStyle("-fx-background-color: #fff;");

    hamburger.setOnMouseClicked(event -> {
        transition.setRate(transition.getRate() * -1);
        transition.play();
        if (transition.getRate() == -1) {
            for (JFXButton jfxButton : jfxButtons) {
                jfxButton.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
            }
        } else {
            for (JFXButton jfxButton : jfxButtons) {
                jfxButton.setContentDisplay(ContentDisplay.RIGHT);
            }
        }
    });

    ScrollPane scrollPane = new ScrollPane();
    VBox vBox = new VBox();
    scrollPane.setContent(vBox);

    vBox.getStyleClass().add("content_scene_right");
    vBox.getChildren().add(hamburger);
    vBox.getChildren().addAll(jfxButtons);

    for (JFXButton jfxButton : jfxButtons) {
        jfxButton.setMaxWidth(Double.MAX_VALUE);
        jfxButton.setRipplerFill(Color.valueOf("#40E0D0"));
        VBox.setVgrow(jfxButton, Priority.ALWAYS);
        jfxButton.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
    }
    vBox.setFillWidth(true);

    Label labelHoverOverTest = new Label("Testing label");

    VBox vbox2 = new VBox();
    vbox2.getChildren().addAll(labelHoverOverTest);
    vbox2.setAlignment(Pos.CENTER_RIGHT);

    mainContent.setCenter(vbox2);
    sidebar.setRight(scrollPane);

    root.getChildren().addAll(mainContent, sidebar);

    Scene scene = new Scene(root);

    primaryStage.setMinWidth(400);
    primaryStage.setMinHeight(400);
    primaryStage.setScene(scene);
    primaryStage.show();
}

As for transition I'm not sure what is problem there, for me it works fine.