☰

Reddit Sidebar and Subgrid Adjustment

Replace Reddit's navbar menu button with a custom hamburger menu, and adjust layout accordingly

当前为 2024-08-29 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Reddit Sidebar and Subgrid Adjustment
// @version      1.3
// @description  Replace Reddit's navbar menu button with a custom hamburger menu, and adjust layout accordingly
// @author       sj-jason
// @match        https://www.reddit.com/*
// @grant        none
// @run-at       document-end
// @license      MIT 
// @namespace https://greasyfork.org/users/1359671
// ==/UserScript==

(function() {
    'use strict';

    // Function to create and insert the hamburger menu
    function createHamburgerMenu() {
        const hamburger = document.createElement('div');
        hamburger.id = 'custom-hamburger';
        hamburger.innerHTML = `
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        `;

        const style = document.createElement('style');
        style.textContent = `
            #custom-hamburger {
                cursor: pointer;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 30px;
                height: 20px;
                position: absolute;
                top: 10px;
                z-index: 1000;
                background-color: transparent;
            }
            #custom-hamburger .bar {
                width: 30px;
                height: 4px;
                background-color: #fff;
                margin: 3px 0;
                transition: 0.3s;
            }
            #custom-hamburger.open .bar:nth-child(1) {
                transform: rotate(45deg);
                margin: 0;
            }
            #custom-hamburger.open .bar:nth-child(2) {
                opacity: 0;
            }
            #custom-hamburger.open .bar:nth-child(3) {
                transform: rotate(-45deg);
                margin: 0;
            }
        `;
        document.head.appendChild(style);

        const targetElement = document.querySelector('#reddit-logo > span.hidden.s\\:flex.items-center > svg');
        if (targetElement) {
            const rect = targetElement.getBoundingClientRect();
            hamburger.style.left = `${rect.right + window.scrollX + 10}px`;
            hamburger.style.top = `${rect.top + window.scrollY}px`;

            document.body.appendChild(hamburger);

            hamburger.addEventListener('click', () => {
                const sidebar = document.querySelector('#left-sidebar');
                const sidebarContainer = document.querySelector('#left-sidebar-container');
                const subgrid = document.querySelector('.subgrid-container');
                const mainContainer = document.querySelector('.main-container');

                if (sidebar && sidebarContainer) {
                    const isHidden = sidebar.classList.toggle('hidden');
                    sidebarContainer.classList.toggle('hidden', isHidden);

                    // Trigger reflow to apply style changes
                    document.body.offsetHeight;

                    if (mainContainer) {
                        mainContainer.classList.toggle('expanded', isHidden);
                    }
                }
                if (subgrid) {
                    subgrid.classList.toggle('expanded');
                }
                hamburger.classList.toggle('open');
            });
        }
    }

    // Function to remove the existing navbar menu button
    function removeExistingNavbarButton() {
        const existingButton = document.querySelector('#navbar-menu-button');
        if (existingButton) {
            existingButton.remove();
        }
    }

    // Add CSS for handling the sidebar and adjusting the layout
    const sidebarStyle = document.createElement('style');
    sidebarStyle.textContent = `
        #left-sidebar.hidden,
        #left-sidebar-container.hidden {
            display: none !important;
        }
        .subgrid-container.expanded,
        .main-container.expanded {
            margin-left: 0 !important;
            width: 100% !important;
            max-width: 100vw !important;
            box-sizing: border-box !important;
        }
        .main-container.expanded {
            width: calc(100% - 272px) !important;
            max-width: calc(100% - 272px) !important;
        }
        .subgrid-container {
            width: calc(100vw - 272px) !important;
            max-width: calc(100vw - 272px) !important;
        }
        .main-container {
            justify-content: center !important;
        }
        #main-content {
            max-width: calc(100% - 1rem - 316px) !important;
        }
        #right-sidebar-container:has(> aside) {
            display: none !important;
        }
        #main-content:has(+ #right-sidebar-container > aside) {
            max-width: 100% !important;
        }
        #main-content [slot='post-media-container'] shreddit-aspect-ratio {
            --max-height: min(100%, /*[[cardHeight]]*/) !important;
        }
        #main-content [slot='post-media-container'] gallery-carousel ul > li {
            width: auto !important;
        }
        #site-header {
            width: 100% !important;
            margin: 0 auto !important;
            box-sizing: border-box !important;
        }
    `;
    document.head.appendChild(sidebarStyle);

    // Initialize script after page load
    window.addEventListener('load', () => {
        createHamburgerMenu();
        removeExistingNavbarButton();
    });
})();