TikTok - Hide Menu Section

Hide Menu Section on TikTok for a cleaner view
Ask a question, post a review, or report the script.
Wrap lines
// ==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://greasyfork.org/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 });
})();