Merge pull request algorithm-visualizer#146 from nem035/side-menu-improvement

Side menu improvement

Author: nem035

css/stylesheet.css

@@ -156,7 +156,11 @@ button.indent {
     padding-left: 28px;
 }
 
-button.collapse {
+.algorithms {
+  box-shadow: inset 0 2px 2px rgba(0,0,0,0.36),inset 0 -2px 2px rgba(0,0,0,0.24);
+}
+
+.algorithms.collapse {
     display: none;
 }
 
@@ -577,4 +581,4 @@ button[disabled] {
 @-o-keyframes line_highlight {
     from { background: rgba(255, 0, 0, .1); }
     to   { background: rgba(255, 0, 0, .3); }
-}
+}

js/dom/add_categories.js

@@ -8,8 +8,8 @@ const {
   each
 } = $;
 
-const addAlgorithmToCategoryDOM = (category, subList, algorithm) => {
-  const $algorithm = $('<button class="indent collapse">')
+const getAlgorithmDOM = (category, subList, algorithm) => {
+  return $('<button class="indent collapse">')
     .append(subList[algorithm])
     .attr('data-algorithm', algorithm)
     .attr('data-category', category)
@@ -35,17 +35,21 @@ const addCategoryToDOM = (category) => {
     .attr('data-category', category);
 
   $category.click(function () {
-    $(`.indent[data-category="${category}"]`).toggleClass('collapse');
-    $(this).find('i.fa').toggleClass('fa-caret-right fa-caret-down');
+    const $self = $(this);
+    $self.toggleClass('open');
+    $self.next().toggleClass('collapse');
+    $self.find('i.fa').toggleClass('fa-caret-right fa-caret-down');
   });
 
-  $('#list').append($category);
+  const $algorithms = $('<div class="algorithms collapse">');
+  $('#list').append($category).append($algorithms);
 
   each(categorySubList, (algorithm) => {
-    addAlgorithmToCategoryDOM(category, categorySubList, algorithm);
+    const $algorithm = getAlgorithmDOM(category, categorySubList, algorithm);
+    $algorithms.append($algorithm);
   });
 };
 
 module.exports = () => {
   each(app.getCategories(), addCategoryToDOM);
-};
+};

public/algorithm_visualizer.css

@@ -273,7 +273,11 @@ button.indent {
     padding-left: 28px;
 }
 
-button.collapse {
+.algorithms {
+  box-shadow: inset 0 2px 2px rgba(0,0,0,0.36),inset 0 -2px 2px rgba(0,0,0,0.24);
+}
+
+.algorithms.collapse {
     display: none;
 }
 
@@ -691,4 +695,4 @@ button[disabled] {
 
 /* Internet Explorer */
 
-/* Opera < 12.1 */
+/* Opera < 12.1 */