Компонент "Layout"

() => {
  const ContentExample = () => (
    <div style={{ textAlign: 'center' }}>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, quasi?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, quasi?
        Lorem ipsum dolor sit amet.
      </p>
    </div>
  )
  return (
    <Layout>
      <ContentExample />
    </Layout>
  )
}

() => {
  const [isNavVisible, setIsNavVisible] = useState(true)
  const [isSideVisible, setIsSideVisible] = useState(false)
  const ContentExample = useCallback(
    () => (
      <div style={{ textAlign: 'center' }}>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim,
          quasi?
        </p>
        <Button.Group>
          <Button onClick={() => setIsNavVisible(true)}>show nav</Button>
          <Button onClick={() => setIsSideVisible(true)}>show side</Button>
        </Button.Group>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim,
          quasi? Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Laboriosam laborum voluptate voluptatum? Deserunt excepturi illum
          libero natus nostrum, quod. Alias culpa explicabo ipsam perspiciatis
          quasi soluta. Consectetur distinctio eos expedita, fugit id in,
          ipsum laudantium magnam nostrum, odit quos sint?
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim,
          quasi?
        </p>
        <p>
          <img src="//picsum.photos/id/1025/400/800" alt="" />
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim,
          quasi? Lorem ipsum dolor sit amet.
        </p>
      </div>
    ),
    [],
  )
  const NavPanel = useCallback(
    () => (
      <NavigationPanel
        closeButton={
          <NavigationPanel.CloseButton
            text="Закрыть"
            onClick={() => setIsNavVisible(false)}
          />
        }
        logo={<NavigationPanel.Logo src="/public/f5-logo.svg" />}
      >
        <GroupedList
          options={[
            {
              id: 0,
              groupName: 'Monitoring',
              items: [
                {
                  id: 0,
                  header: 'Playground',
                  icon: <GroupedList.Icon name="view-icon" fill="#3B425B" />,
                },
                {
                  id: 1,
                  header: 'Playground settings, API',
                  icon: (
                    <GroupedList.Icon name="configure-icon" fill="#3B425B" />
                  ),
                },
              ],
              separator: 'top',
            },
            {
              id: 1,
              groupName: 'Development',
              items: [
                {
                  id: 0,
                  header: 'Data models',
                  icon: <GroupedList.Icon name="cell-icon" fill="#3B425B" />,
                },
                {
                  id: 1,
                  header: 'Pipeline manager',
                  icon: <GroupedList.Icon name="play-icon" fill="#3B425B" />,
                },
                {
                  id: 2,
                  header: 'Math models',
                  icon: (
                    <GroupedList.Icon name="function-icon" fill="#3B425B" />
                  ),
                },
                {
                  id: 3,
                  header: 'Rules',
                  icon: (
                    <GroupedList.Icon name="warning-icon" fill="#3B425B" />
                  ),
                },
              ],
              separator: 'top',
            },
            {
              id: 2,
              groupName: 'Others',
              items: [
                {
                  id: 0,
                  header: 'Settings',
                  icon: (
                    <GroupedList.Icon
                      name="settings-gear-icon"
                      fill="#3B425B"
                    />
                  ),
                  selected: true,
                },
                {
                  id: 1,
                  header: 'Documentation',
                  icon: <GroupedList.Icon name="book-icon" fill="#3B425B" />,
                },
                {
                  id: 2,
                  header: 'Profile',
                  icon: <GroupedList.Icon name="user-icon" fill="#3B425B" />,
                },
              ],
              separator: 'top',
            },
          ]}
        />
      </NavigationPanel>
    ),
    [],
  )
  const SidebarPanel = () => {
    const info = {
      navBlock: {
        label: 'Предыдущая сноска',
      },
      content: {
        title: 'Пояснительный текст №1',
        content: (
          <>
            <p>
              Идейные соображения высшего порядка, а также начало повседневной
              работы по формированию позиции обеспечивает широкому кругу
              (специалистов) участие в формировании дальнейших направлений
              развития. Равным образом реализация намеченных плановых заданий
              влечет за собой процесс внедрения и модернизации модели
              развития. Значимость этих проблем настолько очевидна, что
              постоянное информационно-пропагандистское обеспечение нашей
              деятельности в значительной степени обуславливает создание
              систем массового участия. Значимость этих проблем настолько
              очевидна, что реализация намеченных плановых заданий требуют
              определения и уточнения направлений прогрессивного развития.
              Идейные соображения высшего порядка, а также постоянное
              информационно-пропагандистское обеспечение нашей деятельности
              способствует подготовки и реализации направлений прогрессивного
              развития.
            </p>
            <p>
              Не следует, однако забывать, что дальнейшее развитие различных
              форм деятельности позволяет выполнять важные задания по
              разработке новых предложений. Разнообразный и богатый опыт
              консультация с широким активом представляет собой интересный
              эксперимент проверки соответствующий условий активизации. Равным
              образом рамки и место обучения кадров позволяет выполнять важные
              задания по разработке систем массового участия.
            </p>
          </>
        ),
      },
    }
    return (
      <SidePanel
        navBlock={
          <SidePanel.NavBlock
            navLabel={info.navBlock.label}
            onClick={() => {}}
          />
        }
        content={
          <SidePanel.ContentBlock
            title={info.content.title}
            content={info.content.content}
          />
        }
        closeButton={
          <SidePanel.CloseButton onClick={() => setIsSideVisible(false)}>
            Свернуть
          </SidePanel.CloseButton>
        }
      />
    )
  }
  return (
    <Layout
      leftPanel={<NavPanel />}
      rightPanel={<SidebarPanel />}
      isLeftVisible={isNavVisible}
      isRightVisible={isSideVisible}
      onOutsideClick={() => {
        setIsNavVisible(false)
        setIsSideVisible(false)
      }}
    >
      <ContentExample />
    </Layout>
  )
}

