Side Menu fixed

Hello,

I’m definitely new in Vaadin, that’s why I’ve decided to write something here.

I want to create a side menu/Index wich is fixed and cannot be hidden.
Basically, if the sideBar that is shown is the sideBar.png can be replaced into a thing looking like the sideMenu.png, it would be great…

But after hours searching how to change the menu that is created in the “getting started” project of Vaadin, I couldn’t find anything…
If you want more precisions I can try to explain it better.
I hope you can help me.

Thanks in advance :slight_smile:
18554099.png
18554102.png

If you want a fixed side bar like that, you can replace the AppLayout with a simpler HorizontalLayout component. Within the HL, add a side bar component with a fixed width (a VerticalLayout would work well for what you had in the screen shot).

So something like this:

class FixedSideBar extends HorizontalLayout implements RouterLayout {
	HasElements currentView; 
	
	FixedSideBar() {
		add(/*Fixed size sidebar component*/);
	}
	
	@Override
	public void showRouterLayoutContent(HasElement newView) {
		if(currentView != null){
			remove(currentView);
		}
		add(newView);
		currentView = newView;
	}
}

Thank you so much for the reply !

I’ll try it right away :smiley:

Okay, I’ve succeeded in doing that “fixed” menu, but I have another problem linked with it.

I want to get the layout displayed by another View, and put it in a specific layout in the MainView, so that it’s not placed below the side menu.
The image shows what I’m trying to accomplish. I could have done another ticket since it’s different but I thought that since it’s linked with the side Menu part, I could ask again here.

I’ve searched on the forum and people are talking about EventBus but I really don’t get it and I’m not sure it’s what I need.

Hope you can still help me…

18556320.png

You should be able to use the showRouterLayoutContent() method to configure where the content is shown.

Marcus Hellberg:
You should be able to use the showRouterLayoutContent() method to configure where the content is shown.

I definitely don’t get what this function does. Plus, when I try to copy/past it, I have two errors related to add() and remove() functions, since they require a component and currentView is a HasComponents (since HasElements is implemented in it).

And how could I use this function too?

I’m still lost a bit(a lot)… :confused:

PS: I’m using Vaadin 14

Here is a tutorial that might help: https://vaadin.com/learn/tutorials/nested-layouts-in-flow

Thank you so much, didn’t saw (nor understood) this tutorial at first.

I’ve succeeded thank you again !