3 files changed, 20 insertions, 1 deletions

diff --git a/ui/imports/ui/components/environment/environment.html b/ui/imports/ui/components/environment/environment.html
index 84bafdf..96bc48c 100644
--- a/ui/imports/ui/components/environment/environment.html
+++ b/ui/imports/ui/components/environment/environment.html
@@ -11,7 +11,7 @@
 <template name="Environment">
   
   <div class="sm-environment-container flex-box justify-content-between">
-    <div class="flex-box-1 site-sidenav">
+    <div class="sm-site-sidenav site-sidenav {{#if (getState 'collapsedSideMenu')}}collapsed{{/if}}">
       {{#if isLoaded }}
         {{> accordionNavMenu (argsNavMenu envName mainNode) }}
       {{/if }}
diff --git a/ui/imports/ui/components/environment/environment.js b/ui/imports/ui/components/environment/environment.js
index 6dc4a82..83574f2 100644
--- a/ui/imports/ui/components/environment/environment.js
+++ b/ui/imports/ui/components/environment/environment.js
@@ -87,13 +87,17 @@ var nodeTypesForSelection = [
 Template.Environment.onCreated(function () {
   var instance = this;
 
+  instance.collapsedSideMenu = false;
+
   // reactive state
   instance.state = new ReactiveDict();
   instance.state.setDefault({
     graphTooltipWindow: { label: '', title: '', left: 0, top: 0, show: false },
     vedgeInfoWindow: { node: null, left: 0, top: 0, show: false },
     dashboardName: 'environment',
+    collapsedSideMenu: instance.collapsedSideMenu,
   });
+
   instance.currentData = new ReactiveVar(null, EJSON.equals);
   instance.onNodeOpeningDone = _.debounce(() => {
     scrollTreeToLastOpenedChild(instance);
@@ -306,6 +310,12 @@ Template.Environment.helpers({
       onScrollToNodePerformed: instance._fns.onScrollToNodePerformed,
       onOpenLinkReq: instance._fns.onOpenLinkReq,
       onResetNeedChildDetection: instance._fns.onResetNeedChildDetection,
+      onToggleMenu: function () {
+        instance.collapsedSideMenu = !instance.collapsedSideMenu;
+        instance.state.set('collapsedSideMenu', 
+          instance.collapsedSideMenu);
+      },
+      showCollapsed: instance.state.get('collapsedSideMenu'),
     };
   },
 
diff --git a/ui/imports/ui/components/environment/environment.styl b/ui/imports/ui/components/environment/environment.styl
index b2ccf94..dc27015 100644
--- a/ui/imports/ui/components/environment/environment.styl
+++ b/ui/imports/ui/components/environment/environment.styl
@@ -1,5 +1,14 @@
 .sm-environment-container 
 
+  .sm-site-sidenav
+    transition: 0.5s width;
+    min-width: initial;
+    max-width: initial;
+
+    &.collapsed
+      width: 30px;
+      overflow: hidden;
+
   .sm-node-no-graph-data-msg
     display: flex;
     flex-flow: column nowrap;