Как совместить Top App Bar и Drawer? - PullRequest
Новая
       29

Как совместить Top App Bar и Drawer?

0 голосов
/ 03 июня 2018

Я пытаюсь разместить Top App Bar рядом с Drawer like Drawer и Top App Bar демо, и оно выглядит не так, как ожидалось:

enter image description here

Код выглядит (я использую реагирование): 

<div className="content">
  <aside className="mdc-drawer mdc-drawer--permanent mdc-typography">
    <nav className="mdc-drawer__drawer">
      <header className="mdc-drawer__header">
        <div className="mdc-drawer__header-content">
        {ReasonReact.string("Header")}
        </div>
      </header>
      <nav id="icon-with-text-demo" className="mdc-drawer__content mdc-list">
        <a className="mdc-list-item mdc-list-item--activated" href="#">
          <i className="material-icons mdc-list-item__graphic" ariaHidden=true>{ReasonReact.string("inbox")}</i>{ReasonReact.string("Inbox")}
        </a>
        <a className="mdc-list-item" href="#">
          <i className="material-icons mdc-list-item__graphic" ariaHidden=true>{ReasonReact.string("star")}</i>{ReasonReact.string("Star")}
        </a>
      </nav>
    </nav>
  </aside>
  <div className="mdc-top-app-bar mdc-top-app-bar--fixed">
    <div className="mdc-top-app-bar__row">
      <section className="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
        <a href="#" className="material-icons mdc-top-app-bar__navigation-icon">{ReasonReact.string("menu")}</a>
        <span className="mdc-top-app-bar__title">{ReasonReact.string("Title")}</span>
      </section>
    </div>
  </div>
</div>

Стиль класса content: 

@import "~material-design-icons/iconfont/material-icons.css";
@import "~@material/top-app-bar/mdc-top-app-bar.scss";
@import "~@material/drawer/mdc-drawer.scss";

.content {
  display: inline-flex;
  height: 100%;
}

и далее стиль: 

@import "./App/scss/app.scss";

* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
}

#root {
  display: block;
  height: 100%;
}

Корень является точкой входа реакции.

Вопрос в том, что мне нужно сделать, чтобы получить желаемый результат.

...