Resizable Fabric Workspace Navigation Pane

resizable_fabric_workspace_nav_pane.userscript.js

// ==UserScript==
// @name         Resizable Fabric Workspace Nav Pane
// @namespace    http://tampermonkey.net/
// @version      2025-09-30
// @description  Resizable Fabric Workspace Navigation Pane
// @author       https://github.com/JamesDBartlett3
// @match        https://app.powerbi.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=powerbi.com
// @grant        none
// NOTE: THIS IS STILL IN DEVELOPMENT AND EXTREMELY HACKY. USE ENTIRELY AT YOUR OWN RISK.
// ==/UserScript==

(function waitForNavPanel() {
  const leftNavPane = document.getElementById('leftNavPane');
  const objectExplorerOutlet = leftNavPane?.querySelector('trident-object-explorer-outlet');
  const objectExplorer = objectExplorerOutlet?.querySelector('trident-object-explorer');
  const oeHeader = objectExplorer?.querySelector('div.oe-header');

  if (!leftNavPane || !objectExplorerOutlet || !objectExplorer || !oeHeader) {
    setTimeout(waitForNavPanel, 300);
    return;
  }

  const existingHandle = document.getElementById('resizeHandle');
  if (existingHandle) existingHandle.remove();

  const resizeHandle = document.createElement('div');
  resizeHandle.id = 'resizeHandle';
  Object.assign(resizeHandle.style, {
    position: 'absolute',
    top: '0',
    right: '0',
    width: '6px',
    height: '100%',
    cursor: 'ew-resize',
    backgroundColor: 'transparent',
    zIndex: '9999',
    transition: 'width 0.1s ease'
  });

  leftNavPane.style.position = 'relative';
  leftNavPane.style.minWidth = '150px';
  leftNavPane.style.maxWidth = '600px';

  objectExplorerOutlet.style.width = '90%';
  objectExplorer.style.width = '90%';
  oeHeader.style.boxSizing = 'border-box';
  oeHeader.style.overflow = 'hidden';

  leftNavPane.appendChild(resizeHandle);

  let isResizing = false;

  resizeHandle.addEventListener('mousedown', function (e) {
    e.preventDefault();
    isResizing = true;
    resizeHandle.style.width = '20px';
    document.body.style.userSelect = 'none';

    const startX = e.clientX;
    const startWidth = leftNavPane.offsetWidth;

    function onMouseMove(e) {
      if (!isResizing) return;
      const dx = e.clientX - startX;
      const newWidth = Math.max(150, Math.min(600, startWidth + dx));

      leftNavPane.style.width = newWidth + 'px';
      oeHeader.style.width = Math.max(0, newWidth - 20) + 'px';
    }

    function onMouseUp() {
      isResizing = false;
      resizeHandle.style.width = '6px';
      document.body.style.userSelect = '';
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
    }

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  });
  // Wait until the document is ready
  const waitForHead = () => {
    const head = document.head || document.getElementsByTagName('head')[0];
    if (!head) {
      setTimeout(waitForHead, 100);
      return;
    }

    const style = document.createElement('style');
    style.type = 'text/css';
    style.textContent = `

      #leftNavPane trident-object-explorer-outlet trident-object-explorer .oe-body {
        overflow-x: hidden !important;
      }

      #leftNavPane trident-object-explorer-outlet trident-object-explorer .oe-header {
        width: calc(100% - 20px) !important;
        max-width: 90% !important;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: left;
        gap: 8px;
        margin: 16px 12px 12px;
        overflow: hidden;
      }

      #leftNavPane trident-object-explorer-outlet trident-object-explorer .oe-header .oe-filter {
        flex: 1;
        min-width: 0;
      }

      #leftNavPane trident-object-explorer-outlet trident-object-explorer .oe-header .oe-pin-button {
        flex: 0 0 16px;
        align: right !important;
      }
    `;
    head.appendChild(style);
  };

  waitForHead();
})();