asb_cloud_front/src/pages/Well.jsx

import {Layout, Menu} from "antd";
import {FolderOutlined, FundViewOutlined} from "@ant-design/icons";
import {Link, Redirect, Route, Switch, useParams} from "react-router-dom";
import Files from "../pages/Files";
import Archive from "../pages/Archive";
import Messages from "../pages/Messages";
import Report from "../pages/Report";
import Analysis from "../pages/Analysis";
import WellAnalysis from "../pages/WellAnalysis";
import TelemetryView from "../pages/TelemetryView";
import MenuDocuments from "../components/MenuDocuments";

const { Content } = Layout

export default function Well() {
  let { id } = useParams()
  const rootPath = `/well/${id}`

  const {SubMenu} = Menu

  return (<>
    <Layout>
      <Menu
        mode="horizontal"
        selectable={true}
        className="well_menu"
      >
        <Menu.Item key="1" icon={<FundViewOutlined/>}>
          <Link to={{pathname: `${rootPath}/telemetry`}}>Мониторинг</Link>
        </Menu.Item>
        <Menu.Item key="2" icon={<FolderOutlined/>}>
          <Link to={{pathname: `${rootPath}/message`}}>Сообщения</Link>
        </Menu.Item>
        <Menu.Item key="3" icon={<FolderOutlined/>}>
          <Link to={{pathname: `${rootPath}/report`}}>Рапорт</Link>
        </Menu.Item>
        <Menu.Item key="4" icon={<FolderOutlined/>}>
          <Link to={{pathname: `${rootPath}/analysis`}}>Анализ</Link>
        </Menu.Item>
        <Menu.Item key="5" icon={<FolderOutlined/>}>
          <Link to={{pathname: `${rootPath}/wellAnalysis`}}>Операции по скважине</Link>
        </Menu.Item>
        <Menu.Item key="6" icon={<FolderOutlined/>}>
          <Link to={{pathname: `${rootPath}/file`}}>Файлы</Link>
        </Menu.Item>
        <Menu.Item key="7" icon={<FolderOutlined/>}>
          <Link to={{pathname: `${rootPath}/archive`}}>Архив</Link>
        </Menu.Item>
        <SubMenu
            key="documentsSub"
            title={<span className="linkDocuments">Документы</span>}
            icon={<FolderOutlined/>}
            selectable={true}
          >
            <Menu.Item key="documentsSub1" icon={<FolderOutlined/>}>
              <Link to={{pathname: `${rootPath}/documents/fluidService`}}>Растворный сервис</Link>
            </Menu.Item>
            <Menu.Item key="documentsSub1.1" icon={<FolderOutlined/>}>
              <Link to={{pathname: `${rootPath}/documents/cementing`}}>Цементирование</Link>
            </Menu.Item>
            <Menu.Item key="documentsSub1.2" icon={<FolderOutlined/>}>
              <Link to={{pathname: `${rootPath}/documents/nnb`}}>ННБ</Link>
            </Menu.Item>
            <Menu.Item key="documentsSub1.3" icon={<FolderOutlined/>}>
              <Link to={{pathname: `${rootPath}/documents/gti`}}>ГТИ</Link>
            </Menu.Item>
            <Menu.Item key="documentsSub1.4" icon={<FolderOutlined/>}>
              <Link to={{pathname: `${rootPath}/documents/documentsForWell`}}>Документы по скважине</Link>
            </Menu.Item>
            <Menu.Item key="documentsSub1.5" icon={<FolderOutlined/>}>
              <Link to={{pathname: `${rootPath}/documents/supervisor`}}>Супервайзер</Link>
            </Menu.Item>
            <Menu.Item key="documentsSub1.6" icon={<FolderOutlined/>}>
              <Link to={{pathname: `${rootPath}/documents/master`}}>Мастер</Link>
            </Menu.Item>
            <Menu.Item key="documentsSub1.7" icon={<FolderOutlined/>}>
              <Link to={{pathname: `${rootPath}/documents/lastData`}}>Последние данные</Link>
            </Menu.Item>
          </SubMenu>
      </Menu>

      <Layout>
        <Content className="site-layout-background">
          <Switch>
            <Route path="/well/:id/file">
              <Files/>
            </Route>
            <Route path="/well/:id/archive">
              <Archive/>
            </Route>
            <Route path="/well/:id/message">
              <Messages/>
            </Route>
            <Route path="/well/:id/report">
              <Report/>
            </Route>
            <Route path="/well/:id/analysis">
              <Analysis/>
            </Route>
            <Route path="/well/:id/wellAnalysis">
              <WellAnalysis/>
            </Route>
            <Route path="/well/:id/telemetry">
              <TelemetryView/>
            </Route>
            <Route path="/well/:id/documents">
              <MenuDocuments/>
            </Route>
            <Route path="/">
              <Redirect to={{pathname: `${rootPath}/telemetry`}}/>
            </Route>
          </Switch>
        </Content>
      </Layout>
    </Layout>
  </>)
}