javascript - React 中的滑动菜单

Question

我想在 React 中创建一个文件分隔符样式的菜单。我对 css 不是很熟悉，所以我需要一个起点。我发现了很多这样的菜单组件，但它们都是整页的。

我不明白如何创建组件的形状，如果它是一个简单的矩形就可以，但形状是矩形加上按钮，我不知道如何管理它。

它看起来像这样:

点击“过滤器菜单”后，它将滑入 View :

Answer 1

这样试试

.menu-container {
  display: inline-block;
  position: fixed;
  top: 30%;
  left: 0;
}
.menu-body {
  display: inline-block;
  height: 200px;
  width: 100px;
  border: 1px solid black;
}
.activate-button {
  display: inline-block;
  height: 50px;
  width: 20px;
  border: 1px solid black;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  vertical-align: top;
}

<div>
  <div class="menu-container">
    <div class="menu-body">
      
    </div>
    <div class="activate-button">
      
    </div>
  </div>
<div>