необходимо свернуть навигационную панель, когда пользователь нажимает на содержимое экрана реагирует путь SVG - PullRequest
Новая
       6

необходимо свернуть навигационную панель, когда пользователь нажимает на содержимое экрана реагирует путь SVG

0 голосов
/ 23 ноября 2018

Так что меня попросили заставить эту кнопку гамбургера свернуть, когда пользователь нажимает на содержимое внутри экрана, однако это не навигационная панель начальной загрузки, чтобы просто иметь data-toggle = "collapse", мне интересно, как яможет сделать это с помощью следующего кода: 

    <Container fluid className="toolbar">

    <svg
      width="111px"
      height="111px"
      className="menuSvg"
      xmlns=""
      onClick={toggleSidebar}
    >
      <path
        d=""
        fill={burgerColor}
        stroke={burgerColor}
        strokeWidth="1"
      />
    </svg>
    <div className="logobuton"}>
      <Logo logoColor={logo} />
    </div>

и функции панели переключения (которую мне нужно использовать, когда пользователь нажимает на содержимое страницы и активна боковая панель) 

      toggleSidebar = () => {
this.setState(
  prevState => ({
    sidebarIsOpen: !prevState.sidebarIsOpen
  }),
  () => {
    if (this.state.sidebarIsOpen) {
      return document.body.style.overflowY === "hidden";
    } else return null;
  }
);

};

В настоящее время, чтобы скрыть активную боковую панель, мне нужно снова нажать ту же кнопку (верхняя часть LEFT), что не очень удобно для пользователя.Есть идеи, как я могу это изменить?

1 Ответ

0 голосов
/ 23 ноября 2018

На самом деле, вы можете использовать для этого хитрость CSS: поместите тег input и напишите для него CSS, чтобы переключать все, что вы хотите. 

input {
  display: none;
}

input:checked ~ span {
  color: red;
}

span {
  color: blue;
  cursor: pointer;
}
<label>
  <input type="checkbox" />
  <span>Click me to toggle red/blue color<span>
</label>

Помните, верхние коды являются примером использования действия CSS, я не знаю всех ваших кодов.Но когда вы можете использовать CSS, почему вы вставляете код JavaScript?

...