DEV: Setup categories section in sidebar for future work (#16733)

app/assets/javascripts/discourse/app/components/sidebar/categories-section.js

@@ -0,0 +1,3 @@
+import GlimmerComponent from "discourse/components/glimmer";
+
+export default class SidebarCategoriesSection extends GlimmerComponent {}

app/assets/javascripts/discourse/app/templates/components/sidebar.hbs

@@ -2,6 +2,7 @@
   <div class="sidebar-wrapper">
     <div class="sidebar-container">
       <Sidebar::TopicsSection />
+      <Sidebar::CategoriesSection />
     </div>
   </div>
 {{/if}}

app/assets/javascripts/discourse/app/templates/components/sidebar/categories-section.hbs

@@ -0,0 +1,7 @@
+<Sidebar::Section
+  @sectionName="categories"
+  @headerRoute="discovery.categories"
+  @headerLinkText={{i18n "sidebar.sections.categories.header_link_text"}}
+  @headerLinkTitle={{i18n "sidebar.sections.categories.header_link_title"}} >
+
+</Sidebar::Section>

app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js

@@ -0,0 +1,26 @@
+import { click, currentURL, visit } from "@ember/test-helpers";
+
+import {
+  acceptance,
+  conditionalTest,
+} from "discourse/tests/helpers/qunit-helpers";
+import { isLegacyEmber } from "discourse-common/config/environment";
+
+acceptance("Sidebar - Categories Section", function (needs) {
+  needs.user({ experimental_sidebar_enabled: true });
+
+  conditionalTest(
+    "clicking on section header link",
+    !isLegacyEmber(),
+    async function (assert) {
+      await visit("/t/280");
+      await click(".sidebar-section-categories .sidebar-section-header-link");
+
+      assert.strictEqual(
+        currentURL(),
+        "/categories",
+        "it should transition to the categories page"
+      );
+    }
+  );
+});

app/assets/javascripts/discourse/tests/acceptance/sidebar-topics-section-test.js

@@ -64,15 +64,24 @@ acceptance("Sidebar - Topics Section", function (needs) {
     async function (assert) {
       await visit("/");
 
-      assert.ok(exists(".sidebar-section-content"), "shows content section");
+      assert.ok(
+        exists(".sidebar-section-topics .sidebar-section-content"),
+        "shows content section"
+      );
 
       await click(".sidebar-section-topics .sidebar-section-header-caret");
 
-      assert.ok(!exists(".sidebar-section-content"), "hides content section");
+      assert.ok(
+        !exists(".sidebar-section-topics .sidebar-section-content"),
+        "hides content section"
+      );
 
       await click(".sidebar-section-topics .sidebar-section-header-caret");
 
-      assert.ok(exists(".sidebar-section-content"), "shows content section");
+      assert.ok(
+        exists(".sidebar-section-topics .sidebar-section-content"),
+        "shows content section"
+      );
     }
   );
 

app/assets/stylesheets/common/base/sidebar.scss

@@ -40,6 +40,10 @@
     justify-content: flex-end;
   }
 
+  .sidebar-section-wrapper {
+    margin-bottom: 1em;
+  }
+
   .sidebar-section-header {
     display: flex;
     text-transform: uppercase;

config/locales/client.en.yml

@@ -4035,6 +4035,9 @@ en:
       unread_count: "%{count} unread"
       new_count: "%{count} new"
       sections:
+        categories:
+          header_link_title: "all categories"
+          header_link_text: "Categories"
         topics:
           header_link_title: "home"
           header_link_text: "Topics"