SidePanel

() => {
  const slidesInfo = React.useRef({
    firstSlide: {
      navBlock: {
        label: 'Предыдущая сноска',
      },
      contentBlock: {
        title: 'Пояснительный текст №1',
        content: (
          <>
            <p>
              Идейные соображения высшего порядка, а также начало повседневной
              работы по формированию позиции обеспечивает широкому кругу
              (специалистов) участие в формировании дальнейших направлений
              развития. Равным образом реализация намеченных плановых заданий
              влечет за собой процесс внедрения и модернизации модели
              развития. Значимость этих проблем настолько очевидна, что
              постоянное информационно-пропагандистское обеспечение нашей
              деятельности в значительной степени обуславливает создание
              систем массового участия. Значимость этих проблем настолько
              очевидна, что реализация намеченных плановых заданий требуют
              определения и уточнения направлений прогрессивного развития.
              Идейные соображения высшего порядка, а также постоянное
              информационно-пропагандистское обеспечение нашей деятельности
              способствует подготовки и реализации направлений прогрессивного
              развития.
            </p>
            <p>
              Не следует, однако забывать, что дальнейшее развитие различных
              форм деятельности позволяет выполнять важные задания по
              разработке новых предложений. Разнообразный и богатый опыт
              консультация с широким активом представляет собой интересный
              эксперимент проверки соответствующий условий активизации. Равным
              образом рамки и место обучения кадров позволяет выполнять важные
              задания по разработке систем массового участия.
            </p>
          </>
        ),
      },
    },
    secondSlide: {
      navBlock: {
        label: 'Текущая сноска',
      },
      contentBlock: {
        title: 'Пояснительный текст №2',
        content: (
          <>
            <p>
              Задача организации, в особенности же реализация намеченных
              плановых заданий позволяет оценить значение форм развития. С
              другой стороны рамки и место обучения кадров обеспечивает
              широкому кругу (специалистов) участие в формировании систем
              массового участия. Значимость этих проблем настолько очевидна,
              что дальнейшее развитие различных форм деятельности позволяет
              оценить значение существенных финансовых и административных
              условий. Задача организации, в особенности же консультация с
              широким активом способствует подготовки и реализации модели
              развития. Идейные соображения высшего порядка, а также начало
              повседневной работы по формированию позиции позволяет выполнять
              важные задания по разработке соответствующий условий
              активизации.
            </p>
          </>
        ),
      },
    },
  })
  const [showNextContentSlide, setShowNextContentSlide] = React.useState(
    false,
  )
  const [navLabel, setNavLabel] = React.useState(
    slidesInfo.current.firstSlide.navBlock.label,
  )
  const [contentBlockTitle, setContentBlockTitle] = React.useState(
    slidesInfo.current.firstSlide.contentBlock.title,
  )
  const [contentBlock, setContentBlock] = React.useState(
    slidesInfo.current.firstSlide.contentBlock.content,
  )
  const handleNavBlockClick = () => {
    setShowNextContentSlide(!showNextContentSlide)
  }
  React.useEffect(() => {
    if (showNextContentSlide) {
      setNavLabel(slidesInfo.current.secondSlide.navBlock.label)
      setContentBlockTitle(slidesInfo.current.secondSlide.contentBlock.title)
      setContentBlock(slidesInfo.current.secondSlide.contentBlock.content)
      return
    }
    setNavLabel(slidesInfo.current.firstSlide.navBlock.label)
    setContentBlockTitle(slidesInfo.current.firstSlide.contentBlock.title)
    setContentBlock(slidesInfo.current.firstSlide.contentBlock.content)
  }, [showNextContentSlide])
  return (
    <div style={{ height: 400 }}>
      <SidePanel
        navBlock={
          <SidePanel.NavBlock
            style={{ flexShrink: 0 }}
            navLabel={navLabel}
            onClick={handleNavBlockClick}
          />
        }
        content={
          <SidePanel.ContentBlock
            title={contentBlockTitle}
            content={contentBlock}
          />
        }
        actionsPanel={
          <SidePanel.ActionsPanel
            items={[
              {
                element: (
                  <Button primary icon="export-icon">
                    Экспорт
                  </Button>
                ),
                menuElement: (
                  <List
                    options={[
                      { id: 1, header: 'Экпорт', icon: 'export-icon' },
                    ]}
                  />
                ),
              },
              {
                element: (
                  <Button primary icon="export-icon">
                    Открыть в новой вкладке
                  </Button>
                ),
                menuElement: (
                  <List
                    options={[
                      {
                        id: 1,
                        header: 'Открыть в новой вкладке',
                        icon: 'export-icon',
                      },
                    ]}
                  />
                ),
              },
              {
                element: (
                  <Button primary icon="unpinned-icon">
                    Закрепить статью
                  </Button>
                ),
                menuElement: (
                  <List
                    options={[
                      {
                        id: 1,
                        header: 'Закрепить статью',
                        icon: 'unpinned-icon',
                      },
                    ]}
                  />
                ),
              },
            ]}
            placement="right"
          />
        }
        closeButton={
          <SidePanel.CloseButton style={{ flexShrink: 0 }}>
            Закрыть
          </SidePanel.CloseButton>
        }
      />
    </div>
  )
}

