Merge pull request algorithm-visualizer#194 from nadr0/sidebar-transition

Sidebar/Workspace transition

Author: TornjV

index.html

@@ -26,7 +26,7 @@ <h3>
             <span id="category"></span>
             <i class="fa fa-angle-right nav-arrow" aria-hidden="true"></i>
             <span id="algorithm"></span>
-            <i class="fa fa-caret-up nav-dropdown" aria-hidden="true"></i>
+            <i class="fa fa-caret-down nav-dropdown" aria-hidden="true"></i>
         </h3>
     </button>
     <div class="top-menu-buttons">

js/dom/setup/setup_side_menu.js

@@ -13,16 +13,15 @@ module.exports = () => {
     const $workspace = $('.workspace');
 
     $sidemenu.toggleClass('active');
-    $('.nav-dropdown').toggleClass('fa-caret-down fa-caret-up');
 
+    $('.nav-dropdown').toggleClass('fa-caret-down fa-caret-right');
     if ($sidemenu.hasClass('active')) {
-      $sidemenu.css('right', (100 - sidemenu_percent) + '%');
-      $workspace.css('left', sidemenu_percent + '%');
-
+        $sidemenu.animate({ "right": (100 - sidemenu_percent) + '%'}, "fast" );
+        $workspace.animate({ "left": sidemenu_percent + '%' }, "fast" );
     } else {
-      sidemenu_percent = $workspace.position().left / $('body').width() * 100;
-      $sidemenu.css('right', 0);
-      $workspace.css('left', 0);
+        sidemenu_percent = $workspace.position().left / $('body').width() * 100;
+        $sidemenu.animate({ "right": "0%" }, "fast" );
+        $workspace.animate({ "left": "0%" }, "fast" );
     }
 
     resizeWorkspace();