Structuring Material Web Components with LitElement

Question

I do have a problem in structuring my custom lit-element components using material-web-components. Even if I do give them the necessary sass/css classes, they stack e.g. below each other..

I do want to use a top-bar and a expandable drawer. but the content seems to always render in the top left corner :/

Problem: https://i.stack.imgur.com/RzVg1.jpg

can anyone help me? :/

App:

import { css, customElement, html, LitElement, property, unsafeCSS } from 'lit-element';
import { router } from '@fhms-wi/router';

const componentCSS = require('./app.component.scss');

@customElement('app-root')
class AppComponent extends LitElement {
  static styles = css`${unsafeCSS(componentCSS)}`;

  @property()
  title = 'Ticket-System';

  @property()
  headerItems = [
    { title: 'Anmelden', icon: 'sign-in', routePath: 'users/sign-in' },
    { title: 'Konto erstellen', icon: 'sign-up', routePath: 'users/sign-up' }
  ];

  @property()
  drawerItems = [
    { title: 'Tickets', icon: 'tickets', routePath: 'tickets' },
    { title: 'Tickets2', icon: 'tickets', routePath: 'tickets' },
    { title: 'Tickets3', icon: 'tickets', routePath: 'tickets' },
    { title: 'Demo-List', icon: 'tickets', routePath: 'demo-list' }
  ]

  firstUpdated() {
    router.subscribe(path => this.requestUpdate());
  }

  renderRouterOutlet() {
    switch (router.getPath()) {
      case 'users/sign-in':
        return html`<app-sign-in></app-sign-in>`;
      case 'users/sign-up':
        return html`<app-sign-up></app-sign-up>`;
      case 'tickets':
        return html`<app-tickets></app-tickets>`;
      case 'demo-list':
        return html`<demo-list></demo-list>`;
      default:
        return html`<app-tickets></app-tickets>`;
    }
  }

  render() {
    return html`
      <app-header title="${this.title}" .headerItems=${this.headerItems}>
      </app-header>
      <div class="main">
        ${this.renderRouterOutlet()}
      </div>
      <app-drawer .drawerItems=${this.drawerItems}></app-drawer>
      `;
  }

}

Drawer:

import { css, customElement, html, LitElement, property, unsafeCSS } from 'lit-element';
import { MDCList } from '@material/list';

const componentCSS = require('./drawer.component.scss');


@customElement('app-drawer')
class DrawerComponent extends LitElement {
  @property()
  title = '';

  @property()
  drawerItems: Array<{ title: string, icon: string, routePath: string }> = [];

  static styles = css`${unsafeCSS(componentCSS)}`;

  render() {
    return html`
        <aside class="mdc-drawer">
          <div class="mdc-drawer__header">
            <svg class="shrine-logo-drawer" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
              width="48px" height="48px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#000000" focusable="false">
              <g>
                <g>
                  <path d="M17,2H7L2,6.62L12,22L22,6.62L17,2z M16.5,3.58l3.16,2.92H16.5V3.58z M7.59,3.5H15v3H4.34L7.59,3.5z
                    M11.25,18.1L7.94,13h3.31V18.1z M11.25,11.5H6.96L4.69,8h6.56V11.5z M16.5,12.32 M12.75,18.09V8h6.56L12.75,18.09z"/>
                </g>
                <rect fill="none" width="24" height="24"/>
              </g>
            </svg>
            <h1 class="shrine-title">TROPPUS</h1>
          </div>
          <div class="mdc-drawer__content">
            <nav class="mdc-list">
            ${this.drawerItems.map((drawItem) => html`
              <a class="mdc-list-item mdc-list-item--activated" aria-selected="true" tabindex=0 href="${drawItem.routePath}" aria-current="page">
                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">icon</i>
                <span class="mdc-list-item__text">${drawItem.title}</span>
              </a>
              `)}
            </nav>
          </div>
        </aside>       
        `;
  }
}

Content

import { css, customElement, html, LitElement, property, unsafeCSS } from 'lit-element';
const componentCSS = require('./demo-list.component.scss');

@customElement('demo-list')
class DemoList extends LitElement {
    static styles = css`${unsafeCSS(componentCSS)}`;

    render() {
        return html`
        <h1>414</h1>
        <h1>1515</h1>
        <h1>123</h1>
        <ul class="mdc-image-list product-list">
            <li class="mdc-image-list__item">
                <img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
                <div class="mdc-image-list__supporting">
                <span class="mdc-image-list__label">Weave keyring</span>
                </div>
            </li>
        </ul>
        `;
    }
}

Top-Bar

import { css, customElement, html, LitElement, property, unsafeCSS } from 'lit-element';

const componentCSS = require('./header.component.scss');

@customElement('app-header')
class HeaderComponent extends LitElement {
  @property()
  title = '';

  @property()
  headerItems: Array<{title: string, icon: string, routePath: string}> = [];

  static styles = css`${unsafeCSS(componentCSS)}`;

  render() {
    return html`
    <header class="mdc-top-app-bar">
      <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
          <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
          <span class="mdc-top-app-bar__title">${this.title}</span>
        </section>
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
          ${this.headerItems.map((headerItem) => html`
            <a href="${headerItem.routePath}" class="material-icons mdc-top-app-bar__action-item" aria-label="${headerItem.title}">${headerItem.icon}</a>
          `)}
        </section>
      </div>
    </header>
    `;
  }  
}