App Layout Issue with <vaadin-drawer>

Hello everyone! Having some trouble with the App Layout not showing the hamburger icon, I believe i’ve imported all the correct @vaadin/ components. Here is my LitElement code.

Rebuilt my webpack config from scratch just to rule out everything, however, this hamburger icon refuses to show up. Maybe i’m missing a particular component import statement.

HTML – calling my custom component
index.html :

<body>
  <bootstrap-nav></bootstrap-nav> 
  <h1><%= htmlWebpackPlugin.options.title %></h1>
</body>	  

bootstrap-nav.js:

import { html, LitElement } from 'lit-element';
import { navViewStyles } from '../styles/base-styles';
import '@vaadin/vaadin-app-layout';
import '@vaadin/vaadin-tabs';
import '@vaadin/vaadin-icons';
import '@vaadin/vaadin-button';

class BootstrapNav extends LitElement{
  //static get styles() {
  //  return [ navViewStyles]
 
  //}
  render() {
    return html` 
      <custom-style>
    <style include="lumo-typography lumo-color">
    </style>
  </custom-style>
  <style>
      iron-icon {
        padding: 0.25em;
        width: var(--lumo-icon-size-s);
        height: var(--lumo-icon-size-s);
      }
    </style>
    <vaadin-app-layout>
      <vaadin-drawer-toggle slot="navbar"></vaadin-drawer-toggle>
      <h2 slot="navbar">App Name</h2>
      <vaadin-tabs orientation="vertical" slot="drawer">
        <vaadin-tab>
          <a href="/">
            <iron-icon icon="vaadin:home"></iron-icon>
            Page 1
          </a>
        </vaadin-tab>
        <vaadin-tab>
          <a href="page2">
            <iron-icon icon="vaadin:list"></iron-icon>
            Page 2
          </a>
        </vaadin-tab>
        <vaadin-tab>
          <a href="page3">
            <iron-icon icon="vaadin:options"></iron-icon>
            Page 3
          </a>
        </vaadin-tab>
      </vaadin-tabs>
      <slot></slot>
    </vaadin-app-layout>
    `
  }
}

customElements.define('bootstrap-nav',BootstrapNav);

Screen shot of component.
18298570.png

Hello, you need to also import vaadin-drawer-toggle separately:

import '@vaadin/vaadin-app-layout/vaadin-drawer-toggle.js';

I’m not 100% sure what the import '@vaadin/vaadin-app-layout'; import statement actually imports. I’m assuming you might be missing the import for the vaadin-drawer-toggle element.

Edit: Serhii, beat me to it :slight_smile: