Можем ли мы сделать меню React HamBurger постоянным? - PullRequest
Новая
       12

Можем ли мы сделать меню React HamBurger постоянным?

0 голосов
/ 09 февраля 2020

Можно ли сделать меню реагирующего бургера постоянным в левой части экрана?

Я не хочу использовать ящик для материалов. Я хочу сохранить меню гамбургера, но просто изменить его так, чтобы оно было там постоянно.

Вот мой текущий машинописный код: 

const SideBar = () => (
    <Menu>
        <a id="home" className="menu-item" href="/"> <FaHome/> Home</a>
        <a id="about" className="menu-item" href="/about">About</a>
        <a id="contact" className="menu-item" href="/contact">Contact</a>
        <a className="menu-item--small" href="">Settings</a>
      </Menu>
    );

    export default SideBar;

Вот моя боковая панель с файлом стилей. css: 

html,
body {
  margin: 0;
}

#App {
  font-family: sans-serif;
  height: 100vh;
}
#page-wrap {
  text-align: center;
  overflow: auto;
}
.bm-item {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 30px;
  color: #d1d1d1;
  transition: color 0.2s;
}

.bm-item:hover {
  color: white;
}

.bm-burger-button {
  position: fixed;
  width: 36px;
  height: 30px;
  left: 36px;
  top: 36px;
}

.bm-burger-bars {
  background: #373a47;
}

.bm-cross-button {
  height: 24px;
  width: 24px;
}

.bm-cross {
  background: #bdc3c7;
}

.bm-menu {
  background: #373a47;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
}

.bm-morph-shape {
  fill: #373a47;
}

.bm-item-list {
  color: #b8b7ad;
}

.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
}
...