В моих последних нескольких проектах React мне понадобилась простая панель вне холста. Один был для мобильного меню на моем сайте-портфолио, а другой — для веб-приложения, которое я создавал на своей основной работе в лондонском местном органе власти. Функционал этих панелей в обоих проектах был довольно прост. Для мобильной навигации панель открывалась и отображалась на холсте при нажатии меню гамбургера и закрывалась и возвращалась за пределы холста при переходе на другую страницу моего веб-сайта. Веб-приложение, которое я создавал, открывалось при нажатии строки в таблице данных и закрывалось при нажатии кнопки закрытия на панели. Все достаточно просто…

Однако в случае с веб-приложением мне было поручено создать его с помощью системы проектирования Microsoft Fluent UI. Сначала я пытался использовать панельный компонент в дизайн-системе, но чувствовал, что все предоставленные опции были излишними и требовали большого количества стандартного кода для чего-то такого простого. FluentUI также использует Typescript, и я не использовал Typescript в этом проекте, так как это было простое доказательство концептуальной части работы и опять же означало больше шаблонного кода.

В конце концов я создал свой собственный компонент и смог повторно использовать его в проектах. Итак, вот мой код и как я это сделал.

Я начал с создания компонента панели. Этот компонент будет использовать переключатель и свойство события. Свойство toggle просто переключает класс открытия/закрытия элемента. Анимация обрабатывается с помощью CSS.

При использовании панели для мобильной навигации вы хотите, чтобы панель автоматически закрывалась при нажатии ссылки меню на панели, для этого добавьте onClick={togglePanel} к элементу панели.

const Panel = ({ children, toggle, event }) => {
  return (
    <section
    className={`panel ${toggle}`}
        onClick={event}
      >
      {children}
    </section>
  );
};
.panel {
  padding: 15px 15px;
  display: flex;
  flex-flow: column;
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 999;
  background-color: #334050;
  visibility: visibility;
  -moz-transition: right 500ms ease !important;
  -ms-transition: right 500ms ease !important;
  -webkit-transition: right 500ms ease !important;
  -o-transition: right 500ms ease !important;
  transition: right 500ms ease !important;
  box-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1),
    0px 3.2px 7.2px rgba(0, 0, 0, 0.13);
}

.closed {
  right: -100vw;
  z-index: 9999;
}

.open {
  right: 0;
  z-index: 9999;
}

Чтобы использовать панель, мы управляем некоторым простым состоянием в app.js или любом родительском компоненте, в котором мы его используем. Это установит состояние переключения. Изначально он закрыт, поэтому мы присваиваем ему логическое значение false. Затем мы используем простой обработчик событий для запуска события переключения, которое переключает класс элемента панели.

const App = () => {
  const [panel, setPanel] = useState(false);
  const togglePanel = () => setPanel(!panel);
  let toggle = panel ? `open` : `close`;

  const openPanel = () => {
    togglePanel();
  };

  return (
    <Panel toggle={toggle} event={togglePanel}>
      {/* content */}
    </Panel>
  )
}

И это так просто.