() => {
  const slidesInfo = React.useRef({
    firstSlide: {
      navBlock: {
        label: 'Предыдущая сноска',
      },
      contentBlock: {
        title: 'Пояснительный текст №1',
        content: (
          <>
            <p>
              Идейные соображения высшего порядка, а также начало повседневной
              работы по формированию позиции обеспечивает широкому кругу
              (специалистов) участие в формировании дальнейших направлений
              развития. Равным образом реализация намеченных плановых заданий
              влечет за собой процесс внедрения и модернизации модели
              развития. Значимость этих проблем настолько очевидна, что
              постоянное информационно-пропагандистское обеспечение нашей
              деятельности в значительной степени обуславливает создание
              систем массового участия. Значимость этих проблем настолько
              очевидна, что реализация намеченных плановых заданий требуют
              определения и уточнения направлений прогрессивного развития.
              Идейные соображения высшего порядка, а также постоянное
              информационно-пропагандистское обеспечение нашей деятельности
              способствует подготовки и реализации направлений прогрессивного
              развития.
            </p>
            <p>
              Не следует, однако забывать, что дальнейшее развитие различных
              форм деятельности позволяет выполнять важные задания по
              разработке новых предложений. Разнообразный и богатый опыт
              консультация с широким активом представляет собой интересный
              эксперимент проверки соответствующий условий активизации. Равным
              образом рамки и место обучения кадров позволяет выполнять важные
              задания по разработке систем массового участия.
            </p>
          </>
        ),
      },
    },
    secondSlide: {
      navBlock: {
        label: 'Текущая сноска',
      },
      contentBlock: {
        title: 'Пояснительный текст №2',
        content: (
          <>
            <p>
              Задача организации, в особенности же реализация намеченных
              плановых заданий позволяет оценить значение форм развития. С
              другой стороны рамки и место обучения кадров обеспечивает
              широкому кругу (специалистов) участие в формировании систем
              массового участия. Значимость этих проблем настолько очевидна,
              что дальнейшее развитие различных форм деятельности позволяет
              оценить значение существенных финансовых и административных
              условий. Задача организации, в особенности же консультация с
              широким активом способствует подготовки и реализации модели
              развития. Идейные соображения высшего порядка, а также начало
              повседневной работы по формированию позиции позволяет выполнять
              важные задания по разработке соответствующий условий
              активизации.
            </p>
          </>
        ),
      },
    },
  })
  const [showNextContentSlide, setShowNextContentSlide] = React.useState(
    false,
  )
  const [navLabel, setNavLabel] = React.useState(
    slidesInfo.current.firstSlide.navBlock.label,
  )
  const [contentBlockTitle, setContentBlockTitle] = React.useState(
    slidesInfo.current.firstSlide.contentBlock.title,
  )
  const [contentBlock, setContentBlock] = React.useState(
    slidesInfo.current.firstSlide.contentBlock.content,
  )
  const handleNavBlockClick = () => {
    setShowNextContentSlide(!showNextContentSlide)
  }
  React.useEffect(() => {
    if (showNextContentSlide) {
      setNavLabel(slidesInfo.current.secondSlide.navBlock.label)
      setContentBlockTitle(slidesInfo.current.secondSlide.contentBlock.title)
      setContentBlock(slidesInfo.current.secondSlide.contentBlock.content)
      return
    }
    setNavLabel(slidesInfo.current.firstSlide.navBlock.label)
    setContentBlockTitle(slidesInfo.current.firstSlide.contentBlock.title)
    setContentBlock(slidesInfo.current.firstSlide.contentBlock.content)
  }, [showNextContentSlide])
  return (
    <div style={{ height: 400, width: 531 }}>
      <SidePanel
        navBlock={
          <SidePanel.NavBlock
            navLabel={navLabel}
            onClick={handleNavBlockClick}
          />
        }
        content={
          <SidePanel.ContentBlock
            title={contentBlockTitle}
            content={contentBlock}
          />
        }
        closeButton={<SidePanel.CloseButton>Свернуть</SidePanel.CloseButton>}
      />
    </div>
  )
}