Hide Menu Section on TikTok for a cleaner view
// ==UserScript==
// @name TikTok - Hide Menu Section
// @description Hide Menu Section on TikTok for a cleaner view
// @version 1.0
// @grant none
// @include *://tiktok.com/*
// @include *://*.tiktok.com/*
// @license MIT
// @author @guerrerohgp
// @namespace https://greatest.deepsurf.us/users/1594918
// ==/UserScript==
(function() {
const CONTAINER_SELECTOR = '[class*="-DivSideNavContainer"]';
const BTN_ID = 'custom-collapse-toggle';
function injectToggleButton() {
const container = document.querySelector(CONTAINER_SELECTOR);
// Prevent duplicate buttons
if (!container || document.getElementById(BTN_ID)) return;
const btn = document.createElement('button');
btn.id = BTN_ID;
btn.innerHTML = '<span>✕</span> Hide';
// Premium styling to make it look integrated and modern
Object.assign(btn.style, {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '10px',
width: 'calc(100% - 20px)',
margin: '10px auto',
padding: '12px',
background: 'linear-gradient(135deg, #6366f1 0%, #a855f7 100%)',
color: 'white',
border: 'none',
borderRadius: '12px',
fontFamily: 'Inter, system-ui, sans-serif',
fontSize: '14px',
fontWeight: '600',
cursor: 'pointer',
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)',
zIndex: '1000'
});
// Hover effects
btn.onmouseenter = () => {
btn.style.transform = 'translateY(-2px)';
btn.style.boxShadow = '0 6px 16px rgba(99, 102, 241, 0.4)';
};
btn.onmouseleave = () => {
btn.style.transform = 'translateY(0)';
btn.style.boxShadow = '0 4px 12px rgba(99, 102, 241, 0.3)';
};
let isCollapsed = false;
btn.onclick = (e) => {
e.preventDefault();
e.stopPropagation();
isCollapsed = !isCollapsed;
// Hide/Show all other elements inside the container
Array.from(container.children).forEach(child => {
if (child !== btn) {
child.style.setProperty('display', isCollapsed ? 'none' : '', 'important');
}
});
// Update button state
if (isCollapsed) {
btn.innerHTML = '<span>☰</span> Show Menu';
btn.style.background = '#1e293b'; // Dark mode collapsed look
btn.style.width = 'fit-content';
btn.style.padding = '10px 20px';
} else {
btn.innerHTML = '<span>✕</span> Hide';
btn.style.background = 'linear-gradient(135deg, #6366f1 0%, #a855f7 100%)';
btn.style.width = 'calc(100% - 20px)';
btn.style.padding = '12px';
}
};
// Add to the top of the container
container.prepend(btn);
}
// Run immediately and also watch for DOM changes (in case the menu re-renders)
injectToggleButton();
const observer = new MutationObserver(() => injectToggleButton());
observer.observe(document.body, { childList: true, subtree: true });
})();