☰

Greasy Fork is available in English.

Sidebar Customization for Outlook

Customize the Outlook sidebar with a draggable button.

// ==UserScript==
// @name         Sidebar Customization for Outlook
// @version      1.3.3
// @license      MIT 
// @description  Customize the Outlook sidebar with a draggable button.
// @author       "mustafa.yilmaz@outlook.com" - 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 = '53px';
        toggleButton.style.right = '192px';
        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 removeElements() {
        const hamburgerButton = document.querySelector('button.ms-Button[aria-label="Hide navigation pane"]');
        const leftRailPane = document.querySelector('#LeftRail');

        if (hamburgerButton) {
            hamburgerButton.closest('div.ms-TooltipHost').remove();
            console.log('Hamburger button removed.');
        } else {
            console.warn('Hamburger button not found.');
        }

        if (leftRailPane) {
            leftRailPane.remove();
            console.log('Left rail pane removed.');
        } else {
            console.warn('Left rail pane not found.');
        }
    }

    const observer = new MutationObserver(() => {
        const hamburgerButton = document.querySelector('button.ms-Button[aria-label="Hide navigation pane"]');
        const leftRailPane = document.querySelector('#LeftRail');
        if (hamburgerButton || leftRailPane) {
            observer.disconnect();
            removeElements();
        }
    });

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