Youtube Collapse Sidebar

collapse youtube sidebar
// ==UserScript==
// @name            Youtube Collapse Sidebar
// @version         1.3.7
// @description     collapse youtube sidebar
// @namespace       https://greasyfork.org/users/821661
// @match           https://www.youtube.com/*
// @grant           GM_addStyle
// @grant           GM_setValue
// @grant           GM_getValue
// @grant           GM_registerMenuCommand
// @icon            https://cdn-icons-png.flaticon.com/512/7711/7711100.png
// @author          hdyzen
// @license         MIT
// ==/UserScript==
(function () {
	('use strict');

	let i = '!important';
	let guideP = 'ytd-app[guide-persistent-and-visible]';
	let guideM = 'ytd-app[mini-guide-visible]';
	let useJS = GM_getValue('useJS', false);

	const id = GM_registerMenuCommand(
		'Using CSS',
		() => {
			GM_setValue('useJS', !useJS);
			location.reload();
		},
		{
			title: 'Use JS',
		},
	);
	if (useJS) {
		GM_registerMenuCommand(
			'Using JS',
			() => {
				GM_setValue('useJS', !useJS);
				location.reload();
			},
			{
				title: 'Use CSS',
				id: id,
			},
		);
		const observer = new MutationObserver((mutations) => {
			mutations.forEach((mutation) => {
				if (mutation.type === 'attributes' && mutation.target.hasAttribute('guide-persistent-and-visible')) {
					console.log(mutation);
					mutation.target.removeAttribute('guide-persistent-and-visible');
					mutation.target.setAttribute('mini-guide-visible', '');
					mutation.target.querySelector('[opened]').removeAttribute('opened');
					observer.disconnect();
				}
			});
		});

		observer.observe(document.querySelector('ytd-app'), {
			childList: true,
			attributes: true,
		});
	}

	if (!useJS) {
		let style = GM_addStyle(`
        @media only screen and (min-width: 1313px) {
            /*== Persist Guide ==*/
            ${guideP} tp-yt-app-drawer {
                display: none ${i};
            }
            ${guideP} tp-yt-app-header {
                left: 72px ${i};
            }
            ${guideP} #channel-container {
                max-height: 218px ${i};
            }
            ${guideP} ytd-page-manager {
                margin-left: var(--ytd-mini-guide-width) ${i};
            }
            ${guideP} ytd-mini-guide-renderer {
                display: unset ${i};
            }
            ${guideP} ytd-playlist-header-renderer.ytd-browse {
                left: var(--ytd-mini-guide-width) ${i};
            }
            /*== Mini Guide ==*/
            ${guideM} tp-yt-app-drawer {
                display: unset ${i};
                visibility: visible ${i};
            }
            ${guideM} tp-yt-app-header {
                left: 240px ${i};
            }
            ${guideM} tp-yt-app-header + #contentContainer  {
                padding-top: 485px ${i};
            }
            ${guideM} #channel-container {
                max-height: 230px ${i};
            }
            ${guideM} ytd-page-manager {
                margin-left: var(--app-drawer-width) ${i};
            }
            ${guideM} ytd-mini-guide-renderer {
                display: none ${i};
            }
            ${guideM} #scrim.tp-yt-app-drawer {
                opacity: 1 ${i};
            }
            ${guideM} #contentContainer.tp-yt-app-drawer {
                transform: translate3d(0, 0, 0) ${i};
            }
            ${guideM} #contentContainer.tp-yt-app-drawer #header.ytd-app {
                display: none ${i};
            }
            ${guideM} ytd-playlist-header-renderer.ytd-browse {
                left: var(--app-drawer-width) ${i};
            }
        }
    `);
	}
})();