Added button to minimize and expand left side menu

NYCPlanning · Mar 28, 2024 · b91f04f · b91f04f
1 parent 41c5b37
commit b91f04f
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 12 deletions.
diff --git a/app/controllers/application.js b/app/controllers/application.js
@@ -4,6 +4,7 @@ import { computed, action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import QueryParams from '@nycplanning/ember-parachute';
 import config from 'labs-zola/config/environment';
+import { tracked } from '@glimmer/tracking';
 
 const {
   defaultLayerGroupState,
@@ -87,6 +88,8 @@ export default class ApplicationController extends Controller.extend(
 
   @service mainMap;
 
+  @tracked leftSideMenuVisibilty = true;
+
   // this action extracts query-param-friendly state of layer groups
   // for various paramable layers
   @action
@@ -112,4 +115,10 @@ export default class ApplicationController extends Controller.extend(
     const values = Object.values(state);
     return values.every(({ changed }) => changed === false);
   }
+
+  @action
+  toggleLeftSideMenuVisibility() {
+    this.leftSideMenuVisibilty = !this.leftSideMenuVisibilty;
+    console.log('new layer visibility', this.leftSideMenuVisibilty);
+  }
 }
diff --git a/app/styles/layouts/_l-default.scss b/app/styles/layouts/_l-default.scss
@@ -214,6 +214,51 @@ 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(3);
+      // box-shadow: -4px 4px 0 rgba(0,0,0,0.1);
+    }
+    @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,17 +31,19 @@
           @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}}
-          @handleLayerGroupChange={{action this.handleLayerGroupChange}}
-        />
+        {{#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}}
+            @handleLayerGroupChange={{action this.handleLayerGroupChange}}
+          />
+        {{/if}}
       </div>
     </div>
     {{outlet}}