Change the sidenav breakpoints to use Medium instead (swiftlang#61)

* refactor: change the sidenav breakpoints to use Medium instead

* fix: emitter scope

* fix: head spacing

Author: Dobromir Hristov

src/components/AdjustableSidebarWidth.vue

@@ -36,15 +36,15 @@
     <div class="content">
       <slot />
     </div>
-    <BreakpointEmitter @change="breakpoint = $event" />
+    <BreakpointEmitter :scope="BreakpointScopes.nav" @change="breakpoint = $event" />
   </div>
 </template>
 
 <script>
 import { storage } from 'docc-render/utils/storage';
 import debounce from 'docc-render/utils/debounce';
 import BreakpointEmitter from 'docc-render/components/BreakpointEmitter.vue';
-import { BreakpointName } from 'docc-render/utils/breakpoints';
+import { BreakpointName, BreakpointScopes } from 'docc-render/utils/breakpoints';
 import { waitFrames } from 'docc-render/utils/loading';
 import scrollLock from 'docc-render/utils/scroll-lock';
 import FocusTrap from 'docc-render/utils/FocusTrap';
@@ -137,6 +137,7 @@ export default {
       dragging: isDragging, 'force-open': openExternally, 'no-transition': noTransition,
     }),
     scrollLockID: () => SCROLL_LOCK_ID,
+    BreakpointScopes: () => BreakpointScopes,
   },
   async mounted() {
     window.addEventListener('keydown', this.onEscapeKeydown);
@@ -166,15 +167,13 @@ export default {
       }, 250, true, true),
     },
     windowWidth: 'getWidthInCheck',
