SideNav + View

Flow
1

Hi there,

My questions is probably very trivial but I fail to find an answer to my issue.
I have a MainLayout extending from AppLayout that so far contains only a SideNav.

Following the tutorial’s code ```java
SideNav nav = new SideNav();

SideNavItem dashboardLink = new SideNavItem(“Dashboard”, DashboardView.class, VaadinIcon.DASHBOARD.create());
SideNavItem inboxLink = new SideNavItem(“Inbox”, InboxView.class, VaadinIcon.ENVELOPE.create());
SideNavItem calendarLink = new SideNavItem(“Calendar”, CalendarView.class, VaadinIcon.CALENDAR.create());
SideNavItem settingsLink = new SideNavItem(“Settings”, SettingsView.class, VaadinIcon.COG.create());
SideNavItem vaadinLink = new SideNavItem(“Vaadin website”, “https://vaadin.com”, VaadinIcon.VAADIN_H.create());

nav.addItem(dashboardLink, inboxLink, calendarLink, settingsLink, vaadinLink);```
I realised that every link will open the respective view but the SideNav will disappear every time as a new view is opening.
Do I need to include the SideNav for every view that is linked? Cause I was looking for some kind of target property to refer to the Main View on the right when clicking the items in the SideNav.
Am I missing something or approaching this the wrong way?
I simply want to have a permanent SideNav on the left and changing content in the Main View…

2

I think you may be looking to use a host layout–if you add your sidenav to a “root” layout, then children that reference that layout via the @Route’s layout property will inherit that

3

https://github.com/sunshower-io/groovv-core/blob/main/groovv/src/main/java/io/groovv/app/ui/views/accounts/AccountView.java

4

Here’s an example

5

So instead of an AppLayout I’d use HorizontalLayout in my case to have SideNave left and MainView right, if I understand you correctly. Or what do you mean with “root” layout?

6

The actual layout class doesn’t really matter. If you want to preserve the “chrome” (side-nav, search bars, etc.), add all of them to a “root” layout and then, in the route annotation, specify that

7

It can be anything as long as it implements RouterLayout

8

Alright, thank you. Will have a go at it and see if I can figure.

9

Awesome–lmk if you have any questions

10

Right, so in the end I made it work with this structure:

@Route("")
class RootLayout : HorizontalLayout(), RouterLayout {
    init {
        add(SideNavBar())
    }
}

@Route(value = "navigation")
class SideNavBar : AppLayout() {

    init {
        buildUI()
    }

    [...]
}```
This shows the SideNav constantly and loads any other views into the body of RootLayout. Seems to work.
11

Wait that seems strange

12

https://vaadin.com/docs/latest/routing/layout please take a look here - your Applayout is a Routerlayout and no route. All other route should define that layout as their “parent”

13

“Example: Render CompanyComponent inside MainLayout:”

14

I forgot to show the last class kotlin @Route(value = "form", layout = RootLayout::class) class Something : Div() { init { add(Text("Whatever")) add(Button("Click me")) } }
This does render into the body of RootLayout.

15

Nevermind I guess, I deduced it to ```kotlin
@Route(value = “”)
class MainLayout : AppLayout() {
init {
add(SideBarNav())
}
}

@Route(value = “login”, layout = MainLayout::class)
class LoginScreen : Div() {
init {
add(LoginForm())
}
}```
Now the content of the layout also fit which didn’t really work before.