Allow disabling the sidebar resizing and setting a fixed width (#437)

related rdar://97716953

Author: Dobromir Hristov

src/components/AdjustableSidebarWidth.vue

@@ -37,6 +37,7 @@
         />
       </div>
       <div
+        v-if="!fixedWidth"
         class="resize-handle"
         @mousedown.prevent="startDrag"
         @touchstart.prevent="startDrag"
@@ -113,6 +114,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    fixedWidth: {
+      type: Number,
+      default: null,
+    },
   },
   data() {
     const windowWidth = window.innerWidth;
@@ -131,7 +136,7 @@ export default {
     return {
       isDragging: false,
       // limit the width to a range
-      width: Math.min(Math.max(storedWidth, minWidth), maxWidth),
+      width: this.fixedWidth || Math.min(Math.max(storedWidth, minWidth), maxWidth),
       isTouch: false,
       windowWidth,
       windowHeight,
@@ -146,10 +151,12 @@ export default {
   computed: {
     minWidthPercent: ({ breakpoint }) => minWidthResponsivePercents[breakpoint] || 0,
     maxWidthPercent: ({ breakpoint }) => maxWidthResponsivePercents[breakpoint] || 100,
-    maxWidth: ({ maxWidthPercent, windowWidth }) => (
-      calcWidthPercent(maxWidthPercent, windowWidth)
+    maxWidth: ({ maxWidthPercent, windowWidth, fixedWidth }) => (
+      Math.max(fixedWidth, calcWidthPercent(maxWidthPercent, windowWidth))
+    ),
+    minWidth: ({ minWidthPercent, windowWidth, fixedWidth }) => (
+      Math.min(fixedWidth || windowWidth, calcWidthPercent(minWidthPercent, windowWidth))
     ),
-    minWidth: ({ minWidthPercent, windowWidth }) => calcWidthPercent(minWidthPercent, windowWidth),
     widthInPx: ({ width }) => `${width}px`,
     events: ({ isTouch }) => (isTouch ? eventsMap.touch : eventsMap.mouse),
     asideStyles: ({
@@ -417,6 +424,7 @@ export default {
     position: fixed;
     top: var(--top-offset-mobile);
     bottom: 0;
+    left: 0;
     z-index: $nav-z-index + 1;
     transform: translateX(-100%);
     transition: transform 0.15s ease-in;

tests/unit/components/AdjustableSidebarWidth.spec.js

@@ -554,6 +554,22 @@ describe('AdjustableSidebarWidth', () => {
     expect(aside.classes()).toContain('hide-on-large');
   });
 
+  it('allows hard-coding a width', async () => {
+    const wrapper = createWrapper({
+      propsData: {
+        fixedWidth: 200,
+      },
+    });
+    expect(wrapper.vm.asideStyles).toHaveProperty('width', '200px');
+    // simulate window changes width form orientation change.
+    // This should trigger both breakpoint emitter and window resize, but not in Jest
+    window.innerWidth = 1500;
+    window.dispatchEvent(createEvent('resize'));
+    await flushPromises();
+    assertWidth(wrapper, 200); // hardcoded width
+    expect(wrapper.find('.resize-handle').exists()).toBe(false);
+  });
+
   describe('stores the content width in the store', () => {
     function setContentWidth(wrapper, value) {
       Object.defineProperty(wrapper.find({ ref: 'content' }).element, 'offsetWidth', {

tests/unit/views/DocumentationTopic.spec.js

@@ -182,6 +182,7 @@ describe('DocumentationTopic', () => {
     expect(adjustableWidth.props()).toEqual({
       shownOnMobile: false,
       hiddenOnLarge: false,
+      fixedWidth: null,
     });
     const technology = topicData.references['topic://foo'];
     expect(wrapper.find(NavigatorDataProvider).props()).toEqual({