WellSelector в заголовке теперь связан с маршрутом.

поправлен его стиль.

src/components/WellTreeSelector.jsx

@@ -65,11 +65,10 @@ export default function WellTreeSelector(props) {
   return (
     <>
       <TreeSelect
-        style={{
-          width: '25%',
-          alignItems: 'center'
-        }}
-        placeholder="Выберите месторождение"
+        className='header-tree-select'
+        bordered={false}
+        dropdownMatchSelectWidth={false}
+        placeholder='Выберите месторождение'
         treeData={wellsTree}
         treeDefaultExpandAll
         onSelect={onSelect}

src/pages/Header.jsx

@@ -6,7 +6,7 @@ import WellTreeSelector from '../components/WellTreeSelector'
 
 const { Header } = Layout
 
-export default function PageHeader(props){
+export default function PageHeader({title='Мониторинг', wellsList}){
   const login = localStorage['login']
 
   let handleLogout = () => {
@@ -18,9 +18,8 @@ export default function PageHeader(props){
     <Layout>
       <Header className="header">
         <img src={logo} alt="АСБ" className="logo"/>
-                <WellTreeSelector />
-                <h1 className="title">Мониторинг</h1>
-                
+        <WellTreeSelector wellsList={wellsList}/>
+        <h1 className="title">{title}</h1>            
         <Link to="/login" onClick={handleLogout}>
           <Button icon={<UserOutlined/>}>            
           ({login}) Выход

src/pages/LayoutPortal.jsx

@@ -0,0 +1,39 @@
+import {Layout} from 'antd'
+import PageHeader from './Header'
+// import { useState, useEffect, createContext} from 'react'
+// import { useParams } from 'react-router-dom'
+
+const {Content} = Layout
+
+export default function LayoutPortal({title, children}) {
+  // const [wells, setWells] = useState([])
+  // let { id } = useParams();
+
+  // let updateWellsList = async () => {
+  //   setLoader(true)
+  //   try {
+  //     let newWells = (await WellService.getWells()).map(w => { return { key: w.id, ...w } })
+  //     setWells(newWells)
+  //   }
+  //   catch (e) {
+  //     console.error(`${e.message}`);
+  //   }
+  //   setLoader(false)
+  // }
+
+  // useEffect(() => {
+  //   updateWellsList()
+  // }, [])
+  
+  // const WellsContext = createContext({wells});
+
+  return (     
+      <Content>
+        <PageHeader title={title}/>
+        <Layout>
+          <Content className="site-layout-background sheet">
+            {children}
+          </Content>
+        </Layout>
+      </Content>)
+}

src/pages/Main.jsx

@@ -1,31 +1,25 @@
-import {Layout} from 'antd'
 import Wells from './Wells'
-import PageHeader from './Header'
 import Well from "../components/Well";
+import LayoutPortal from './LayoutPortal'
 import {Redirect, Route, Switch} from "react-router-dom";
 
-const {Content} = Layout
-
 export default function Main() {
 
   return (
-    <Content>
-      <PageHeader/>
-      <Layout>
-        <Content className="site-layout-background sheet">
     <Switch>
       <Route path="/well/:id/">
+        <LayoutPortal>
           <Well/>
+        </LayoutPortal>
       </Route>
       <Route path="/well">
+        <LayoutPortal>
           <Wells/>
+        </LayoutPortal>
       </Route>
       <Route path="/">
         <Redirect to={{pathname: `/well`}}/>
       </Route>
     </Switch>
-        </Content>
-      </Layout>
-    </Content>
   )
 }

src/styles/App.less

@@ -145,3 +145,18 @@ tr.table_row_size {
   width: 50%;
   margin-right: 5px;
 }
+
+.header-tree-select *{
+  color: #fff;
+  font-size: '1.5rem';
+}
+
+.header-tree-select{
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.header-tree-select:hover{
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  background-color: rgba(0, 0, 0, 0.5);
+}

src/styles/archive_style.css

@@ -1,3 +0,0 @@
-.content-sheet {
-    display: inline-flex;
-}