Merge pull request #145 from Vizzuality/SKY30-199-m-8-lock-the-displa…

…y-of-the [SKY30-199] sticks location selector and adds scroll to sidebar
Vizzuality · Jan 24, 2024 · 5d6b444 · 5d6b444
2 parents 957d77c + b578395
commit 5d6b444
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 13 deletions.
diff --git a/frontend/src/containers/map/sidebar/details/index.tsx b/frontend/src/containers/map/sidebar/details/index.tsx
@@ -22,19 +22,26 @@ const SidebarDetails: React.FC = () => {
 
   return (
     <>
-      <div className="h-full w-full overflow-y-scroll border-x border-black pb-12">
-        <div className="border-b border-black px-4 pt-4 pb-2 md:px-8">
+      <div className="h-full w-full border-x border-black">
+        <div className="sticky border-b border-black px-4 pt-4 pb-2 md:px-8">
           <h1 className="text-5xl font-black">{locationsData.data[0]?.attributes?.name}</h1>
           <LocationSelector className="my-2" />
         </div>
-        <DetailsWidgets />
-      </div>
-      <div
-        className={cn('absolute bottom-0 left-px', {
-          'right-px': !showDetails,
-        })}
-      >
-        <DetailsButton />
+        <div
+          className={cn({
+            'h-[calc(100%-161px)] overflow-y-auto': true,
+            'h-full': showDetails,
+          })}
+        >
+          <DetailsWidgets />
+        </div>
+        <div
+          className={cn('absolute bottom-0 left-px ', {
+            'right-px': !showDetails,
+          })}
+        >
+          <DetailsButton />
+        </div>
       </div>
     </>
   );

diff --git a/frontend/src/containers/map/sidebar/details/widgets/index.tsx b/frontend/src/containers/map/sidebar/details/widgets/index.tsx
@@ -1,25 +1,34 @@
 import { useRouter } from 'next/router';
 
+import { useSyncMapContentSettings } from '@/containers/map/sync-settings';
+import { cn } from '@/lib/classnames';
 import { useGetLocations } from '@/types/generated/location';
 
 import EstablishmentStagesWidget from './establishment-stages';
 import HabitatWidget from './habitat';
 import MarineConservationWidget from './marine-conservation';
 import ProtectionTypesWidget from './protection-types';
 
-const MapWidgets: React.FC = () => {
+const DetailsWidgets: React.FC = () => {
   const {
     query: { locationCode },
   } = useRouter();
 
+  const [{ showDetails }] = useSyncMapContentSettings();
+
   const { data: locationsData } = useGetLocations({
     filters: {
       code: locationCode,
     },
   });
 
   return (
-    <div className="flex flex-col divide-y-[1px] divide-black font-mono">
+    <div
+      className={cn({
+        'flex flex-col divide-y-[1px] divide-black font-mono': true,
+        'pb-40': showDetails,
+      })}
+    >
       <MarineConservationWidget location={locationsData?.data[0]?.attributes} />
       <ProtectionTypesWidget location={locationsData?.data[0]?.attributes} />
       <EstablishmentStagesWidget location={locationsData?.data[0]?.attributes} />
@@ -28,4 +37,4 @@ const MapWidgets: React.FC = () => {
   );
 };
 
-export default MapWidgets;
+export default DetailsWidgets;