如何结合顶级应用栏和抽屉？

Question

我正在尝试将Top App Bar置于Drawer Drawer and Top App Bar的旁边，看起来并不像预期的那样：

代码看起来像（我正在使用反应）：

<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%;
}  

根是反应的切入点。

问题是，我该怎么做才能获得理想的结果。