Navigator related changes to allow further customization (#904)

Resolves: rdar://138215815

Author: hqhhuang

src/components/AdjustableSidebarWidth.vue

@@ -157,6 +157,7 @@ export default {
       focusTrapInstance: null,
       mobileTopOffset: 0,
       topOffset: 0,
+      scrollLockContainer: null,
     };
   },
   computed: {
@@ -353,18 +354,23 @@ export default {
      * Toggles the scroll lock on/off
      */
     async toggleScrollLock(lock) {
-      const scrollLockContainer = document.getElementById(this.scrollLockID);
-      if (lock) {
-        await this.$nextTick();
-        scrollLock.lockScroll(scrollLockContainer);
-        // lock focus
-        this.focusTrapInstance.start();
-        // hide sibling elements from VO
-        changeElementVOVisibility.hide(this.$refs.aside);
-      } else {
-        scrollLock.unlockScroll(scrollLockContainer);
+      // if applicable, turn off lock on previous container
+      if (this.scrollLockContainer) {
+        scrollLock.unlockScroll(this.scrollLockContainer);
         this.focusTrapInstance.stop();
         changeElementVOVisibility.show(this.$refs.aside);
+        this.scrollLockContainer = null;
+      }
+      if (lock) {
+        await this.$nextTick();
+        this.scrollLockContainer = document.getElementById(this.scrollLockID);
+        if (this.scrollLockContainer) {
+          scrollLock.lockScroll(this.scrollLockContainer);
+          // lock focus
+          this.focusTrapInstance.start();
+          // hide sibling elements from VO
+          changeElementVOVisibility.hide(this.$refs.aside);
+        }
       }
     },
     storeTopOffset: throttle(function storeTopOffset() {

src/components/DocumentationLayout.vue

@@ -30,46 +30,48 @@
     >
       <PortalTarget name="modal-destination" multiple />
       <template #aside="{ scrollLockID, breakpoint }">
-        <NavigatorDataProvider
-          :interface-language="interfaceLanguage"
-          :technologyUrl="technology ? technology.url : ''"
-          :api-changes-version="selectedAPIChangesVersion"
-          ref="NavigatorDataProvider"
-        >
-          <template #default="slotProps">
-            <div class="documentation-layout-aside">
-              <QuickNavigationModal
-                v-if="enableQuickNavigation"
-                :children="slotProps.flatChildren"
-                :showQuickNavigationModal.sync="showQuickNavigationModal"
-                :technology="technology ? technology.title : ''"
-              />
-              <transition name="delay-hiding">
-                <Navigator
-                  v-show="sidenavVisibleOnMobile || breakpoint === BreakpointName.large"
-                  :flatChildren="slotProps.flatChildren"
-                  :parent-topic-identifiers="parentTopicIdentifiers"
-                  :technology="slotProps.technology || technology"
-                  :is-fetching="slotProps.isFetching"
-                  :error-fetching="slotProps.errorFetching"
-                  :api-changes="slotProps.apiChanges"
-                  :references="references"
-                  :navigator-references="slotProps.references"
-                  :scrollLockID="scrollLockID"
-                  :render-filter-on-top="breakpoint !== BreakpointName.large"
-                  @close="handleToggleSidenav(breakpoint)"
-                >
-                  <template v-if="enableQuickNavigation" #filter>
-                    <QuickNavigationButton @click.native="openQuickNavigationModal" />
-                  </template>
-                  <template #navigator-head="{ className }">
-                    <slot name="nav-title" :className="className" />
-                  </template>
-                </Navigator>
-              </transition>
-            </div>
-          </template>
-        </NavigatorDataProvider>
+        <div class="documentation-layout-aside">
+          <QuickNavigationModal
+            v-if="enableQuickNavigation"
+            :children="indexNodes"
+            :showQuickNavigationModal.sync="showQuickNavigationModal"
+            :technology="technology ? technology.title : ''"
+          />
+          <transition name="delay-hiding">
+            <slot
+              name="navigator"
+              v-bind="{
+                scrollLockID,
+                breakpoint,
+                sidenavVisibleOnMobile,
+                handleToggleSidenav,
+                enableQuickNavigation,
+                openQuickNavigationModal,
+              }"
+            >
+              <Navigator
+                key="base-navigator"
+                v-show="sidenavVisibleOnMobile || breakpoint === BreakpointName.large"
+                v-bind="{ ...navigatorProps, technologyProps }"
+                :parent-topic-identifiers="parentTopicIdentifiers"
+                :references="references"
+                :scrollLockID="scrollLockID"
+                :render-filter-on-top="breakpoint !== BreakpointName.large"
+                @close="handleToggleSidenav(breakpoint)"
+              >
+                <template v-if="enableQuickNavigation" #filter>
+                  <QuickNavigationButton @click.native="openQuickNavigationModal" />
+                </template>
+                <template #above-navigator-head>
+                  <slot name="above-navigator-head"/>
+                </template>
+                <template #navigator-head="{ className }">
+                  <slot name="nav-title" :className="className" />
+                </template>
+              </Navigator>
+            </slot>
+          </transition>
+        </div>
       </template>
       <slot name="content" />
     </AdjustableSidebarWidth>
@@ -80,14 +82,14 @@
 import { PortalTarget } from 'portal-vue';
 import QuickNavigationButton from 'docc-render/components/Navigator/QuickNavigationButton.vue';
 import QuickNavigationModal from 'docc-render/components/Navigator/QuickNavigationModal.vue';
-import AdjustableSidebarWidth from 'docc-render/components/AdjustableSidebarWidth.vue';
+import AdjustableSidebarWidth from 'theme/components/AdjustableSidebarWidth.vue';
 import Navigator from 'docc-render/components/Navigator.vue';
 import onPageLoadScrollToFragment from 'docc-render/mixins/onPageLoadScrollToFragment';
 import { BreakpointName } from 'docc-render/utils/breakpoints';
 import { storage } from 'docc-render/utils/storage';
 import { getSetting } from 'docc-render/utils/theme-settings';
 
-import NavigatorDataProvider from 'theme/components/Navigator/NavigatorDataProvider.vue';
+import indexDataGetter from 'theme/mixins/indexDataGetter';
 import DocumentationNav from 'theme/components/DocumentationTopic/DocumentationNav.vue';
 
 const NAVIGATOR_HIDDEN_ON_LARGE_KEY = 'navigator-hidden-large';
@@ -98,13 +100,12 @@ export default {
   components: {
     Navigator,
     AdjustableSidebarWidth,
-    NavigatorDataProvider,
     Nav: DocumentationNav,
     QuickNavigationButton,
     QuickNavigationModal,
     PortalTarget,
   },
-  mixins: [onPageLoadScrollToFragment],
+  mixins: [onPageLoadScrollToFragment, indexDataGetter],
   props: {
     enableNavigator: Boolean,
     diffAvailability: {

src/components/DocumentationTopic.vue

@@ -183,6 +183,7 @@ import { normalizeRelativePath } from 'docc-render/utils/assets';
 import { last } from 'docc-render/utils/arrays';
 
 import AppStore from 'docc-render/stores/AppStore';
+import IndexStore from 'docc-render/stores/IndexStore';
 import Aside from 'docc-render/components/ContentNode/Aside.vue';
 import BetaLegalText from 'theme/components/DocumentationTopic/BetaLegalText.vue';
 import LanguageSwitcher from 'theme/components/DocumentationTopic/Summary/LanguageSwitcher.vue';
@@ -425,7 +426,7 @@ export default {
   },
   data() {
     return {
-      appState: AppStore.state,
+      indexState: IndexStore.state,
       topicState: this.store.state,
       declListExpanded: false, // Hide all other declarations by default
     };
@@ -721,7 +722,7 @@ export default {
     this.store.setReferences(this.references);
   },
   watch: {
-    'appState.includedArchiveIdentifiers': function updateRefs() {
+    'indexState.includedArchiveIdentifiers': function updateRefs() {
       this.store.updateReferences();
     },
     // update the references in the store, in case they update, but the component is not re-created

src/components/Navigator.vue

@@ -27,6 +27,9 @@
       @close="$emit('close')"
     >
       <template #filter><slot name="filter" /></template>
+      <template #above-navigator-head>
+        <slot name="above-navigator-head"/>
+      </template>
       <template #navigator-head>
         <slot name="navigator-head" className="nav-title"/>
       </template>
@@ -91,7 +94,7 @@ export default {
       type: Array,
       required: true,
     },
-    technology: {
+    technologyProps: {
       type: Object,
       required: false,
     },
@@ -153,13 +156,6 @@ export default {
      * The root item is always a module
      */
     type: () => TopicTypes.module,
-    technologyProps: ({ technology }) => (
-      !technology ? null : {
-        technology: technology.title,
-        technologyPath: technology.path || technology.url,
-        isTechnologyBeta: technology.beta,
-      }
-    ),
   },
 };
 </script>

src/components/Navigator/NavigatorCard.vue

@@ -395,6 +395,9 @@ export default {
         item.updateSize();
       }
     },
+    technology() {
+      this.clearFilters();
+    },
   },
   methods: {
     setUnlessEqual(property, data) {