Added slide animations to sidenav

meteor/app/client/vr.html

@@ -26,16 +26,15 @@ Avijit Gupta 526avijit@gmail.com
     <a><em>{{attackDetails.host}}</em></a>
     <a>Rank <em># {{attackDetails.rank}}</em></a>
 
-    {{#if isShowAttackDetails}}
-    <i class="glyphicon glyphicon-chevron-left back-button"></i>
-    <h5>Hello</h5>
-    {{else}}
-    <ul class="text-center attacks-list">
+    <span id="specific-attack-details">
+        <i class="glyphicon glyphicon-chevron-left back-button"></i>
+        <h5>Hello</h5>
+    </span>
+    <ul class="text-center" id="attacks-list">
         {{#each attackDetails.attacks}}
         <li class="text-center attacks-list-item">{{category}}</li>
         {{/each}}
     </ul>
-    {{/if}}
 
 </nav>
 

meteor/app/client/vr.js

@@ -261,10 +261,10 @@ if (Meteor.isClient) {
   Template.vr.helpers({
     attackDetails: function() {
       return Session.get('attackDetails');
-    },
-    isShowAttackDetails: function() {
-      return Session.get('isShowAttackDetails');
     }
+    // isShowAttackDetails: function() {
+    //   return Session.get('isShowAttackDetails');
+    // }
   });
 
   Template.vr.events({
@@ -288,7 +288,7 @@ if (Meteor.isClient) {
           var attackRegion = intersect.object.host;
           var attacks = intersect.object.attacks;
           if (typeof attackRank !== "undefined") {
-            Session.set('isShowAttackDetails', false);
+            // Session.set('isShowAttackDetails', false);
             var sessionAttackObj = {
               host: attackRegion,
               rank: attackRank,
@@ -308,11 +308,13 @@ if (Meteor.isClient) {
     },
 
     "click .attacks-list-item": function() {
-      Session.set('isShowAttackDetails', true);
+      $('#specific-attack-details').slideToggle();
+      $('#attacks-list').slideToggle();
     },
 
     "click .back-button": function() {
-      Session.set('isShowAttackDetails', false);
+      $('#specific-attack-details').slideToggle();
+      $('#attacks-list').slideToggle();
     }
 
   });

meteor/public/css/mozdef.css

@@ -541,6 +541,10 @@ circle:hover{
     color: white;
 }
 
+.vr-sidenav #specific-attack-details {
+    display: none;
+}
+
 .vr-sidenav .back-button {
     position: absolute;
     left: 5px;
@@ -553,17 +557,17 @@ circle:hover{
     cursor: pointer;
 }
 
-.vr-sidenav .attacks-list {
+.vr-sidenav #attacks-list {
     list-style: none;
     color: white;
     margin-left: -40px;
 }
 
-.vr-sidenav .attacks-list .attacks-list-item {
+.vr-sidenav #attacks-list .attacks-list-item {
     padding: 5px;
 }
 
-.vr-sidenav .attacks-list .attacks-list-item:hover {
+.vr-sidenav #attacks-list .attacks-list-item:hover {
     cursor: pointer;
     text-decoration: underline;
 }