close mobile navigator, when clicking on any navigation item

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>

src/components/Navigator/NavigatorCard.vue

@@ -967,6 +967,8 @@ export default {
      * that points to another technology.
      */
     handleNavigationChange(uid) {
+      // force-close the navigator on mobile
+      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);

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;

tests/unit/components/Navigator/NavigatorCard.spec.js

@@ -2013,6 +2013,8 @@ describe('NavigatorCard', () => {
       expect(getChildPositionInScroller).toHaveBeenCalledTimes(2);
       expect(DynamicScrollerStub.methods.scrollToItem).toHaveBeenCalledTimes(1);
       expect(DynamicScrollerStub.methods.scrollToItem).toHaveBeenLastCalledWith(2); // 3-rd item
+      // 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();

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: {