Dabble remove sidebars

Greasy Fork is available in English.
Dabble remove sidebars

remove both/left sidebar from Dabble; right still needs more work... no longer with a hideous button!
换行
// ==UserScript==
// @name         Dabble remove sidebars
// @namespace    http://tampermonkey.net/
// @version      0.1.1
// @description  remove both/left sidebar from Dabble; right still needs more work... no longer with a hideous button! 
// @include      https://app.dabblewriter.com/*
// @include      https://app.dabblewriter.com/#/*
// @author       Me
// @match        https://www.tampermonkey.net/index.php?ext=dhdg
// @grant        none
// ==/UserScript==

//my first js, ok? i'll fix it up when i have time.

let header;
let btnHide;
let btnHideRight;
let btnHideLeft;

let hidden = false;
let hiddenR = false;
let hiddenL = false;

(function() {
    'use strict';

    header = document.querySelector('.app-header-left');

    btnHide = document.createElement('button');
    //btnHideRight = document.createElement('button');
    btnHideLeft = document.createElement('button');
    //btnSpan = document.createElement('span');

    btnHide.textContent = 'Hide All';
    btnHide.style.color = 'grey';
    btnHide.style.border = 'none';
    btnHide.style.background = 'transparent'
    //btnHideRight.textContent = 'right';
    btnHideLeft.textContent = 'Hide Left';
    btnHideLeft.style.color = 'grey';
    btnHideLeft.style.border = 'none';
    btnHideLeft.style.background = 'transparent'

    btnHide.className = 'hide-bars-toggle';

    header.insertBefore(btnHide, document.querySelector('.app-header-nav'));
    header.insertBefore(btnHideLeft, document.querySelector('.app-header-nav'));
    //header.insertBefore(btnHideRight, document.querySelector('.app-header-nav'));

    btnHide.addEventListener('click', hideSides);
    //btnHideRight.addEventListener('click', hideRight);
    btnHideLeft.addEventListener('click', hideLeft);

})();

function hideSides() {
    let sideBar = document.querySelectorAll('.side-nav');
    let i;

    if (!hidden)
    {
        for (i = 0; i < sideBar.length; i++)
        {
            sideBar[i].style.display = 'none';
        }
        btnHide.textContent = 'Show All';
    }
    else
    {
       for (i = 0; i < sideBar.length; i++)
        {
            sideBar[i].style.display = 'flex';
        }
        btnHide.textContent = 'Hide All';
    }

    hidden = !hidden;
}

function hideLeft() {
    let leftBar = document.getElementsByClassName('left');
    if (!hiddenL)
    {
        leftBar[0].style.display = 'none';
        btnHideLeft.textContent = 'Show Left';
    }
    else
    {
        leftBar[0].style.display = 'flex';
        btnHideLeft.textContent = 'Hide Left';
    }

    hiddenL = !hiddenL;
}

//for whatever reasons this doesn't work. i'd fix but i have a train to catch.
function hideRight() {
    let rightBar = document.getElementsByClassName('right');

    if (!hiddenR)
    {
        rightBar[0].style.display = 'none';
    }
    else
    {
        rightBar[0].style.display = 'flex';
    }

    hiddenR = !hiddenR;
}