Slider bar without the AppBar about vaadin-app-layout

[appreciated]

Hello Borax I don't know how much of the API you already have discovered and if you found the following method.

public class DemoUI extends UI {
  ...
  protected void init(VaadinRequest request) {
    setContent(NavigationDrawerBuilder.get()
    .withVariant( ... ) // <-- this one
    .build());
  }
}

And if one of the offered Variants satisfy you.

Now to your question:

I do not recommend removing the app bar from because from a UX point of view, about no user will be able to figure out how to open the drawer if you remove the AppBar.

But If you really want no app bar 😉 yes it is possible to do so:

1. You could either use the variant LEFT or LEFT_OVERLAY and hide the App Bar by setting some scss variables and applying some styles in a custom theme:

$app-bar-height: 0px;
$app-bar-shadow: none;

@import ...

@mixin mytheme {
   ...
   app-toolbar {
     display: none;
   }
  ...
}

2. (This requires more work but is a cleaner solution) Or create your own Custom Layout and use your own template.

Checkout the package com.github.appreciated.app.layout.drawer, the associated Resource folder and /webapp/VAADIN/addons/app-layout figure out how I made polymer app-layout working and try to mimic it and make only app-drawer work. It is actually not that complicated than it may sounds. The Examples are very straight forward.

[bora-aydemir]

Thanks, I'll look into it. You are correct about the appbar, but my problem is that I already have one in my project :) I just need a drawer that will play nice with my appbar.

[appreciated]

@borax1974 Ah yeah you are right didn't think about that usecase 🙂 you then might want to add a button to that app-bar which calls the following then the UX does not suffer

AbstractNavigationDrawer::toggleDrawer()