Reddit Sidebar Toggle

Created 4 months ago
Updated 4 months ago
Toggle Reddit's sidebar with a button and remember the state across pages.
#Reddit
#侧边栏折叠
#UI增强
Statistics
Total Installs
74
Last 24h
+0
User Rating
-
切换Reddit侧边栏并记住状态

This Userscript, Reddit Sidebar Toggle, is a productivity utility designed to give you more screen real estate while browsing Reddit. It adds a persistent, stylish toggle button to the Reddit header, allowing you to hide or show the sidebar on demand.


## Key Features

  • One-Click Toggle: Instantly hide the left or right sidebar to focus on content.
  • Persistent State: Uses localStorage to remember your preference. If you hide the sidebar, it stays hidden even after you refresh the page or navigate to a different subreddit.
  • Dynamic Loading Support: Since Reddit is a Single Page Application (SPA), the script uses a MutationObserver to ensure the toggle button remains available even as new content loads or you navigate between pages.
  • Sleek UI: Features a custom-styled, Reddit-orange button with intuitive SVG icons (Eye/Eye-Slash) that blend seamlessly into the modern Reddit interface.

## How It Works

  1. Injection: The script searches for the Reddit header container and injects a custom <button> element.
  2. Detection: It targets common Reddit sidebar selectors such as [data-testid="left-sidebar"] and .left-sidebar.
  3. Action: * When clicked, it toggles the CSS display property of the sidebar.
    • It updates the button icon to reflect the current visibility status.
    • It saves the state (true or false) to your browser's local storage.
  4. Auto-Refresh: On every page change, the script checks your saved preference and applies it automatically before you even notice.

## Technical Details

Component Description
Language JavaScript (ES6+)
Storage localStorage (Key: redditSidebarHidden)
Performance Debounced observer (300ms) to prevent lag during DOM shifts.
Compatibility Works with Violentmonkey, Tampermonkey, and Greasemonkey on modern Reddit layouts.

## Installation

  1. Install a userscript manager like ScriptCat.
  2. Copy the code provided or click the "Raw" link from the GitHub repository.
  3. The manager will prompt you to install the script.
  4. Refresh Reddit, and look for the orange eye icon in the top header!
Script Details
Applicable Sites
License
Not declared
No license declared — reuse with caution