refactor: Hierarchy.vue component to show more items at once

Author: Dobromir Hristov

src/components/DocumentationTopic/DocumentationNav.vue

@@ -10,7 +10,6 @@
 
 <template>
   <NavBase
-    :breakpoint="BreakpointName.medium"
     :hasOverlay="false"
     hasSolidBackground
     :hasNoBorder="hasNoBorder"
@@ -149,9 +148,7 @@ export default {
 /deep/ .nav-menu {
   @include font-styles(documentation-nav);
   // vertically align the items
-  @include breakpoint-only-largenav() {
-    padding-top: 0;
-  }
+  padding-top: 0;
 }
 
 .documentation-nav {

src/components/DocumentationTopic/DocumentationNav/Hierarchy.vue

@@ -14,16 +14,24 @@
     :class="{ 'has-badge': hasBadge }"
     class="hierarchy"
   >
+    <HierarchyItem
+      v-if="root"
+      :key="root.title"
+      class="root-hierarchy"
+      :url="addQueryParamsToUrl(root.url)"
+    >
+      {{ root.title }}
+    </HierarchyItem>
     <HierarchyItem
       v-for="topic in collapsibleItems"
       :key="topic.title"
-      :isCollapsed="shouldCollapseItems"
+      isCollapsed
       :url="addQueryParamsToUrl(topic.url)"
     >
       {{ topic.title }}
     </HierarchyItem>
     <HierarchyCollapsedItems
-      v-if="shouldCollapseItems"
+      v-if="collapsibleItems.length"
       :topics="collapsibleItems"
     />
     <HierarchyItem
@@ -54,6 +62,7 @@
 import { buildUrl } from 'docc-render/utils/url-helper';
 import NavMenuItems from 'docc-render/components/NavMenuItems.vue';
 import Badge from 'docc-render/components/Badge.vue';
+import throttle from 'docc-render/utils/throttle';
 import HierarchyCollapsedItems from './HierarchyCollapsedItems.vue';
 import HierarchyItem from './HierarchyItem.vue';
 
@@ -87,18 +96,49 @@ export default {
       default: () => [],
     },
   },
+  data() {
+    return {
+      windowWidth: window.innerWidth,
+    };
+  },
+  mounted() {
+    // start tracking the window size
+    const cb = throttle(() => { this.windowWidth = window.innerWidth; }, 150);
+    window.addEventListener('resize', cb);
+    this.$once('hook:beforeDestroy', () => {
+      window.removeEventListener('resize', cb);
+    });
+  },
   computed: {
     parentTopics() {
       return this.parentTopicIdentifiers.map((id) => {
         const { title, url } = this.references[id];
         return { title, url };
       });
     },
-    shouldCollapseItems() {
-      return (this.parentTopics.length + 1) > MaxVisibleItems;
+    /**
+     * Extract the root item from the parentTopics
+     */
+    root: ({ parentTopics }) => parentTopics[0],
+    /**
+     * Figure out how many items we can show, after the collapsed items,
+     * based on the window.innerWidth
+     */
+    linksAfterCollapse: ({ windowWidth }) => {
+      // never show more than the `MaxVisibleItems`
+      if (windowWidth > 1200) return MaxVisibleItems;
+      if (windowWidth > 1000) return MaxVisibleItems - 1;
+      if (windowWidth >= 800) return MaxVisibleItems - 2;
+      return 0;
     },
-    collapsibleItems: ({ parentTopics }) => parentTopics.slice(0, -1),
-    nonCollapsibleItems: ({ parentTopics }) => parentTopics.slice(-1),
+    collapsibleItems: ({ parentTopics, linksAfterCollapse }) => (
+      // if there are links, slice all except those, otherwise get all but the root
+      linksAfterCollapse ? parentTopics.slice(1, -linksAfterCollapse) : parentTopics.slice(1)
+    ),
+    nonCollapsibleItems: ({ parentTopics, linksAfterCollapse }) => (
+      // if there are links to show, slice them out, otherwise return none
+      linksAfterCollapse ? parentTopics.slice(1).slice(-linksAfterCollapse) : []
+    ),
     hasBadge: ({ isSymbolDeprecated, isSymbolBeta, currentTopicTags }) => (
       isSymbolDeprecated || isSymbolBeta || currentTopicTags.length
     ),
@@ -110,9 +150,19 @@ export default {
   },
 };
 </script>
-<style scoped>
+<style scoped lang="scss">
+@import 'docc-render/styles/_core.scss';
+
 .hierarchy {
   justify-content: flex-start;
   min-width: 0;
+  margin-right: 80px;
+  @include nav-in-breakpoint() {
+    margin-right: 0;
+  }
+
+  .root-hierarchy {
+    flex: 1 0 auto;
+  }
 }
 </style>

src/components/DocumentationTopic/DocumentationNav/HierarchyCollapsedItems.vue

@@ -10,7 +10,7 @@
 
 <template>
   <li class="hierarchy-collapsed-items">
-    <InlineChevronRightIcon class="hierarchy-item-icon icon-inline" />
+    <span class="hierarchy-item-icon icon-inline">/</span>
     <button
       class="toggle"
       ref="btn"
@@ -29,12 +29,11 @@
 
 <script>
 import { buildUrl } from 'docc-render/utils/url-helper';
-import InlineChevronRightIcon from 'theme/components/Icons/InlineChevronRightIcon.vue';
 import EllipsisIcon from 'theme/components/Icons/EllipsisIcon.vue';
 
 export default {
   name: 'HierarchyCollapsedItems',
-  components: { EllipsisIcon, InlineChevronRightIcon },
+  components: { EllipsisIcon },
   data: () => ({ collapsed: true }),
   props: {
     topics: {
@@ -116,7 +115,7 @@ $hierarchy-dropdown-box-shadow: 0 1px 4px -1px var(--color-figure-gray-secondary
 
 $tail-width: 1rem;
 $tail-offset: rem($nav-menu-item-left-margin)
-  + rem($nav-space-between-elements)
+  + rem($nav-space-hierarchy-elements)
   - ($toggle-width / 2)
   + ($tail-width / 2) + rem(4px);
 
@@ -126,12 +125,16 @@ $dropdown-vertical-offset: rem(7px);
   position: relative;
   display: inline-flex;
   align-items: center;
-  margin-left: $nav-space-between-elements;
+  margin-left: $nav-space-hierarchy-elements;
 
   .hierarchy-item-icon {
     width: 9px;
     height: 15px;
-    margin-right: $nav-space-between-elements;
+    margin-right: $nav-space-hierarchy-elements;
+    display: flex;
+    justify-content: center;
+    font-size: 1em;
+    align-self: baseline;
   }
 
   @include nav-in-breakpoint() {

src/components/DocumentationTopic/DocumentationNav/HierarchyItem.vue

@@ -11,21 +11,18 @@
 <template functional>
   <component
     :is="$options.components.NavMenuItemBase"
-    :class="{ collapsed: props.isCollapsed }"
+    :class="[{ collapsed: props.isCollapsed }, data.staticClass]"
     class="hierarchy-item"
   >
-    <component
-      :is="$options.components.InlineChevronRightIcon"
-      class="hierarchy-item-icon icon-inline"
-    />
+    <span class="hierarchy-item-icon icon-inline">/</span>
     <router-link v-if="props.url" class="parent item nav-menu-link" :to="props.url">
       <slot />
     </router-link>
     <template v-else>
       <span class="current item">
         <slot />
       </span>
-      <slot name="tags"/>
+      <slot name="tags" />
     </template>
   </component>
 </template>
@@ -55,19 +52,20 @@ export default {
   /deep/ .hierarchy-item-icon {
     width: 9px;
     height: 15px;
-    margin-right: $nav-space-between-elements;
-
+    margin-right: $nav-space-hierarchy-elements;
+    display: flex;
+    justify-content: center;
+    font-size: 1em;
+    align-self: baseline;
     // hide on when collapsed
     @include nav-in-breakpoint() {
       display: none;
     }
   }
 
-  @include breakpoint-only-largenav() {
-    display: flex;
-    align-items: center;
-    margin-left: $nav-space-between-elements;
-  }
+  display: flex;
+  align-items: center;
+  margin-left: $nav-space-hierarchy-elements;
 
   @include nav-in-breakpoint() {
     border-top: 1px solid var(--color-nav-hierarchy-item-borders);
@@ -103,11 +101,11 @@ export default {
   }
 }
 
-$-max-uncollapsed-breadcrumbs: 3;
+$-max-uncollapsed-breadcrumbs: 5;
 $-max-breadcrumb-width: 9rem;
 $-max-breadcrumb-width-with-badge: 7.2rem;
 
-@include breakpoint-only-largenav() {
+@include breakpoints-from(medium, nav) {
   @for $i from 1 through $-max-uncollapsed-breadcrumbs {
     $-multiplier: $-max-uncollapsed-breadcrumbs + 1 - $i;
 
@@ -148,6 +146,12 @@ $-max-breadcrumb-width-with-badge: 7.2rem;
     .item {
       @include truncate($-max-breadcrumb-width * $-multiplier-truncated);
     }
+
+    &:last-child {
+      .item {
+        max-width: none;
+      }
+    }
   }
 
   // With more than 3 breadcrumbs and a badge, the max-width is set to

src/styles/core/_nav.scss

@@ -23,6 +23,7 @@ $nav-menu-item-displacement: none !default;
 $nav-menu-item-stagger-delay: 0s !default;
 $nav-bg-color-transition: 0.5s $nav-timingfunction !default;
 $nav-space-between-elements: rem(10px);
+$nav-space-hierarchy-elements: rem(3px);
 
 @mixin nav-in-breakpoint($nested: false) {
   @include unify-selector('.nav--in-breakpoint-range', $nested) {

src/styles/core/typography/_font-styles.scss

@@ -139,7 +139,7 @@ $font-styles: (
     large: 17_25_semibold,
   ),
   documentation-nav: (
-    large: (15_19, nav),
+    large: (14_21, nav),
     medium: (14_21, nav),
     small: (14_21, nav),
   ),