Fix: Layout and subcategory toggle regression (#49)

Author: derekrushforth

desktop/desktop.scss

@@ -4,8 +4,6 @@
     grid-template-columns: 20% 80%;
     grid-column-gap: 1em;
     grid-row-gap: 3px;
-    grid-template-areas: "sidebar navigation" "sidebar content";
-    grid-template-rows: 65px 1fr;
 
     @media screen and (max-width: 960px) {
       grid-template-columns: 25% 75%;
@@ -18,6 +16,8 @@
         display: none;
       }
     }
+    grid-template-areas: "sidebar navigation" "sidebar content";
+    grid-template-rows: 65px 1fr;
 
     .category-sidebar-outlet,
     .list-controls + .loading-container + span,
@@ -72,15 +72,19 @@
     }
   }
 
-  .category-sidebar-list {
-    margin: 0;
-    list-style: none;
+  .category-sidebar {
+    &-list {
+      margin: 0;
+      list-style: none;
+    }
+  }
 
-    &.show-children {
-      .sidebar-category-toggle .d-icon {
-        transform: rotate(90deg);
-      }
+  .category-sidebar-list-item {
+    .sidebar-category-badge {
+      background-color: var(--category-color);
+    }
 
+    &.show-children {
       .subcategories {
         margin: 0.75em 0 0 0;
         height: auto;
@@ -92,6 +96,10 @@
           visibility: hidden !important;
         }
       }
+
+      .sidebar-category-toggle .d-icon {
+        transform: rotate(90deg);
+      }
     }
 
     .subcategories {
@@ -145,10 +153,6 @@
       }
     }
 
-    .sidebar-category-badge {
-      background-color: var(--category-color);
-    }
-
     &__parent-container {
       display: flex;
       align-items: baseline;

spec/system/sub_category_toggle_spec.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+describe "Sub Category Toggle", type: :system do
+  let(:theme) do
+    parent_theme = Fabricate(:theme, name: "Parent Theme")
+    component = Fabricate(:theme, name: "Category Sidebar Navigation", component: true)
+    parent_theme.set_default!
+  end
+
+  before do
+    theme
+    upload_theme_component
+    @category = Fabricate(:category, name: "Test Category")
+    @subcategory = Fabricate(:category, name: "Test Subcategory", parent_category: @category)
+  end
+
+  it "displays subcategories when toggle is clicked" do
+    visit("/")
+
+    expect(page).to have_no_selector(".category-sidebar-list-item__parent.show-children")
+    find(".sidebar-category-toggle").click
+    expect(page).to have_selector(".category-sidebar-list-item__parent.show-children")
+    expect(page).to have_selector(
+      ".category-sidebar-list-item-link.subcategory-item",
+      text: @subcategory.name,
+    )
+  end
+
+  it "displays subcategories when on category page" do
+    visit("/c/#{@category.id}")
+    expect(page).to have_selector(".category-sidebar-list-item__parent.show-children")
+    expect(page).to have_selector(
+      ".category-sidebar-list-item-link.subcategory-item",
+      text: @subcategory.name,
+    )
+  end
+end