toggle_sidebar.user.js

// ==UserScript==
// @name         Discord Toggle Sidebar
// @namespace    https://github.com/scarf005
// @homepage     https://gist.github.com/scarf005/5849921063d34744fde3494abd5ea107
// @updateURL    https://gist.githubusercontent.com/scarf005/5849921063d34744fde3494abd5ea107/raw/toggle_sidebar.user.js
// @downloadURL  https://gist.githubusercontent.com/scarf005/5849921063d34744fde3494abd5ea107/raw/toggle_sidebar.user.js
// @version      0.6.0
// @description  Toggles Discord sidebar
// @author       scarf
// @license      MIT
// @match        https://discord.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=discord.com
// @grant        GM_registerMenuCommand
// @run-at       document-idle
// @require      https://cdn.jsdelivr.net/npm/@violentmonkey/shortcut@1
// ==/UserScript==

{
    "use strict"
    const { register } = VM.shortcut

    /** @param {TemplateStringsArray} texts */
    const css = ([text]) => {
        const sheet = new CSSStyleSheet()
        sheet.replaceSync(text)
        document.adoptedStyleSheets.push(sheet)

        return sheet
    }

    const servers = css`nav[aria-label="서버 사이드바"] { visibility: hidden; }`
    const channels = css`div[class^="sidebar"] { visibility: hidden; }`
    const members = css`div[class^=container_]:has(> aside > div > [aria-label="멤버"]) { visibility: hidden; }`
    const header = css`section[aria-label="채널 헤더"] { display: none; }`

    /** @param {CSSStyleSheet} style */
    const toggleStyle = (style) => () => style.disabled = !style.disabled

    /** @param {{ name: string, sheet: CSSStyleSheet, shortcut: string }} */
    const menu = ({ name, sheet, shortcut }) => {
        const fn = toggleStyle(sheet)
        GM_registerMenuCommand(name, fn)
        register(shortcut, fn)
    }

    menu({ name: "서버 토글", shortcut: "c-1", sheet: servers })
    menu({ name: "채널 토글", shortcut: "c-2", sheet: channels })
    menu({ name: "멤버 토글", shortcut: "c-3", sheet: members })
    menu({ name: "헤더 토글", shortcut: "c-4", sheet: header })

    servers.disabled = true
    channels.disabled = true
    css`
      div[class*="baseLayer"] > div[class^="container"] { background: var(--bg-overlay-chat,var(--background-primary)); }
      main[class^="chatContent"] {
        border-left: 1px solid var(--background-tertiary);
        border-right: 1px solid var(--background-tertiary);
      }
    `
}