kittie / Old Roblox Sidebar

// ==UserScript==
// @namespace     https://openuserjs.org/users/kittie
// @name          Old Roblox Sidebar
// @description   reverts the sidebar to the better unrounded version (beta might have bugs)
// @copyright     2026, kittie (https://openuserjs.org/users/kittie)
// @license       MIT
// @version       0.0.6
// @author        kittie
// @include       *://www.roblox.com/*
// @include       *://web.roblox.com/*
// @icon          https://tr.rbxcdn.com/180DAY-a1bbfac1839c57688950fec8e5e44281/50/50/Hat/PNG/noFilter
// @updateURL     https://openuserjs.org/meta/kittie/Old_Roblox_Sidebar.meta.js
// @homepage      https://www.roblox.com/users/4424578847/profile
// @grant         none
// ==/UserScript==

(function() {
    'use strict';

    // Inject CSS for the page offset fix so content adjusts to the old sidebar width
    const customCSS = `
        #container-main {
            --left-nav-reserved-width: 225px !important;
        }
        .no-gutter-ads.left-nav-new-width footer.container-footer {
            width: calc(100% - 175px);
        }
    `;

    const styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.appendChild(document.createTextNode(customCSS));
    (document.head || document.documentElement).appendChild(styleElement);

    // The classic HTML template you want to force-render
    const classicSidebarHTML = `
        <div id="navigation" class="rbx-left-col" style="display: block !important;">
            <ul>
                <li>
                    <a class="dynamic-overflow-container text-nav" href="https://www.roblox.com/users/profile" role="link">
                        <span class="avatar avatar-headshot-xs">
                            <span class="thumbnail-2d-container avatar-card-image">
                                <img src="https://tr.rbxcdn.com/30DAY-AvatarHeadshot-3155D4DD0B0190E6D78E31646F0F579F-Png/150/150/AvatarHeadshot/Webp/noFilter" alt="Miaou_555">
                            </span>
                        </span>
                        <span class="font-header-2 dynamic-ellipsis-item">Miaou_555</span>
                    </a>
                </li>
                <li class="rbx-divider"></li>
            </ul>
            <ul class="left-col-list">
                <li><a class="text-nav" href="https://www.roblox.com/home" id="nav-home"><span class="icon-nav-home"></span><span title="Home">Home</span></a></li>
                <li><a class="text-nav" href="https://www.roblox.com/users/profile" id="nav-profile"><span class="icon-nav-profile"></span><span title="Profile">Profile</span></a></li>
                <li><a class="dynamic-overflow-container text-nav" href="https://www.roblox.com/my/messages/#!/inbox" id="nav-message" target="_self"><div><span class="icon-nav-message"></span></div><span class="font-header-2 dynamic-ellipsis-item" title="Messages">Messages</span><div class="dynamic-width-item align-right"><span class="notification-blue notification" title="3">3</span></div></a></li>
                <li><a class="dynamic-overflow-container text-nav" href="https://www.roblox.com/users/friends#!/friend-requests" id="nav-friends" target="_self"><div><span class="icon-nav-friends"></span></div><span class="font-header-2 dynamic-ellipsis-item" title="Friends">Friends</span><div class="dynamic-width-item align-right"><span class="notification-blue notification" title="42">42</span></div></a></li>
                <li><a class="text-nav" href="https://www.roblox.com/my/avatar" id="nav-character"><span class="icon-nav-charactercustomizer"></span><span title="Avatar">Avatar</span></a></li>
                <li><a class="text-nav" href="https://www.roblox.com/users/inventory" id="nav-inventory"><span class="icon-nav-inventory"></span><span title="Inventory">Inventory</span></a></li>
                <li><a class="text-nav" href="https://www.roblox.com/trades" id="nav-trade"><span class="icon-nav-trade"></span><span title="Trade">Trade</span></a></li>
                <li><a class="text-nav" href="https://www.roblox.com/communities" id="nav-group"><span class="icon-nav-group"></span><span title="Communities">Communities</span></a></li>
                <li><a class="dynamic-overflow-container -nav" href="https://blog.roblox.com" id="nav-blog" target="_blank"><div><span class="icon-nav-blog"></span></div><span class="font-header-2 dynamic-ellipsis-item" title="Blog">Blog</span></a></li>
                <li><button id="nav-shop" type="button" class="dynamic-overflow-container text-nav"><div><span class="icon-nav-shop"></span></div><span class="font-header-2 dynamic-ellipsis-item" title="Official Store">Official Store</span></button></li>
                <li><a class="dynamic-overflow-container text-nav" href="https://www.roblox.com/giftcards-us" id="nav-giftcards" target="_self"><div><span class="icon-nav-giftcards"></span></div><span class="font-header-2 dynamic-ellipsis-item" title="Buy Gift Cards">Buy Gift Cards</span></a></li>
                <li class="rbx-upgrade-now"><a href="https://www.roblox.com/plus" class="btn-growth-md btn-secondary-md" id="upgrade-now-button">Roblox Plus</a></li>
            </ul>
        </div>
    `;

    // Function to replace the new container content with the old structure
    function applyClassicSidebar() {
        const container = document.getElementById('left-navigation-container');
        if (container && !container.dataset.classicInjected) {
            container.innerHTML = classicSidebarHTML;
            container.dataset.classicInjected = "true"; // Prevent infinite loops
        }
    }

    // Use a MutationObserver to catch Roblox's dynamic re-renders SPA-wide
    const observer = new MutationObserver((mutations) => {
        applyClassicSidebar();
    });

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

    window.addEventListener('DOMContentLoaded', applyClassicSidebar);
})();