-    async breakpoint(value, oldValue) {
+    async breakpoint(value) {
       // adjust the width, so it does not go outside of limits
       this.getWidthInCheck();
       // make sure we close the nav
-      if (oldValue === BreakpointName.small) {
+      if (value === BreakpointName.large) {
         this.closeMobileSidebar();
       }
-      // if we are not going into the `small` breakpoint, return early
-      if (oldValue !== BreakpointName.small && value !== BreakpointName.small) return;
       // make sure we dont apply transitions for a few moments, to prevent flashes
       this.noTransition = true;
       // await for a few moments
@@ -276,15 +275,15 @@ export default {
 
 .adjustable-sidebar-width {
   display: flex;
-  @include breakpoint(small) {
+  @include breakpoint(medium, nav) {
     display: block;
     position: relative;
   }
 }
 
 .sidebar {
   position: relative;
-  @include breakpoint(small) {
+  @include breakpoint(medium, nav) {
     position: static;
   }
 }
@@ -299,7 +298,7 @@ export default {
     transition: none !important;
   }
 
-  @include breakpoint(small) {
+  @include breakpoint(medium, nav) {
     width: 0 !important;
     overflow: hidden;
     min-width: 0;
@@ -355,7 +354,7 @@ export default {
     width: 10px;
   }
 
-  @include breakpoint(small) {
+  @include breakpoint(medium, nav) {
     display: none;
   }
 

src/components/DocumentationTopic/DocumentationNav.vue

@@ -10,7 +10,7 @@
 
 <template>
   <NavBase
-    :breakpoint="isWideFormat ? BreakpointName.small: BreakpointName.medium"
+    :breakpoint="BreakpointName.medium"
     :hasOverlay="false"
     hasSolidBackground
     :hasNoBorder="hasNoBorder"
@@ -164,7 +164,7 @@ $sidenav-icon-size: 19px;
     .nav-title {
       @include font-styles(documentation-nav);
 
-      @include breakpoint(small, $scope: nav) {
+      @include breakpoint(medium, $scope: nav) {
         padding-top: 0;
       }
 
@@ -183,12 +183,4 @@ $sidenav-icon-size: 19px;
   width: $sidenav-icon-size;
   height: $sidenav-icon-size;
 }
-
-// make sure toggle is not visible, from medium up, in default scope.
-// Sidenav is only toggle-able at small, in default scope.
-.sidenav-toggle {
-  @include breakpoints-from(medium) {
-    display: none;
-  }
-}
 </style>

src/components/NavBase.vue

@@ -516,7 +516,7 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
 
 .pre-title {
   display: none;
-  @include breakpoint(small, $scope: nav) {
+  @include nav-in-breakpoint() {
     display: flex;
     padding: 0;
   }
@@ -636,15 +636,15 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
     padding-top: 0;
     height: $nav-height-small;
     width: 90%;
-
-    @include nav-is-wide-format() {
-      width: 100%;
-      justify-content: center;
-    }
   }
 
   @include nav-in-breakpoint {
     grid-area: title;
+
+    @include nav-is-wide-format(true) {
+      width: 100%;
+      justify-content: center;
+    }
   }
 
   /deep/ span {

src/components/Navigator.vue

@@ -204,7 +204,7 @@ export default {
   transition: height 0.3s linear;
   border-left: 1px solid var(--color-grid);
 
-  @include breakpoint(small) {
+  @include breakpoint(medium, nav) {
     position: static;
     height: 100%;
     border-left: none;

src/components/Navigator/NavigatorCard.vue

@@ -12,7 +12,7 @@
   <div class="navigator-card">
     <div class="head-wrapper">
       <button class="close-card-mobile" @click="$emit('close')">
-        <InlineCloseIcon class="icon-inline close-icon" />
+        <SidenavIcon class="icon-inline close-icon" />
       </button>
       <Reference :url="technologyPath" class="navigator-head" :id="INDEX_ROOT_KEY">
         <NavigatorLeafIcon :type="type" with-colors class="card-icon" />
@@ -86,7 +86,7 @@ import { INDEX_ROOT_KEY, SIDEBAR_ITEM_SIZE } from 'docc-render/constants/sidebar
 import { safeHighlightPattern } from 'docc-render/utils/search-utils';
 import NavigatorLeafIcon from 'docc-render/components/Navigator/NavigatorLeafIcon.vue';
 import NavigatorCardItem from 'docc-render/components/Navigator/NavigatorCardItem.vue';
-import InlineCloseIcon from 'theme/components/Icons/InlineCloseIcon.vue';
+import SidenavIcon from 'theme/components/Icons/SidenavIcon.vue';
 import FilterIcon from 'theme/components/Icons/FilterIcon.vue';
 import ClearRoundedIcon from 'theme/components/Icons/ClearRoundedIcon.vue';
 import Reference from 'docc-render/components/ContentNode/Reference.vue';
@@ -109,7 +109,7 @@ export default {
   components: {
     ClearRoundedIcon,
     FilterIcon,
-    InlineCloseIcon,
+    SidenavIcon,
     NavigatorCardItem,
     NavigatorLeafIcon,
     RecycleScroller,
@@ -519,8 +519,13 @@ $navigator-card-vertical-spacing: 8px !default;
       background: var(--color-fill-gray-quaternary);
     }
 
-    @include breakpoint(small) {
+    @include breakpoint(medium, nav) {
       justify-content: center;
+      padding: 14px $navigator-card-horizontal-spacing;
+    }
+
+    @include breakpoint(small, nav) {
+      padding: 12px $navigator-card-horizontal-spacing;
     }
   }
 
@@ -529,7 +534,7 @@ $navigator-card-vertical-spacing: 8px !default;
     height: 19px;
   }
 
-  @include breakpoint(small) {
+  @include breakpoint(medium, nav) {
     .filter-wrapper {
       order: 2;
     }
@@ -548,18 +553,23 @@ $navigator-card-vertical-spacing: 8px !default;
 .close-card-mobile {
   display: none;
   position: absolute;
-  left: 20px;
   top: 50%;
   z-index: 1;
   transform: translateY(-50%);
   color: var(--color-link);
 
-  @include breakpoint(small) {
+  @include breakpoint(medium, nav) {
     display: flex;
+    left: $nav-padding-wide;
+  }
+
+  @include breakpoint(small, nav) {
+    left: $nav-padding-small;
   }
 
   .close-icon {
-    width: 1em;
+    width: 19px;
+    height: 19px;
   }
 }
 
@@ -572,7 +582,7 @@ $navigator-card-vertical-spacing: 8px !default;
   padding-right: 0;
   flex: 1 1 auto;
   min-height: 0;
-  @include breakpoint(small) {
+  @include breakpoint(medium, nav) {
     --card-horizontal-spacing: 20px;
     --card-vertical-spacing: 0px;
   }
@@ -589,7 +599,7 @@ $navigator-card-vertical-spacing: 8px !default;
   padding: 14px 30px;
   border-top: 1px solid var(--color-grid);
 
-  @include breakpoint(small) {
+  @include breakpoint(medium, nav) {
     border: none;
     padding: 10px 20px;
   }

src/views/DocumentationTopic.vue

@@ -337,7 +337,7 @@ export default {
 .doc-topic-aside {
   height: 100%;
   box-sizing: border-box;
-  @include breakpoint(small) {
+  @include breakpoint(medium, nav) {
     background: var(--color-fill);
   }
 }

tests/unit/components/AdjustableSidebarWidth.spec.js

@@ -21,7 +21,7 @@ import { waitFrames } from '@/utils/loading';
 import FocusTrap from '@/utils/FocusTrap';
 import scrollLock from 'docc-render/utils/scroll-lock';
 import changeElementVOVisibility from 'docc-render/utils/changeElementVOVisibility';
-import { BreakpointName } from '@/utils/breakpoints';
+import { BreakpointName, BreakpointScopes } from '@/utils/breakpoints';
 import { createEvent, flushPromises } from '../../../test-utils';
 
 jest.mock('docc-render/utils/debounce');
@@ -110,7 +110,14 @@ describe('AdjustableSidebarWidth', () => {
       const wrapper = createWrapper();
       const aside = wrapper.find('.aside');
       expect(aside.classes()).not.toContain('no-transition');
-      wrapper.find(BreakpointEmitter).vm.$emit('change', 'small');
+      const emitter = wrapper.find(BreakpointEmitter);
+      expect(emitter.props('scope')).toEqual(BreakpointScopes.nav);
+      emitter.vm.$emit('change', 'small');
+      expect(aside.classes()).toContain('no-transition');
+      await waitFrames(5);
+      expect(aside.classes()).not.toContain('no-transition');
+      // try going back to large now
+      emitter.vm.$emit('change', 'large');
       expect(aside.classes()).toContain('no-transition');
       await waitFrames(5);
       expect(aside.classes()).not.toContain('no-transition');
@@ -194,18 +201,18 @@ describe('AdjustableSidebarWidth', () => {
       expect(AdjustableSidebarWidth.watch.$route).toEqual('closeMobileSidebar');
     });
 
-    it('closes the nav, on breakpoint change from small to medium', async () => {
+    it('closes the nav, on breakpoint change from medium to large', async () => {
       const wrapper = createWrapper({
         propsData: {
           openExternally: true,
         },
       });
       // setup
-      wrapper.find(BreakpointEmitter).vm.$emit('change', BreakpointName.small);
+      wrapper.find(BreakpointEmitter).vm.$emit('change', BreakpointName.medium);
       await wrapper.vm.$nextTick();
       expect(wrapper.emitted('update:openExternally')).toBeFalsy();
       // true test
-      wrapper.find(BreakpointEmitter).vm.$emit('change', BreakpointName.medium);
+      wrapper.find(BreakpointEmitter).vm.$emit('change', BreakpointName.large);
       expect(wrapper.emitted('update:openExternally')).toEqual([[false]]);
     });
   });

tests/unit/components/DocumentationTopic/DocumentationNav.spec.js

@@ -76,7 +76,7 @@ describe('DocumentationNav', () => {
     expect(nav.props()).toHaveProperty('hasNoBorder', false);
     expect(nav.props()).toHaveProperty('hasFullWidthBorder', true);
     expect(nav.props()).toHaveProperty('hasOverlay', false);
-    expect(nav.props()).toHaveProperty('breakpoint', BreakpointName.small);
+    expect(nav.props()).toHaveProperty('breakpoint', BreakpointName.medium);
     expect(nav.props()).toHaveProperty('isWideFormat', true);
   });