Allow the Google Drive sidebar to be collapsed.

gDriveCollapsible.js

// ==UserScript==
// @name         Make Google Drive Sidebar Collapsible
// @namespace    Teh Fishy Place
// @version      2024-08-02
// @description  Allow the Google Drive sidebar to be collapsed.
// @author       Pysis
// @author       Google
// @match        https://drive.google.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=google.com
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant        none
// ==/UserScript==

// @descriptionL With no feature to accomplish this in Google Drive, but seeing it exist in Google Mail (GMail), thought I would try making it myself, and it seems to work well, and is also configurable.
// @relation     https://support.google.com/drive/thread/288769378
// @relation     https://support.google.com/drive/thread/152219474
// @source       https://gist.github.com/Pysis868/c2197707d2d6fee4a4fece1573600d86

/* global $ */
/* global waitForKeyElements */

(function() {
  'use strict';

  if(!localStorage.debugLoad == 'true') debugger;

  // The Menu button width is 24px + 2x12px padding = '48px'.
  // I saw '56px' at some other time.
  // '70px' seems nice to show the icons similar to other applications.
  if(!localStorage.widthSmall) localStorage.widthSmall = '70px';

  // Menu Button HTML - Sourced from Google Mail (GMail)
  let elMenuBtnTemplate = '' +
    '<div class="gb_Fc" aria-expanded="true" aria-label="Main menu" data-ogmb="1" role="button" tabindex="0" style="font-size: xx-large;">' +
      '🠜' +
    '</div>'
  ;

  //     '<svg focusable="false" viewBox="0 0 24 24">' +
  //       '<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>' +
  //    '</svg>' +

  // 🍔

  // CSS Selectors
  let elContentAreaSel = '#drive_main_page .YkfxEe.mXlnof';
  // let elSidebarTopLogoAreaSel = '.ak25Me header[role="banner"] .gb_jd.gb_cd.gb_qd .gb_id.gb_8c';
  // let elSidebarTopLogoAreaSel = '.ak25Me header[role="banner"] .gb_id.gb_md.gb_Dd .gb_ud.gb_pd';
  let elSidebarTopLogoAreaSel = '.ak25Me > header[role="banner"] > *:nth-child(2) > *:nth-child(1)';
  // let elSidebarTopLogoAreaLogoSel = '.gb_yc';
  let elSidebarTopLogoAreaLogoSel = ':not([aria-label]) [aria-label="Drive"]';
  let elSidebarNewButtonAreaSel = '.ZHllM';
  let elSidebarLocationsAreaSel = '.ALpC8b.fVVp2c';

  let refs = {};
  //window.refsGlobal = refs;

  let pageLoadFn = function(elContentAreaJQ) {
    if(!localStorage.debugLoadPage == 'true') debugger;
    setRefsFn(elContentAreaJQ);
    addMenuBtnFn();
    allowSmallerWidthFn();

    if(localStorage.expanded = 'false') toggleWidthFn();
  };
  let setRefsFn = function(elContentAreaJQ) {
    refs.elContentArea = elContentAreaJQ[0];
    refs.elSidebarTopLogoArea = refs.elContentArea.querySelector(elSidebarTopLogoAreaSel);
    refs.elSidebarTopLogoAreaLogo = refs.elSidebarTopLogoArea.querySelector(elSidebarTopLogoAreaLogoSel).parentNode.parentNode;
    refs.elSidebarNewButtonArea = refs.elContentArea.querySelector(elSidebarNewButtonAreaSel);
    refs.elSidebarLocationsArea = refs.elContentArea.querySelector(elSidebarLocationsAreaSel);
  };
  let addMenuBtnFn = function() {
    refs.elMenuBtnWrapper = document.createElement('div');
    refs.elMenuBtnWrapper.innerHTML = elMenuBtnTemplate;
    refs.elMenuBtnWrapper.style['margin-left'] = '20px';
    refs.elMenuBtnWrapper.style['margin-right'] = '4px';
    refs.elMenuBtn = refs.elMenuBtnWrapper.querySelector('.gb_Fc[role="button"]');
    refs.elMenuBtn.addEventListener('click', toggleWidthFn);

    refs.elSidebarTopLogoArea.insertBefore(refs.elMenuBtnWrapper, refs.elSidebarTopLogoAreaLogo);
  };
  let toggleWidthFn = function() {
    //console.log('Entered toggleWidthFn.');

    let expanded = refs.elMenuBtn.getAttribute('aria-expanded');
    //console.log(`expanded: ${expanded}`);

    if(expanded === 'true') {
      //console.log('Making sidebar elements width smaller...');
      refs.elSidebarTopLogoArea.style.width = localStorage.widthSmall;
      refs.elSidebarNewButtonArea.style.width = localStorage.widthSmall;
      refs.elSidebarLocationsArea.style.width = localStorage.widthSmall;
      refs.elSidebarTopLogoArea.style.overflow = 'hidden';
      refs.elSidebarNewButtonArea.style.overflow = 'hidden';
      refs.elSidebarLocationsArea.style.overflow = 'hidden';
      refs.elMenuBtn.innerText = '🠞';

      expanded = 'false';
    } else if(expanded === 'false') {
      //console.log('Resetting sidebar elements width...');
      refs.elSidebarTopLogoArea.style.width = '';
      refs.elSidebarNewButtonArea.style.width = '';
      refs.elSidebarLocationsArea.style.width = '';
      refs.elSidebarTopLogoArea.style.overflow = 'initial';
      refs.elSidebarNewButtonArea.style.overflow = 'initial';
      refs.elSidebarLocationsArea.style.overflow = 'initial';
      refs.elMenuBtn.innerText = '🠜';

      expanded = 'true';
    }

    refs.elMenuBtn.setAttribute('aria-expanded', expanded);
    localStorage.expanded = expanded;

    //console.log('Leaving toggleWidthFn...');
  };
  let allowSmallerWidthFn = function() {
    refs.elSidebarTopLogoArea.style.minWidth = localStorage.widthSmall;
    refs.elSidebarLocationsArea.style.minWidth = localStorage.widthSmall;
  };

  if(!localStorage.expanded) localStorage.expanded = 'true';

  waitForKeyElements(elContentAreaSel, pageLoadFn, false);
})();