Sidebar Customization for Outlook

Customize the Outlook sidebar with a draggable button and hide hamburger menu.
安裝腳本 ?
換行
// ==UserScript==

// @name         Sidebar Customization for Outlook

// @version      1.6.0

// @license      MIT

// @description  Customize the Outlook sidebar with a draggable button and hide hamburger menu.

// @author       "[email protected]" - generated by ChatGPT from scratch.

// @match        *://*.outlook.office.com/mail*

// @match        *://*.outlook.office365.com/mail*

// @match        *://outlook.live.com/mail*

// @grant        none

// @namespace    https://greasyfork.org/users/1388250

// ==/UserScript==



(function () {

    'use strict';



    function isInboxDetailView() {

        const url = window.location.href;

        const inboxDetailPattern = /\/inbox\/id\//;

        return inboxDetailPattern.test(url);

    }



    function setupSidebar() {

        const sidebar = document.querySelector('[aria-label="Navigation pane"]');

        const content = document.querySelector('._3K3vkj8V');

        const flvp1Element = document.querySelector('.Flvp1'); // Select the element to modify



        if (!sidebar) {

            console.warn("Sidebar not found.");

            return;

        }



        sidebar.style.position = 'fixed';

        sidebar.style.top = '40px';

        sidebar.style.right = '0';

        sidebar.style.left = 'auto';

        sidebar.style.height = '96%';

        sidebar.style.width = '175px';

        sidebar.style.zIndex = '1000';

        sidebar.style.overflowY = 'auto';

        sidebar.style.transition = 'all 0.3s ease';



        if (content) {

            content.style.marginLeft = '0';

            content.style.marginRight = '0';

        }



        const toggleButton = document.createElement('button');

        toggleButton.style.position = 'fixed';

        toggleButton.style.top = '52px';

        toggleButton.style.right = '414px';

        toggleButton.style.cursor = 'pointer';

        toggleButton.style.border = 'none';

        toggleButton.style.backgroundColor = '#0078D4';

        toggleButton.style.color = 'white';

        toggleButton.style.padding = '5px 10px';

        toggleButton.style.borderRadius = '4px';

        toggleButton.style.fontSize = '12px';

        toggleButton.style.zIndex = '1001';

        toggleButton.style.display = 'flex';

        toggleButton.style.alignItems = 'center';

        toggleButton.style.gap = '10px';



        const dragHandle = document.createElement('div');

        dragHandle.style.display = 'grid';

        dragHandle.style.gridTemplateColumns = 'repeat(2, auto)';

        dragHandle.style.gap = '2px';

        dragHandle.style.cursor = 'grab';



        for (let i = 0; i < 6; i++) {

            const dot = document.createElement('div');

            dot.style.width = '3px';

            dot.style.height = '3px';

            dot.style.backgroundColor = 'white';

            dot.style.borderRadius = '50%';

            dragHandle.appendChild(dot);

        }



        const buttonText = document.createElement('span');

        buttonText.textContent = 'Show Sidebar';



        toggleButton.appendChild(dragHandle);

        toggleButton.appendChild(buttonText);

        document.body.appendChild(toggleButton);



        let isSidebarVisible = !isInboxDetailView();



        function updateSidebarVisibility() {

            sidebar.style.display = isSidebarVisible ? '' : 'none';

            buttonText.textContent = isSidebarVisible ? 'Hide Sidebar' : 'Show Sidebar';

            if (content) {

                content.style.marginRight = isSidebarVisible ? '0' : '0';

            }



            // Adjust the .Flvp1 element's padding-right

            if (flvp1Element) {

                flvp1Element.style.paddingRight = isSidebarVisible ? '170px' : '0';

            }

        }



        toggleButton.addEventListener('click', (event) => {

            if (event.target !== dragHandle) {

                isSidebarVisible = !isSidebarVisible;

                updateSidebarVisibility();

            }

        });



        updateSidebarVisibility();



        let isDragging = false;

        let offsetX, offsetY;



        dragHandle.addEventListener('mousedown', (event) => {

            isDragging = true;

            offsetX = event.clientX - toggleButton.getBoundingClientRect().left;

            offsetY = event.clientY - toggleButton.getBoundingClientRect().top;

            document.body.style.userSelect = 'none';

            dragHandle.style.cursor = 'grabbing';

        });



        document.addEventListener('mousemove', (event) => {

            if (isDragging) {

                toggleButton.style.top = `${event.clientY - offsetY}px`;

                toggleButton.style.left = `${event.clientX - offsetX}px`;

                toggleButton.style.right = 'auto';

            }

        });



        document.addEventListener('mouseup', () => {

            isDragging = false;

            document.body.style.userSelect = '';

            dragHandle.style.cursor = 'grab';

        });

    }



    const observer = new MutationObserver(() => {

        const sidebar = document.querySelector('[aria-label="Navigation pane"]');

        if (sidebar) {

            observer.disconnect();

            setupSidebar();

        }

    });



    observer.observe(document.body, { childList: true, subtree: true });

})();



(function () {

    'use strict';



    function removeHamburgerButton() {

        // Try multiple selectors to find the hamburger button

        const selectors = [

            'button.ms-Button[aria-label="Hide navigation pane"]',

            'button.ms-Button[aria-label="Show navigation pane"]',

            'button[aria-label="Hide navigation pane"]',

            'button[aria-label="Show navigation pane"]',

            'button[data-icon-name="GlobalNavButton"]',

            'button[data-app-section-name="LeftNavigation"]'

        ];



        let hamburgerButton = null;



        // Try each selector

        for (const selector of selectors) {

            hamburgerButton = document.querySelector(selector);

            if (hamburgerButton) {

                console.log(`Hamburger button found with selector: ${selector}`);

                break;

            }

        }



        if (hamburgerButton) {

            // Try to remove the button and its tooltip wrapper

            const tooltipHost = hamburgerButton.closest('div.ms-TooltipHost');

            if (tooltipHost) {

                tooltipHost.style.display = 'none';

                console.log('Hamburger button (with tooltip) hidden.');

            } else {

                hamburgerButton.style.display = 'none';

                console.log('Hamburger button hidden.');

            }

            return true;

        } else {

            console.warn('Hamburger button not found with any selector.');

            return false;

        }

    }



    function removeElements() {

        removeHamburgerButton();



        const leftRailPane = document.querySelector('#LeftRail');

        if (leftRailPane) {

            leftRailPane.remove();

            console.log('Left rail pane removed.');

        } else {

            console.warn('Left rail pane not found.');

        }

    }



    // Initial check

    removeElements();



    // Continuous monitoring for hamburger button

    const hamburgerObserver = new MutationObserver(() => {

        removeHamburgerButton();

    });



    // Start observing when the header is available

    const checkForHeader = setInterval(() => {

        const header = document.querySelector('header') || document.querySelector('[role="banner"]');

        if (header) {

            clearInterval(checkForHeader);

            hamburgerObserver.observe(header, { childList: true, subtree: true });

            console.log('Started monitoring for hamburger button.');

        }

    }, 500);



    // Also observe the entire body for left rail pane

    const observer = new MutationObserver(() => {

        const leftRailPane = document.querySelector('#LeftRail');

        if (leftRailPane) {

            leftRailPane.remove();

            console.log('Left rail pane removed (via observer).');

        }

    });



    observer.observe(document.body, { childList: true, subtree: true });

})();