Merge pull request #1186 from NYCPlanning/DH3-collapse-sidebar

DH3 Hide Sidebar
NYCPlanning · May 8, 2024 · 5e7b3da · 5e7b3da
2 parents 00c1d7e + 06a08c6
commit 5e7b3da
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 21 deletions.
diff --git a/app/components/main-map.js b/app/components/main-map.js
@@ -54,7 +54,7 @@ export default class MainMap extends Component {
 
   highlightedLayerId = null;
 
-  widowResize() {
+  windowResize() {
     return new Promise((resolve) => {
       setTimeout(() => {
         const resizeEvent = window.document.createEvent('UIEvents');
@@ -273,6 +273,6 @@ export default class MainMap extends Component {
 
     this.set('printSvc.enabled', true);
 
-    await this.widowResize();
+    await this.windowResize();
   }
 }
diff --git a/app/components/print-view-controls.js b/app/components/print-view-controls.js
@@ -9,7 +9,7 @@ export default class PrintViewControls extends Component {
 
   @service metrics;
 
-  widowResize() {
+  windowResize() {
     return new Promise((resolve) => {
       setTimeout(() => {
         const resizeEvent = window.document.createEvent('UIEvents');
@@ -35,10 +35,10 @@ export default class PrintViewControls extends Component {
 
     this.set('printSvc.enabled', false);
 
-    await this.widowResize();
+    await this.windowResize();
   }
 
   async click() {
-    await this.widowResize();
+    await this.windowResize();
   }
 }
diff --git a/app/controllers/application.js b/app/controllers/application.js
@@ -90,8 +90,21 @@ export default class ApplicationController extends Controller.extend(
 
   @service metrics;
 
+  @tracked leftSideMenuVisibilty = true;
+
   @tracked layerGroupsStorage;
 
+  windowResize() {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        const resizeEvent = window.document.createEvent('UIEvents');
+        resizeEvent.initUIEvent('resize', true, false, window, 0);
+        window.dispatchEvent(resizeEvent);
+        resolve();
+      }, 1);
+    });
+  }
+
   // this action extracts query-param-friendly state of layer groups
   // for various paramable layers
   @action
@@ -186,4 +199,28 @@ export default class ApplicationController extends Controller.extend(
     const values = Object.values(state);
     return values.every(({ changed }) => changed === false);
   }
+
+  @action
+  async toggleLeftSideMenuVisibility() {
+    this.leftSideMenuVisibilty = !this.leftSideMenuVisibilty;
+
+    const mapContainer = document.querySelector('.map-container');
+
+    if (this.leftSideMenuVisibilty)
+      mapContainer.setAttribute('class', 'map-container');
+    else mapContainer.setAttribute('class', 'map-container full-width');
+
+    await this.windowResize();
+
+    this.metrics.trackEvent('MatomoTagManager', {
+      category: 'Toggled Layer Menu Visibility',
+      action: 'Toggled Layer Menu Visibility',
+      name: `${this.leftSideMenuVisibilty ? 'Opened' : 'Closed'}`,
+    });
+
+    gtag('event', 'toggle_menu', {
+      event_category: 'Toggled Layer Menu Visibility',
+      event_action: `${this.leftSideMenuVisibilty ? 'Opened' : 'Closed'}`,
+    });
+  }
 }
diff --git a/app/styles/layouts/_l-default.scss b/app/styles/layouts/_l-default.scss
@@ -95,6 +95,11 @@ body {
   @include breakpoint(xlarge) {
     width: calc(100% - 18rem);
   }
+
+  &.full-width {
+      width: 100%;
+  }
+
 }
 
 body.index {
@@ -193,7 +198,7 @@ body.index {
     );
   }
 
-  & > .close-button {
+  & .close-button {
     position: relative;
     margin: 0;
 
@@ -214,6 +219,50 @@ body.index {
   }
 }
 
+.content-toggle-layer-palette-container {
+  position: relative;
+  z-index: 3;
+  box-shadow: 0 2px 0 rgba(0,0,0,0.1);
+  background-color: $white;
+  text-align: left;
+
+  @include breakpoint(small down) {
+    display: none;
+  }
+
+  @include breakpoint(medium down) {
+    @include xy-cell(
+      $size: full,
+      $output: (base size),
+      $gutters: 0
+    );
+  }
+
+  & > .close-button {
+    position: relative;
+    margin: 0;
+    max-inline-size: max-content;
+    border: 2px solid rgba(0,0,0,0.25);
+    border-left: none;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+
+    @include breakpoint(large) {
+      display: block;
+      position: fixed;
+      z-index: 3;
+      top: 50%;
+      left: 18rem;
+      background-color: $white;
+      margin-left: -4px;
+      padding: 0 rem-calc(6) rem-calc(6);
+    }
+    @include breakpoint(xxlarge) {
+      left: 18rem;
+    }
+  }
+}
+
 .content-is-closed {
 
   .navigation-area {

diff --git a/app/styles/layouts/_l-print.scss b/app/styles/layouts/_l-print.scss
@@ -154,6 +154,7 @@
     // --------------------------------------------------
     .hide-for-print, // Hide everything that doesn't print
     .content-close-button-container,
+    .content-toggle-layer-palette-container,
     .layer-groups-container:not(.has-active-layer-groups),
     .layer-groups-container:not(.open),
     .layer-groups-container-title > .badge,

diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -8,7 +8,17 @@
   {{/if}}
   <div class="site-main grid-x {{this.printSvc.printViewClasses}}">
     <div class="navigation-area cell large-auto">
-      <MapResourceSearch />
+
+      {{#if this.leftSideMenuVisibilty}}
+        <MapResourceSearch />
+      {{/if}}
+
+      <div class="content-toggle-layer-palette-container">
+        <span aria-hidden="true" class="close-button" onclick={{action this.toggleLeftSideMenuVisibility}} style={{if this.leftSideMenuVisibilty "" "left: 0;"}}>
+          {{#if this.leftSideMenuVisibilty}}&lt;{{else}}&gt;{{/if}}
+        </span>
+      </div>
+
       <div class="map-grid">
         <Mapbox::LoadSpinner
           @map={{this.mainMap.mapInstance}}
@@ -21,20 +31,22 @@
           @onPrint={{action (mut this.printSvc.enabled) true}}
         />
 
-        <LayerPalette
-          @selectedZoning={{this.selectedZoning}}
-          @selectedOverlays={{this.selectedOverlays}}
-          @selectedFirm={{this.selectedFirm}}
-          @selectedPfirm={{this.selectedPfirm}}
-          @selectedCouncilDistricts={{this.selectedCouncilDistricts}}
-          @layerGroups={{this.model.layerGroupsObject}}
-          @isDefault={{this.isDefault}}
-          @resetQueryParams={{action this.setModelsToDefault}}
-          @setAllLayerVisibilityToFalse={{action this.setAllLayerVisibilityToFalse}}
-          @undoSetAllLayerVisibilityToFalse={{action this.undoSetAllLayerVisibilityToFalse}}
-          @handleLayerGroupChange={{action this.handleLayerGroupChange}}
-          @showToggleLayersBackOn={{this.showToggleLayersBackOn}}
-        />
+        {{#if this.leftSideMenuVisibilty}}
+          <LayerPalette
+            @selectedZoning={{this.selectedZoning}}
+            @selectedOverlays={{this.selectedOverlays}}
+            @selectedFirm={{this.selectedFirm}}
+            @selectedPfirm={{this.selectedPfirm}}
+            @selectedCouncilDistricts={{this.selectedCouncilDistricts}}
+            @layerGroups={{this.model.layerGroupsObject}}
+            @isDefault={{this.isDefault}}
+            @resetQueryParams={{action this.setModelsToDefault}}
+            @setAllLayerVisibilityToFalse={{action this.setAllLayerVisibilityToFalse}}
+            @undoSetAllLayerVisibilityToFalse={{action this.undoSetAllLayerVisibilityToFalse}}
+            @handleLayerGroupChange={{action this.handleLayerGroupChange}}
+            @showToggleLayersBackOn={{this.showToggleLayersBackOn}}
+          />
+        {{/if}}
       </div>
     </div>
     {{outlet}}