☰

Sidebar Customization for Outlook

Customize the Outlook sidebar with a draggable button.

  1. // ==UserScript==
  2. // @name         Sidebar Customization for Outlook
  3. // @version      1.3.3
  4. // @license      MIT 
  5. // @description  Customize the Outlook sidebar with a draggable button.
  6. // @author       "mustafa.yilmaz@outlook.com" - generated by ChatGPT from scratch.
  7. // @match        *://*.outlook.office.com/mail*
  8. // @match        *://*.outlook.office365.com/mail*
  9. // @match        *://outlook.live.com/mail*
  10. // @grant        none
  11. // @namespace    https://greasyfork.org/users/1388250
  12. // ==/UserScript==
  13.  
  14. (function () {
  15.     'use strict';
  16.  
  17.     function isInboxDetailView() {
  18.         const url = window.location.href;
  19.         const inboxDetailPattern = /\/inbox\/id\//;
  20.         return inboxDetailPattern.test(url);
  21.     }
  22.  
  23.     function setupSidebar() {
  24.         const sidebar = document.querySelector('[aria-label="Navigation pane"]');
  25.         const content = document.querySelector('._3K3vkj8V');
  26.         const flvp1Element = document.querySelector('.Flvp1'); // Select the element to modify
  27.  
  28.         if (!sidebar) {
  29.             console.warn("Sidebar not found.");
  30.             return;
  31.         }
  32.  
  33.         sidebar.style.position = 'fixed';
  34.         sidebar.style.top = '40px';
  35.         sidebar.style.right = '0';
  36.         sidebar.style.left = 'auto';
  37.         sidebar.style.height = '96%';
  38.         sidebar.style.width = '175px';
  39.         sidebar.style.zIndex = '1000';
  40.         sidebar.style.overflowY = 'auto';
  41.         sidebar.style.transition = 'all 0.3s ease';
  42.  
  43.         if (content) {
  44.             content.style.marginLeft = '0';
  45.             content.style.marginRight = '0';
  46.         }
  47.  
  48.         const toggleButton = document.createElement('button');
  49.         toggleButton.style.position = 'fixed';
  50.         toggleButton.style.top = '53px';
  51.         toggleButton.style.right = '192px';
  52.         toggleButton.style.cursor = 'pointer';
  53.         toggleButton.style.border = 'none';
  54.         toggleButton.style.backgroundColor = '#0078D4';
  55.         toggleButton.style.color = 'white';
  56.         toggleButton.style.padding = '5px 10px';
  57.         toggleButton.style.borderRadius = '4px';
  58.         toggleButton.style.fontSize = '12px';
  59.         toggleButton.style.zIndex = '1001';
  60.         toggleButton.style.display = 'flex';
  61.         toggleButton.style.alignItems = 'center';
  62.         toggleButton.style.gap = '10px';
  63.  
  64.         const dragHandle = document.createElement('div');
  65.         dragHandle.style.display = 'grid';
  66.         dragHandle.style.gridTemplateColumns = 'repeat(2, auto)';
  67.         dragHandle.style.gap = '2px';
  68.         dragHandle.style.cursor = 'grab';
  69.  
  70.         for (let i = 0; i < 6; i++) {
  71.             const dot = document.createElement('div');
  72.             dot.style.width = '3px';
  73.             dot.style.height = '3px';
  74.             dot.style.backgroundColor = 'white';
  75.             dot.style.borderRadius = '50%';
  76.             dragHandle.appendChild(dot);
  77.         }
  78.  
  79.         const buttonText = document.createElement('span');
  80.         buttonText.textContent = 'Show Sidebar';
  81.  
  82.         toggleButton.appendChild(dragHandle);
  83.         toggleButton.appendChild(buttonText);
  84.         document.body.appendChild(toggleButton);
  85.  
  86.         let isSidebarVisible = !isInboxDetailView();
  87.  
  88.         function updateSidebarVisibility() {
  89.             sidebar.style.display = isSidebarVisible ? '' : 'none';
  90.             buttonText.textContent = isSidebarVisible ? 'Hide Sidebar' : 'Show Sidebar';
  91.             if (content) {
  92.                 content.style.marginRight = isSidebarVisible ? '0' : '0';
  93.             }
  94.  
  95.             // Adjust the .Flvp1 element's padding-right
  96.             if (flvp1Element) {
  97.                 flvp1Element.style.paddingRight = isSidebarVisible ? '170px' : '0';
  98.             }
  99.         }
  100.  
  101.         toggleButton.addEventListener('click', (event) => {
  102.             if (event.target !== dragHandle) {
  103.                 isSidebarVisible = !isSidebarVisible;
  104.                 updateSidebarVisibility();
  105.             }
  106.         });
  107.  
  108.         updateSidebarVisibility();
  109.  
  110.         let isDragging = false;
  111.         let offsetX, offsetY;
  112.  
  113.         dragHandle.addEventListener('mousedown', (event) => {
  114.             isDragging = true;
  115.             offsetX = event.clientX - toggleButton.getBoundingClientRect().left;
  116.             offsetY = event.clientY - toggleButton.getBoundingClientRect().top;
  117.             document.body.style.userSelect = 'none';
  118.             dragHandle.style.cursor = 'grabbing';
  119.         });
  120.  
  121.         document.addEventListener('mousemove', (event) => {
  122.             if (isDragging) {
  123.                 toggleButton.style.top = `${event.clientY - offsetY}px`;
  124.                 toggleButton.style.left = `${event.clientX - offsetX}px`;
  125.                 toggleButton.style.right = 'auto';
  126.             }
  127.         });
  128.  
  129.         document.addEventListener('mouseup', () => {
  130.             isDragging = false;
  131.             document.body.style.userSelect = '';
  132.             dragHandle.style.cursor = 'grab';
  133.         });
  134.     }
  135.  
  136.     const observer = new MutationObserver(() => {
  137.         const sidebar = document.querySelector('[aria-label="Navigation pane"]');
  138.         if (sidebar) {
  139.             observer.disconnect();
  140.             setupSidebar();
  141.         }
  142.     });
  143.  
  144.     observer.observe(document.body, { childList: true, subtree: true });
  145. })();
  146.  
  147. (function () {
  148.     'use strict';
  149.  
  150.     function removeElements() {
  151.         const hamburgerButton = document.querySelector('button.ms-Button[aria-label="Hide navigation pane"]');
  152.         const leftRailPane = document.querySelector('#LeftRail');
  153.  
  154.         if (hamburgerButton) {
  155.             hamburgerButton.closest('div.ms-TooltipHost').remove();
  156.             console.log('Hamburger button removed.');
  157.         } else {
  158.             console.warn('Hamburger button not found.');
  159.         }
  160.  
  161.         if (leftRailPane) {
  162.             leftRailPane.remove();
  163.             console.log('Left rail pane removed.');
  164.         } else {
  165.             console.warn('Left rail pane not found.');
  166.         }
  167.     }
  168.  
  169.     const observer = new MutationObserver(() => {
  170.         const hamburgerButton = document.querySelector('button.ms-Button[aria-label="Hide navigation pane"]');
  171.         const leftRailPane = document.querySelector('#LeftRail');
  172.         if (hamburgerButton || leftRailPane) {
  173.             observer.disconnect();
  174.             removeElements();
  175.         }
  176.     });
  177.  
  178.     observer.observe(document.body, { childList: true, subtree: true });
  179. })();