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,6 +112,8 @@ export const MapComponent = () => {
 
   return (
     <MapProvider>
+      <div className={"w-screen h-screen relative flex overflow-hidden"}>
+        <Header />
         <Sidebar isCollapsed={isSidebarCollapsed} ref={sidebarRef} />
         <div className="flex-1 h-screen flex flex-col ">
           <div
@@ -152,8 +154,6 @@ export const MapComponent = () => {
                 />
               )}
 
-            <MapHeader isSidebarCollapsed={isSidebarCollapsed} />
-
               <SidebarControl toggleCollapse={toggleCollapseSidebar} />
 
               <Basemap />
@@ -168,6 +168,7 @@ export const MapComponent = () => {
             <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]}