#296 Hiding custom tags when the left side nav is collaped

2 files changed, 17 insertions, 3 deletions

diff --git a/web-ui/app/index.html b/web-ui/app/index.html
index 87ab000d..7a8f335f 100644
--- a/web-ui/app/index.html
+++ b/web-ui/app/index.html
@@ -24,7 +24,7 @@
         <img id="pixelated-logo" src="/assets/images/pixelated-logo-orange.svg" alt="Pixelated">
       </a>
       <a class="fake-left-off-canvas-toggle" href="#">
-        <i class=" toggle fa fa-navicon"></i>
+        <i class="toggle fa fa-navicon"></i>
       </a>
       <nav id="tag-list"></nav>
       <nav id="logout"></nav>
@@ -89,8 +89,13 @@ $(document).foundation();
 $('.fake-left-off-canvas-toggle').click(function (ev) {
     ev.preventDefault();
     $('.left-off-canvas-toggle').click();
-    });
+      if ($('#custom-tag-list').hasClass('expanded')) {
+        $('#custom-tag-list').removeClass('expanded'); 
+      } 
+      else {
+        $('#custom-tag-list').addClass('expanded'); 
+      }
+  });
 </script>
-
 </body>
 </html>
diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss
index f8c8644c..5cbe1ca5 100644
--- a/web-ui/app/scss/styles.scss
+++ b/web-ui/app/scss/styles.scss
@@ -325,6 +325,10 @@ section {
       }
 
       ul#custom-tag-list {
+        visibility: hidden;
+        opacity: 0;
+        transition-duration: 500ms;
+
         li {
           white-space: nowrap;
           overflow: hidden;
@@ -337,6 +341,11 @@ section {
         }
       }
 
+      ul#custom-tag-list.expanded {
+        visibility: visible;
+        opacity: 1;
+      }
+
       div.tags-icon {
         margin-bottom: 20px;
         i {