From ca33f1e0f0b9cea8067a2ce1332f81abdf6521a9 Mon Sep 17 00:00:00 2001
From: Dobromir Hristov <dhristov@apple.com>
Date: Tue, 21 Jun 2022 13:27:17 +0300
Subject: [PATCH 1/2] fix: close mobile navigator, when clicking on any
 navigation item

---
 src/components/Navigator/NavigatorCard.vue            | 2 ++
 tests/unit/components/Navigator/NavigatorCard.spec.js | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/components/Navigator/NavigatorCard.vue b/src/components/Navigator/NavigatorCard.vue
index e042178b2..0bf58d11c 100644
--- a/src/components/Navigator/NavigatorCard.vue
+++ b/src/components/Navigator/NavigatorCard.vue
@@ -932,6 +932,8 @@ export default {
      * that points to another technology.
      */
     handleNavigationChange(uid) {
+      // force-close the navigator on mobile
+      this.$emit('close');
       // if the path is outside of this technology tree, dont store the uid
       if (this.childrenMap[uid].path.startsWith(this.technologyPath)) {
         this.setActiveUID(uid);
diff --git a/tests/unit/components/Navigator/NavigatorCard.spec.js b/tests/unit/components/Navigator/NavigatorCard.spec.js
index 1e7b3e4ef..bbfa0ba32 100644
--- a/tests/unit/components/Navigator/NavigatorCard.spec.js
+++ b/tests/unit/components/Navigator/NavigatorCard.spec.js
@@ -1698,6 +1698,8 @@ describe('NavigatorCard', () => {
       expect(getChildPositionInScroller).toHaveBeenCalledTimes(2);
       expect(RecycleScrollerStub.methods.scrollToItem).toHaveBeenCalledTimes(1);
       expect(RecycleScrollerStub.methods.scrollToItem).toHaveBeenLastCalledWith(2); // 3-rd item
+      // assert close event was emitted
+      expect(wrapper.emitted('close')).toHaveLength(1);
       // now simulate the router change
       wrapper.setProps({ activePath: [root0.path, root0Child1.path] });
       await flushPromises();

From da707c9a8d6716ebe7ea25c79e4eb78f3c73da88 Mon Sep 17 00:00:00 2001
From: Dobromir Hristov <dhristov@apple.com>
Date: Wed, 12 Jul 2023 12:10:07 +0300
Subject: [PATCH 2/2] fix: do not close on desktop

---
 src/components/Navigator.vue                  |  1 +
 src/components/Navigator/NavigatorCard.vue    |  2 +-
 src/views/DocumentationTopic.vue              | 11 +++++++
 .../Navigator/NavigatorCard.spec.js           |  4 +--
 tests/unit/views/DocumentationTopic.spec.js   | 30 +++++++++++++++++++
 5 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/components/Navigator.vue b/src/components/Navigator.vue
index caac25b8c..c7c3375ec 100644
--- a/src/components/Navigator.vue
+++ b/src/components/Navigator.vue
@@ -26,6 +26,7 @@
       :allow-hiding="allowHiding"
       :navigator-references="navigatorReferences"
       @close="$emit('close')"
+      @navigate="$emit('navigate', $event)"
     >
       <template #filter><slot name="filter" /></template>
     </NavigatorCard>
diff --git a/src/components/Navigator/NavigatorCard.vue b/src/components/Navigator/NavigatorCard.vue
index 821d396d0..235c2bbbe 100644
--- a/src/components/Navigator/NavigatorCard.vue
+++ b/src/components/Navigator/NavigatorCard.vue
@@ -968,7 +968,7 @@ export default {
      */
     handleNavigationChange(uid) {
       // force-close the navigator on mobile
-      this.$emit('close');
+      this.$emit('navigate', uid);
       // if the path is outside of this technology tree, dont store the uid
       if (this.childrenMap[uid].path.startsWith(this.technologyPath)) {
         this.setActiveUID(uid);
diff --git a/src/views/DocumentationTopic.vue b/src/views/DocumentationTopic.vue
index 2efed4090..97ac95eba 100644
--- a/src/views/DocumentationTopic.vue
+++ b/src/views/DocumentationTopic.vue
@@ -47,6 +47,7 @@
                     :scrollLockID="scrollLockID"
                     :render-filter-on-top="breakpoint !== BreakpointName.large"
                     @close="handleToggleSidenav(breakpoint)"
+                    @navigate="handleNavigate(breakpoint)"
                   >
                     <template v-if="enableQuickNavigation" #filter>
                       <QuickNavigationButton @click.native="openQuickNavigationModal" />
@@ -314,6 +315,15 @@ export default {
       this.openQuickNavigationModal();
       event.preventDefault();
     },
+    /**
+     * Closes the mobile nav, on each navigation. This is generally done when the route changes,
+     * but we also want to do that when any link is slicked in the navigator.
+     * @param {string} breakpoint
+     */
+    handleNavigate(breakpoint) {
+      if (breakpoint === BreakpointName.large) return;
+      this.toggleMobileSidenav(false);
+    },
   },
   mounted() {
     this.$bridge.on('contentUpdate', this.handleContentUpdateFromBridge);
@@ -394,6 +404,7 @@ export default {
   .generic-modal {
     overflow-y: overlay;
   }
+
   .modal-fullscreen > .container {
     background-color: transparent;
     height: fit-content;
diff --git a/tests/unit/components/Navigator/NavigatorCard.spec.js b/tests/unit/components/Navigator/NavigatorCard.spec.js
index 173fad7bd..1a397df40 100644
--- a/tests/unit/components/Navigator/NavigatorCard.spec.js
+++ b/tests/unit/components/Navigator/NavigatorCard.spec.js
@@ -2013,8 +2013,8 @@ describe('NavigatorCard', () => {
       expect(getChildPositionInScroller).toHaveBeenCalledTimes(2);
       expect(DynamicScrollerStub.methods.scrollToItem).toHaveBeenCalledTimes(1);
       expect(DynamicScrollerStub.methods.scrollToItem).toHaveBeenLastCalledWith(2); // 3-rd item
-      // assert close event was emitted
-      expect(wrapper.emitted('close')).toHaveLength(1);
+      // assert `navigate` event was emitted
+      expect(wrapper.emitted('navigate')).toHaveLength(1);
       // now simulate the router change
       wrapper.setProps({ activePath: [root0.path, root0Child1.path] });
       await flushPromises();
diff --git a/tests/unit/views/DocumentationTopic.spec.js b/tests/unit/views/DocumentationTopic.spec.js
index d7f066167..30e9ab507 100644
--- a/tests/unit/views/DocumentationTopic.spec.js
+++ b/tests/unit/views/DocumentationTopic.spec.js
@@ -599,6 +599,36 @@ describe('DocumentationTopic', () => {
     expect(storage.set).toHaveBeenCalledTimes(0);
   });
 
+  it('handles the `@navigate` event, only on Mobile breakpoints', async () => {
+    wrapper.setData({
+      topicData: {
+        ...topicData,
+        schemaVersion: schemaVersionWithSidebar,
+      },
+    });
+    await flushPromises();
+    const navigator = wrapper.find(Navigator);
+    const nav = wrapper.find(Nav);
+    // toggle the navigator from the Nav component, in Small breakpoint
+    nav.vm.$emit('toggle-sidenav', BreakpointName.small);
+    const sidebar = wrapper.find(AdjustableSidebarWidth);
+    // set the breakpoint to small on the sidebar
+    sidebar.vm.breakpoint = BreakpointName.small;
+    expect(sidebar.props('shownOnMobile')).toBe(true);
+    await flushPromises();
+    navigator.vm.$emit('navigate');
+    expect(sidebar.props('shownOnMobile')).toBe(false);
+    // Test that Medium works with the same set of props/events
+    // toggle the navigator from the Nav component, in Medium breakpoint
+    nav.vm.$emit('toggle-sidenav', BreakpointName.medium);
+    expect(sidebar.props('shownOnMobile')).toBe(true);
+    await flushPromises();
+    sidebar.vm.breakpoint = BreakpointName.medium;
+    navigator.vm.$emit('navigate');
+    expect(sidebar.props('shownOnMobile')).toBe(false);
+    expect(storage.set).toHaveBeenCalledTimes(0);
+  });
+
   it('handles the `@close`, on Navigator, for `Large` breakpoints', async () => {
     wrapper.setData({
       topicData: {