Discord Userscript: Adds a NSFW button and adds a visibility toggle button for the channel bar in the server list. (Extra Buttons In Server List)

discord.extrabuttons.user.js

// ==UserScript==
// @name Discord Extra Buttons In Server List
// @description Adds a NSFW button and adds a visibility toggle button for the channel bar in the server list.
// @namespace Violentmonkey Scripts
// @grant none
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
// @match       *://discordapp.com/*
// ==/UserScript==
// 
var hidden = false;
var nsfw = false;

$('.btn-download-apps').after($('<button style="background-color: #2e3136; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); border-radius: 25px; padding: 0px; width: 50px; height: 50px; font-size: 13px; color: #fff; font-weight: normal; text-align: center; margin-top: 10px;" type="button" id="toggleBar">Toggle</button>'));
$('.btn-download-apps').hide();

$("#toggleBar").click(function() {
    if (hidden === false) {
        $('.flex-vertical.channels-wrap').animate({
            width: '0px'
        }, 200);
        $('.flex-vertical.channels-wrap').hide(200);
        hidden = true;
    } else {
        $('.flex-vertical.channels-wrap').animate({
            width: '240px'
        }, 200);
        $('.flex-vertical.channels-wrap').show();
        hidden = false;
    }
});



$("#toggleBar").mouseenter(function() {
    $(this).css("border-radius", "15px").css("background-color", "rgb(114, 137, 218").css("color", "#fff").css("transition", "all 0.2s ease-in-out");
}).mouseleave(function() {
  if (hidden === false)
    {
    $(this).css("border-radius", "25px").css("background-color", "#2e3136").css("#888").css("transition", "all 0.2s ease-in-out");
    }
});


$('.btn-download-apps').after($('<button style="background-color: #2e3136; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); border-radius: 25px; padding: 0px; width: 50px; height: 50px; font-size: 13px; color: #fff; font-weight: normal; text-align: center; margin-top: 10px;" type="button" id="toggleNsfw">NSFW</button>'));

$("#toggleNsfw").click(function() {
    if (nsfw === false) {
        $('.image').animate({
            opacity: '0'
        }, 200);
              $('.embed.embed-inline').animate({
            opacity: '0'
        }, 200);

//        $('.image').css({
//            'filter': 'blur(4px)',
//            '-webkit-filter': 'blur(4px)',
//            '-moz-filter': 'blur(4px)',
//            '-o-filter': 'blur(4px)',
//            '-ms-filter': 'blur(4px)'
//        });
        nsfw = true;
    } else {
        $('.image').animate({
            opacity: '1'
        }, 200);
              $('.embed.embed-inline').animate({
            opacity: '1'
        }, 200);
//        $('.image').css({
//            'filter': 'blur(0px)',
//            '-webkit-filter': 'blur(0px)',
//            '-moz-filter': 'blur(0px)',
//            '-o-filter': 'blur(0px)',
//            '-ms-filter': 'blur(0px)'
//        });

        nsfw = false;
    }
});


$("#toggleNsfw").mouseenter(function() {
    $(this).css("border-radius", "15px").css("background-color", "rgb(114, 137, 218").css("color", "#fff").css("transition", "all 0.2s ease-in-out");
}).mouseleave(function() {
  if (nsfw === false)
    {
    $(this).css("border-radius", "25px").css("background-color", "#2e3136").css("#888").css("transition", "all 0.2s ease-in-out");
    }
});