REF: Where is <vaadin-drawer-toggle> in Vaadin Platform Designer Pallete

Flow
1

I am trying to implement the AppLayout in html and implement and connect it to the Java companion file. I have started

Vaadin Logo Home Cargo Process

The problem I have is the is not available in my pallete and also if i type it in in the code view its not being rendered in the view port.

Any ideas?

Teddy L.

2

Teddy Nyambe:
I am trying to implement the AppLayout in html and implement and connect it to the Java companion file. I have started

Vaadin Logo Home Cargo Process

The problem I have is the is not available in my pallete and also if i type it in in the code view its not being rendered in the view port.

Any ideas?

Teddy L.

Resolved, was using the old version of AppLayout 1.0.1 that comes by defualt with Vaadin Flow 13. I added a separate dependency in my pom for newer version 2.0.1 as follows:

<dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-app-layout-flow</artifactId>
            <version>2.0.1</version>
</dependency>

Thanks

3

Another problem. I have the following declaration for my appLayout:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/vaadin-app-layout/src/vaadin-app-layout.html">
<link rel="import" href="../bower_components/vaadin-tabs/src/vaadin-tabs.html">
<link rel="import" href="../bower_components/vaadin-tabs/src/vaadin-tab.html">
<link rel="import" href="../bower_components/vaadin-app-layout/src/vaadin-drawer-toggle.html">

<dom-module id="main-layout">
    <template>
        <style include="lumo-typography lumo-color">
            :host {
                display: block;
            }
        </style>
        <vaadin-app-layout>
            <vaadin-drawer-toggle slot="navbar"></vaadin-drawer-toggle>
            <img src="../img/GPpnszs.png" alt="Vaadin Logo" width="100" height="31" slot="navbar" referrerpolicy="no-referrer">
            <vaadin-tabs orientation="vertical" style="margin: 0 auto; flex:1;" theme="minimal" slot="drawer">
                <vaadin-tab>
                    Home
                </vaadin-tab>
                <vaadin-tab>
                    Cargo
                </vaadin-tab>
                <vaadin-tab>
                    Process
                </vaadin-tab>
            </vaadin-tabs>
        </vaadin-app-layout>
        <div class="content" style="width: 100%; height: 100%;">
            <h3>Page Title</h3>
            <p>Page Content</p>
        </div>
    </template>

    <script>
        class MainLayout extends Polymer.Element {
            static get is() {
                return 'main-layout';
            }

            static get properties() {
                return {
                    // Declare your properties here.
                };
            }
        }

        customElements.define(MainLayout.is, MainLayout);
    </script>
</dom-module>

My drawer comes by default hidden, how do I make it open when page loads and be side by side with my content DIV? Do i need to stype it or what?