feat: change sidebar outlet

common/body_tag.html

@@ -0,0 +1,44 @@
+<script>
+    let prevURL = window.location.href;
+
+    const observer = new MutationObserver(() => {
+      if (location.href !== prevURL && /\/t\//.test(location.href)) {
+        console.log("URL changed");
+        prevURL = location.href;
+        const currentRT = window.location.pathname.split("/").pop();
+        const activeItem = document.querySelector(
+          "li a.active:not(.sidebar-section-link)"
+        );
+
+        if (activeItem) {
+          activeItem.classList.remove("active");
+          let parent = activeItem.closest("details");
+
+          while (parent) {
+            if (parent.tagName === "DETAILS") {
+              parent.open = false;
+            }
+            parent = parent.parentElement.closest("details");
+          }
+        }
+        const currentSidebarItem = document.querySelector(
+          `.sidebar-sections li > a[href*='${currentRT}']:not(.active):not(.sidebar-section-link)`
+        );
+
+        if (currentSidebarItem) {
+            currentSidebarItem.classList.add("active");
+            let element = currentSidebarItem.closest("details");
+
+            while (element) {
+                if (element.tagName === 'DETAILS') {
+                element.open = true;
+                }
+                element = element.parentElement.closest("details");
+            }
+        }
+      }
+    });
+
+    const topicBody = document.getElementById("main-outlet");
+    observer.observe(topicBody, { childList: true, subtree: true });
+</script>

javascripts/discourse/components/category-sidebar.gjs

@@ -17,6 +17,16 @@ export default class CategorySidebar extends Component {
   @service site;
   @tracked sidebarContent;
   @tracked loading = true;
+  @tracked lastFetchedCategory = null;
+
+  observer = null;
+
+  constructor() {
+    super(...arguments);
+    this.router.on('routeDidChange', () => {
+      this.updateActiveLinks();
+    });
+  }
 
   <template>
     {{#if this.matchedSetting}}
@@ -31,6 +41,7 @@ export default class CategorySidebar extends Component {
           <div
             class="category-sidebar-contents"
             data-category-sidebar={{this.category.slug}}
+            {{didInsert this.setupObserver}}
           >
             <div class="cooked">
               {{#unless this.loading}}
@@ -69,6 +80,10 @@ export default class CategorySidebar extends Component {
     return filteredTargets.includes(this.router.currentRouteName);
   }
 
+  get categoryIdTopic() {
+    return this.router?.currentRoute?.parent?.attributes?.category_id;
+  }
+
   get categorySlugPathWithID() {
     return this.router?.currentRoute?.params?.category_slug_path_with_id;
   }
@@ -79,6 +94,10 @@ export default class CategorySidebar extends Component {
       : null;
   }
 
+  get topicCategory() {
+    return this.categoryIdTopic ? Category.findById(this.categoryIdTopic) : null;
+  }
+
   get matchedSetting() {
     if (this.parsedSetting["all"] && this.isTopRoute) {
       // if this is a top_menu route, use the "all" setting
@@ -101,12 +120,40 @@ export default class CategorySidebar extends Component {
       ) {
         return this.parsedSetting[parentCategorySlug];
       }
+    } else if (this.categoryIdTopic) {
+      const topicCategorySlug = this.topicCategory?.slug;
+      const parentTopicCategorySlug = Category.findById(
+        this.topicCategory?.parent_category_id
+      )?.slug;
+
+      if (topicCategorySlug && this.parsedSetting[topicCategorySlug]) {
+        return this.parsedSetting[topicCategorySlug];
+      }
+
+      if (
+        settings.inherit_parent_sidebar &&
+        parentTopicCategorySlug &&
+        this.parsedSetting[parentTopicCategorySlug]
+      ) {
+        return this.parsedSetting[parentTopicCategorySlug];
+      }
     }
   }
 
   @action
   async fetchPostContent() {
+    const currentCategory = this.category || Category.findById(
+        this.topicCategory?.parent_category_id
+      );
+
+    // Check if the category has changed
+    if (this.lastFetchedCategory === currentCategory?.id) {
+      // If not, skip fetching
+      return;
+    }
+
     this.loading = true;
+    this.lastFetchedCategory = currentCategory?.id;
 
     try {
       if (this.matchedSetting) {
@@ -122,4 +169,52 @@ export default class CategorySidebar extends Component {
 
     return this.sidebarContent;
   }
+
+  @action
+  setupObserver(element) {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+    this.observer = new MutationObserver(() => {
+      this.updateActiveLinks(element);
+    });
+
+    this.observer.observe(element, {
+      childList: true,
+      subtree: true
+    });
+  }
+
+  @action
+  updateActiveLinks(element) {
+    if (!element) {
+      return;
+    }
+    const currentPath = window.location.pathname;
+    const links = element?.querySelectorAll('li > a:not(.sidebar-section-link)');
+    links.forEach(link => {
+    const linkPath = new URL(link.href).pathname;
+    if (linkPath === currentPath) {
+      link.classList.add('active');
+      let detailsElement = link.closest('details');
+      while (detailsElement) {
+        if (detailsElement.tagName === 'DETAILS') {
+          detailsElement.setAttribute('open', '');
+        }
+
+        detailsElement = detailsElement.parentElement.closest('details');
+      }
+    } else {
+      link.classList.remove('active');
+    }
+  });
+  }
+
+  willDestroy() {
+    super.willDestroy();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+    this.router.off('routeDidChange', this.updateActiveLinks);
+  }
 }

javascripts/discourse/connectors/above-main-container/category-sidebar.hbs

@@ -0,0 +1 @@
+<CategorySidebar />