Make header static

src/Map/Header.jsx

@@ -0,0 +1,21 @@
+import { Logo } from "../icons/Logo";
+import { AddressSearch } from "./AddressSearch";
+import { twMerge } from "tailwind-merge";
+import { ModeSelector } from "../components/ModeSelector";
+
+export const Header = () => {
+  return (
+    <div className="absolute top-[20px] left-[58px] flex items-center z-10">
+      <div className={twMerge("flex items-center gap-x-10")}>
+        <Logo />
+        <div className="flex items-center gap-x-3">
+          <ModeSelector />
+        </div>
+      </div>
+
+      <div className="ml-[93px]">
+        <AddressSearch />
+      </div>
+    </div>
+  );
+};

src/Map/MapComponent.jsx

@@ -23,7 +23,7 @@ import { useTable } from "../stores/useTable";
 import { twMerge } from "tailwind-merge";
 import { useLayersVisibility } from "../stores/useLayersVisibility";
 import { LAYER_IDS } from "./Layers/constants";
-import { MapHeader } from "./MapHeader";
+import { Header } from "./Header";
 
 export const MapComponent = () => {
   const mapRef = useRef(null);
@@ -112,60 +112,61 @@ export const MapComponent = () => {
 
   return (
     <MapProvider>
-      <Sidebar isCollapsed={isSidebarCollapsed} ref={sidebarRef} />
+      <div className={"w-screen h-screen relative flex overflow-hidden"}>
-      <div className="flex-1 h-screen flex flex-col ">
+        <Header />
-        <div
+        <Sidebar isCollapsed={isSidebarCollapsed} ref={sidebarRef} />
-          ref={mapContainerRef}
+        <div className="flex-1 h-screen flex flex-col ">
-          className={twMerge(tableState.fullScreen ? "" : "flex-1")}
+          <div
-        >
+            ref={mapContainerRef}
-          <Map
+            className={twMerge(tableState.fullScreen ? "" : "flex-1")}
-            mapLib={maplibregl}
-            // mapStyle={`https://api.maptiler.com/maps/voyager/style.json?key=${MAP_TILER_KEY}`}
-            // style={{ width: "100%", height: "100%" }}
-            initialViewState={{
-              latitude: 55.7558,
-              longitude: 37.6173,
-              zoom: 9,
-            }}
-            dragRotate={false}
-            ref={mapRef}
-            interactiveLayerIds={[
-              LAYER_IDS["initial-match"],
-              LAYER_IDS["initial-unmatch"],
-              LAYER_IDS.approve,
-              LAYER_IDS.working,
-            ]}
-            onClick={handleClick}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-            id="map"
           >
-            {popup && (
+            <Map
-              <MapPopup
+              mapLib={maplibregl}
-                lat={popup.coordinates[1]}
+              // mapStyle={`https://api.maptiler.com/maps/voyager/style.json?key=${MAP_TILER_KEY}`}
-                lng={popup.coordinates[0]}
+              // style={{ width: "100%", height: "100%" }}
-                features={popup.features}
+              initialViewState={{
-                onClose={() => {
+                latitude: 55.7558,
-                  setPopup(null);
+                longitude: 37.6173,
-                  setClickedPointConfig(null);
+                zoom: 9,
-                }}
+              }}
-              />
+              dragRotate={false}
-            )}
+              ref={mapRef}
-
+              interactiveLayerIds={[
-            <MapHeader isSidebarCollapsed={isSidebarCollapsed} />
+                LAYER_IDS["initial-match"],
-
+                LAYER_IDS["initial-unmatch"],
-            <SidebarControl toggleCollapse={toggleCollapseSidebar} />
+                LAYER_IDS.approve,
-
+                LAYER_IDS.working,
-            <Basemap />
+              ]}
-            <Layers />
+              onClick={handleClick}
-
+              onMouseEnter={handleMouseEnter}
-            <Legend />
+              onMouseLeave={handleMouseLeave}
-            <SignOut />
+              id="map"
-            <LayersControl />
+            >
-          </Map>
+              {popup && (
-        </div>
+                <MapPopup
-        <div className="w-full border-solid border-border border-0 border-t-[1px]">
+                  lat={popup.coordinates[1]}
-          <TableWrapper fullWidth={isSidebarCollapsed} />
+                  lng={popup.coordinates[0]}
+                  features={popup.features}
+                  onClose={() => {
+                    setPopup(null);
+                    setClickedPointConfig(null);
+                  }}
+                />
+              )}
+
+              <SidebarControl toggleCollapse={toggleCollapseSidebar} />
+
+              <Basemap />
+              <Layers />
+
+              <Legend />
+              <SignOut />
+              <LayersControl />
+            </Map>
+          </div>
+          <div className="w-full border-solid border-border border-0 border-t-[1px]">
+            <TableWrapper fullWidth={isSidebarCollapsed} />
+          </div>
         </div>
       </div>
     </MapProvider>

src/Map/MapHeader.jsx

@@ -1,22 +0,0 @@
-import { Logo } from "../icons/Logo";
-import { AddressSearch } from "./AddressSearch";
-import { twMerge } from "tailwind-merge";
-import { ModeSelector } from "../components/ModeSelector";
-
-export const MapHeader = ({ isSidebarCollapsed }) => {
-  return (
-    <div className="absolute top-[20px] left-[30px] flex items-center gap-x-10">
-      <div
-        className={twMerge(
-          "hidden",
-          isSidebarCollapsed && "flex items-center gap-x-3 "
-        )}
-      >
-        <Logo />
-        <ModeSelector />
-      </div>
-
-      <AddressSearch />
-    </div>
-  );
-};

src/config.js

@@ -4,6 +4,7 @@ export const STATUSES = {
   initial: "К рассмотрению",
   approve: "Согласование-установка",
   working: "Работает",
+  cancelled: "Отменено",
 };
 
 export const CATEGORIES = {

src/index.css

@@ -2,10 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-#root {
-  @apply h-screen w-screen flex overflow-hidden;
-}
-
 .mapboxgl-popup,
 .maplibregl-popup {
   @apply max-w-[400px] min-w-[250px];

src/modules/Sidebar/Sidebar.jsx

@@ -5,7 +5,6 @@ import {
 } from "../../stores/usePointSelection";
 import { TakeToWorkButton } from "./InitialSidebar/TakeToWorkButton";
 import { Filters } from "./Filters";
-import { Header } from "./Header";
 import { useMode } from "../../stores/useMode";
 import { MODES } from "../../config";
 import { twMerge } from "tailwind-merge";
@@ -24,12 +23,11 @@ export const Sidebar = forwardRef(({ isCollapsed }, ref) => {
   return (
     <div
       className={twMerge(
-        "h-screen p-3 overflow-y-auto shrink-0 border-solid border-border border-0 border-r-[1px] flex flex-col transition-all",
+        "h-screen p-3 box-content overflow-y-auto shrink-0 border-solid border-border border-0 border-r-[1px] flex flex-col transition-all pt-20",
-        isCollapsed ? "basis-0 p-0 -translate-x-[320px]" : "basis-[320px] p-3"
+        isCollapsed ? "basis-0 px-0 -translate-x-[320px]" : "basis-[320px]"
       )}
       ref={ref}
     >
-      <Header />
       <div className="space-y-5 flex flex-col justify-between flex-1">
         <div>
           <Filters disabled={hasManualEdits} />
@@ -37,7 +35,7 @@ export const Sidebar = forwardRef(({ isCollapsed }, ref) => {
           {mode === MODES.APPROVE_WORKING && (
             <div className="mt-4">
               <Title text="Статусы" />
-              <div className="space-y-2">
+              <div className="flex flex-col space-y-2">
                 <Checkbox
                   onChange={() => toggleVisibility(LAYER_IDS.approve)}
                   checked={isVisible[LAYER_IDS.approve]}