() => {
  const [isNavVisible, setIsNavVisible] = useState(true)
  const [isSideVisible, setIsSideVisible] = useState(false)
  const ContentExample = useCallback(
    () => (
      <div style={{ textAlign: 'center' }}>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim,
          quasi?
        </p>
        <Button.Group>
          <Button onClick={() => setIsNavVisible(true)}>show nav</Button>
          <Button onClick={() => setIsSideVisible(true)}>show side</Button>
        </Button.Group>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim,
          quasi? Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Laboriosam laborum voluptate voluptatum? Deserunt excepturi illum
          libero natus nostrum, quod. Alias culpa explicabo ipsam perspiciatis
          quasi soluta. Consectetur distinctio eos expedita, fugit id in,
          ipsum laudantium magnam nostrum, odit quos sint?
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim,
          quasi?
        </p>
        <p>
          <img src="//picsum.photos/id/1025/400/800" alt="" />
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim,
          quasi? Lorem ipsum dolor sit amet.
        </p>
      </div>
    ),
    [],
  )
  const NavPanel = useCallback(
    () => (
      <NavigationPanel
        closeButton={
          <NavigationPanel.CloseButton
            text="Закрыть"
            onClick={() => setIsNavVisible(false)}
          />
        }
        logo={<NavigationPanel.Logo src="/public/f5-logo.svg" />}
      >
        <GroupedList
          options={[
            {
              id: 0,
              groupName: 'Monitoring',
              items: [
                {
                  id: 0,
                  header: 'Playground',
                  icon: <GroupedList.Icon name="view-icon" fill="#3B425B" />,
                },
                {
                  id: 1,
                  header: 'Playground settings, API',
                  icon: (
                    <GroupedList.Icon name="configure-icon" fill="#3B425B" />
                  ),
                },
              ],
              separator: 'top',
            },
            {
              id: 1,
              groupName: 'Development',
              items: [
                {
                  id: 0,
                  header: 'Data models',
                  icon: <GroupedList.Icon name="cell-icon" fill="#3B425B" />,
                },
                {
                  id: 1,
                  header: 'Pipeline manager',
                  icon: <GroupedList.Icon name="play-icon" fill="#3B425B" />,
                },
                {
                  id: 2,
                  header: 'Math models',
                  icon: (
                    <GroupedList.Icon name="function-icon" fill="#3B425B" />
                  ),
                },
                {
                  id: 3,
                  header: 'Rules',
                  icon: (
                    <GroupedList.Icon name="warning-icon" fill="#3B425B" />
                  ),
                },
              ],
              separator: 'top',
            },
            {
              id: 2,
              groupName: 'Others',
              items: [
                {
                  id: 0,
                  header: 'Settings',
                  icon: (
                    <GroupedList.Icon
                      name="settings-gear-icon"
                      fill="#3B425B"
                    />
                  ),
                  selected: true,
                },
                {
                  id: 1,
                  header: 'Documentation',
                  icon: <GroupedList.Icon name="book-icon" fill="#3B425B" />,
                },
                {
                  id: 2,
                  header: 'Profile',
                  icon: <GroupedList.Icon name="user-icon" fill="#3B425B" />,
                },
              ],
              separator: 'top',
            },
          ]}
        />
      </NavigationPanel>
    ),
    [],
  )
  const SidebarPanel = () => {
    const info = {
      navBlock: {
        label: 'Предыдущая сноска',
      },
      content: {
        title: 'Пояснительный текст №1',
        content: (
          <>
            <p>
              Идейные соображения высшего порядка, а также начало повседневной
              работы по формированию позиции обеспечивает широкому кругу
              (специалистов) участие в формировании дальнейших направлений
              развития. Равным образом реализация намеченных плановых заданий
              влечет за собой процесс внедрения и модернизации модели
              развития. Значимость этих проблем настолько очевидна, что
              постоянное информационно-пропагандистское обеспечение нашей
              деятельности в значительной степени обуславливает создание
              систем массового участия. Значимость этих проблем настолько
              очевидна, что реализация намеченных плановых заданий требуют
              определения и уточнения направлений прогрессивного развития.
              Идейные соображения высшего порядка, а также постоянное
              информационно-пропагандистское обеспечение нашей деятельности
              способствует подготовки и реализации направлений прогрессивного
              развития.
            </p>
            <p>
              Не следует, однако забывать, что дальнейшее развитие различных
              форм деятельности позволяет выполнять важные задания по
              разработке новых предложений. Разнообразный и богатый опыт
              консультация с широким активом представляет собой интересный
              эксперимент проверки соответствующий условий активизации. Равным
              образом рамки и место обучения кадров позволяет выполнять важные
              задания по разработке систем массового участия.
            </p>
          </>
        ),
      },
    }
    return (
      <SidePanel
        navBlock={
          <SidePanel.NavBlock
            navLabel={info.navBlock.label}
            onClick={() => {}}
          />
        }
        content={
          <SidePanel.ContentBlock
            title={info.content.title}
            content={info.content.content}
          />
        }
        closeButton={
          <SidePanel.CloseButton onClick={() => setIsSideVisible(false)}>
            Свернуть
          </SidePanel.CloseButton>
        }
      />
    )
  }
  return (
    <Layout
      type="fullwidth"
      leftPanel={<NavPanel />}
      rightPanel={<SidebarPanel />}
      isLeftVisible={isNavVisible}
      isRightVisible={isSideVisible}
      onOutsideClick={() => {
        setIsNavVisible(false)
        setIsSideVisible(false)
      }}
    >
      <ContentExample />
    </Layout>
  )
}