Remove legacy LayerSidebar main window left menu button

MTES-MCT · Sep 10, 2024 · c40f6d9 · c40f6d9
1 parent 3b3b74b
commit c40f6d9
Showing 1 changed file with 26 additions and 67 deletions.
diff --git a/frontend/src/features/LayersSidebar/components/index.tsx b/frontend/src/features/LayersSidebar/components/index.tsx
@@ -1,6 +1,6 @@
 import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
-import { Accent, Icon, IconButton, Size, THEME } from '@mtes-mct/monitor-ui'
+import { THEME } from '@mtes-mct/monitor-ui'
 import { assertNotNullish } from '@utils/assertNotNullish'
 import { useEffect } from 'react'
 import styled from 'styled-components'
@@ -11,8 +11,6 @@ import { AdministrativeZones } from '../../AdministrativeZone/components/Adminis
 import { BaseMaps } from '../../BaseMap/components/BaseMaps'
 import { MapComponent } from '../../commonStyles/MapComponent'
 import { CustomZones } from '../../CustomZone/components/CustomZones'
-import { MapButton } from '../../MainWindow/components/MapButtons/MapButton'
-import { setLeftMapBoxOpened } from '../../MainWindow/slice'
 import { RegulationSearch } from '../../Regulation/components/RegulationSearch'
 import { RegulatoryZoneMetadata } from '../../Regulation/components/RegulatoryZoneMetadata'
 import { RegulatoryZones } from '../../Regulation/components/RegulatoryZones'
@@ -23,10 +21,10 @@ export function LayersSidebar() {
   const regulatoryZoneMetadataPanelIsOpen = useMainAppSelector(
     state => state.regulatory.regulatoryZoneMetadataPanelIsOpen
   )
-  const openedLeftDialog = useMainAppSelector(state => state.mainWindow.openedLeftDialog)
-  assertNotNullish(openedLeftDialog)
   const healthcheckTextWarning = useMainAppSelector(state => state.mainWindow.healthcheckTextWarning)
   const leftMapBoxOpened = useMainAppSelector(state => state.mainWindow.leftMapBoxOpened)
+  const openedLeftDialog = useMainAppSelector(state => state.mainWindow.openedLeftDialog)
+  assertNotNullish(openedLeftDialog)
 
   useEffect(() => {
     if (leftMapBoxOpened !== MapBox.REGULATIONS) {
@@ -37,45 +35,35 @@ export function LayersSidebar() {
   return (
     <NamespaceContext.Consumer>
       {namespace => (
-        <>
-          <SidebarLayersButton>
-            <SidebarLayersIcon
-              $isActive={leftMapBoxOpened === MapBox.REGULATIONS || regulatoryZoneMetadataPanelIsOpen}
-              accent={Accent.PRIMARY}
-              aria-label="Arbre des couches"
-              Icon={Icon.MapLayers}
-              onClick={() =>
-                dispatch(setLeftMapBoxOpened(leftMapBoxOpened === MapBox.REGULATIONS ? undefined : MapBox.REGULATIONS))
-              }
-              size={Size.LARGE}
-              title="Arbre des couches"
-            />
-          </SidebarLayersButton>
-          <Sidebar
-            $isOpen={leftMapBoxOpened === MapBox.REGULATIONS}
-            $isVisible={leftMapBoxOpened === MapBox.REGULATIONS || regulatoryZoneMetadataPanelIsOpen}
-            data-cy="layers-sidebar-box"
+        <Wrapper>
+          <RegulationSearch namespace={namespace} />
+          <Layers $hasHealthcheckTextWarning={!!healthcheckTextWarning.length}>
+            <RegulatoryZones namespace={namespace} />
+            <CustomZones namespace={namespace} />
+            <AdministrativeZones namespace={namespace} />
+            <BaseMaps namespace={namespace} />
+          </Layers>
+          <RegulatoryZoneMetadataShifter
+            $isLeftMapBoxOpened={!!leftMapBoxOpened}
+            $isOpen={regulatoryZoneMetadataPanelIsOpen}
           >
-            <RegulationSearch namespace={namespace} />
-            <Layers $hasHealthcheckTextWarning={!!healthcheckTextWarning.length}>
-              <RegulatoryZones namespace={namespace} />
-              <CustomZones namespace={namespace} />
-              <AdministrativeZones namespace={namespace} />
-              <BaseMaps namespace={namespace} />
-            </Layers>
-            <RegulatoryZoneMetadataShifter
-              $isLeftMapBoxOpened={!!leftMapBoxOpened}
-              $isOpen={regulatoryZoneMetadataPanelIsOpen}
-            >
-              <RegulatoryZoneMetadata />
-            </RegulatoryZoneMetadataShifter>
-          </Sidebar>
-        </>
+            <RegulatoryZoneMetadata />
+          </RegulatoryZoneMetadataShifter>
+        </Wrapper>
       )}
     </NamespaceContext.Consumer>
   )
 }
 
+const Wrapper = styled(MapComponent)`
+  border-radius: 2px;
+  background-color: ${p => p.theme.color.white};
+  left: 64px;
+  position: absolute;
+  transition: all 0.5s;
+  width: 320px;
+`
+
 const RegulatoryZoneMetadataShifter = styled.div<{
   $isLeftMapBoxOpened: boolean
   $isOpen: boolean
@@ -96,39 +84,10 @@ const RegulatoryZoneMetadataShifter = styled.div<{
   transition: all 0.5s;
 `
 
-const Sidebar = styled(MapComponent)<{
-  $isOpen: boolean
-  $isVisible: boolean
-}>`
-  margin-left: ${p => (p.$isOpen ? 0 : '-418px')};
-  opacity: ${p => (p.$isVisible ? 1 : 0)};
-  top: 10px;
-  left: 57px;
-  z-index: 999;
-  border-radius: 2px;
-  position: absolute;
-  display: inline-block;
-  transition: 0.5s all;
-`
-
 const Layers = styled.div<{
   $hasHealthcheckTextWarning: boolean
 }>`
   margin-top: 5px;
   width: 350px;
   max-height: calc(100vh - ${p => (p.$hasHealthcheckTextWarning ? '210px' : '160px')});
 `
-
-const SidebarLayersButton = styled(MapButton)`
-  position: absolute;
-  top: 10px;
-  left: 10px;
-`
-
-const SidebarLayersIcon = styled(IconButton)<{ $isActive: boolean }>`
-  border-radius: 2px;
-  width: 40px;
-  height: 40px;
-  ${p => (p.$isActive ? `background: ${p.theme.color.blueGray};` : '')}
-  ${p => (p.$isActive ? `border-color: ${p.theme.color.blueGray};` : '')}
-`