How to load view in same page in menu application?

I want to load view on menu-item click in same page where menu did not disappear like this.

But, In my case It disappears, Like this.

Code in MainLayout .java is :

package com.packagename.myapp;
import com.vaadin.flow.component.AttachEvent;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.KeyModifier;
import com.vaadin.flow.component.applayout.AppLayout;
import com.vaadin.flow.component.applayout.DrawerToggle;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.charts.model.Navigator;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouteConfiguration;
import com.vaadin.flow.router.RouterLayout;
import com.vaadin.flow.router.RouterLink;
import com.vaadin.flow.server.PWA;
import com.vaadin.flow.theme.Theme;
import com.vaadin.flow.theme.lumo.Lumo;
import sun.jvm.hotspot.debugger.cdbg.AccessControl;
/**
* The main layout. Contains the navigation menu.
*/
@Theme(value = Lumo.class)
@Route("")
@PWA(name = "Project Base for Vaadin", shortName = "Project Base", enableInstallPrompt = false)
@CssImport("./styles/shared-styles.css")
@CssImport(value = "./styles/menu-buttons.css", themeFor = "vaadin-button")
public class MainLayout extends AppLayout implements RouterLayout {
public MainLayout() {
final DrawerToggle drawerToggle = new DrawerToggle();
drawerToggle.addClassName("menu-toggle");
addToNavbar(drawerToggle);
VerticalLayout layout = new VerticalLayout();
layout.setDefaultHorizontalComponentAlignment(Alignment.CENTER);
layout.setClassName("Menu-header");
final HorizontalLayout top = new HorizontalLayout();
top.setDefaultVerticalComponentAlignment(Alignment.CENTER);
top.setClassName("menu-header");
final Label title = new Label("Menu Application");
top.add(title);
addToNavbar(top);
addToDrawer(createMenuLink(HomeView.class, HomeView.VIEW_NAME,
VaadinIcon.EDIT.create()));
addToDrawer(createMenuLink(MainView.class, MainView.VIEW_NAME,
VaadinIcon.INFO_CIRCLE.create()));
}
private RouterLink createMenuLink(Class<? extends Component> viewClass, String caption, Icon icon) {
final RouterLink routerLink = new RouterLink(null, viewClass);
routerLink.setClassName("menu-button");
routerLink.add(icon);
routerLink.add(new Span(caption));
icon.setSize("24px");
return routerLink;
}
private Button createMenuButton(String caption, Icon icon) {
final Button routerButton = new Button(caption);
routerButton.setClassName("menu-button");
routerButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE);
routerButton.setIcon(icon);
icon.setSize("24px");
return routerButton;
}
}

Code int MainView.java is:

package com.packagename.myapp;
import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;
@Route("main-view")
public class MainView extends VerticalLayout {
public static final String VIEW_NAME = "Main";
public MainView() {
TextField textField = new TextField("Your name");
textField.addThemeName("bordered");
GreetService greetService = new GreetService();
Button button = new Button("Say hello",
e -> Notification.show(greetService.greet(textField.getValue())));
button.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
button.addClickShortcut(Key.ENTER);
addClassName("centered-content");
add(textField, button);
}
}

Code in HomeView.java is:

package com.packagename.myapp;
import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;
import com.vaadin.flow.server.Version;
@Route("home-view")
public class HomeView extends VerticalLayout {
public static final String VIEW_NAME = "Home";
public HomeView() {
add(VaadinIcon.INFO_CIRCLE.create());
add(new Span(" This application is using Vaadin version "
+ Version.getFullVersion() + "."));
setSizeFull();
setJustifyContentMode(JustifyContentMode.CENTER);
setAlignItems(Alignment.CENTER);
}
}

I want to load GUI of menu-item in same page. How can I do this? Help me please, How can I Fix this issue.

You need to specify in which RouterLayout it should be shown. For the HomeView the route-annotation would be

@Route(value = "home-view", layout = MainLayout.class)

You can download an example project from https://start.vaadin.com/ and take example from there on how to do it.

In your case, you have your views set up to routes, but there is no connection between it and the main layout. The @Route annotation should define the parameter layout to tell the system it should be rendered within another layout, like for example this:

HomeView.java

@Route(value = "home-view", layout = MainLayout.class)

The MainLayout should not have a route in itself as it should not be accessible with no content as a view. Parent layout should always implement RouterLayout, but as you are already extending AppLayout, that's already taken care of.

More documentation on it can be found at https://vaadin.com/docs/v14/flow/routing/tutorial-router-layout.html.