Jsfiddle - Add Sidebar Toggle and Panel Flip Buttons

// us this chrome extension to automatically inject this code on load: https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld

sidebarIsVisible = true
isNotFlipped = true
function sidebar (){
if(sidebarIsVisible){
    console.log('cleaning UI')
    document.getElementById('sidebar').style.width = '0px'
    document.getElementById('sidebar').style.overflow = 'hidden'
    document.getElementById('content').style.marginLeft = '-200px'
    window.sidebarIsVisible = false
} else {
    document.getElementById('sidebar').style.width = 'inherit'
    document.getElementById('sidebar').style.overflow = 'inherit'
    document.getElementById('content').style.marginLeft = 'inherit'
    window.sidebarIsVisible = true
}

}

function flip (){
if(isNotFlipped){
    console.log('cleaning UI')
    document.querySelector('.tabsContainer').style.display = "flex"
    document.querySelector('.tabsContainer').style.flexDirection = "row-reverse"
    window.isNotFlipped = false
} else {
    document.querySelector('.tabsContainer').style.display = "inherit"
    document.querySelector('.tabsContainer').style.flexDirection = "inherit"
    window.isNotFlipped = true
}

}
document.querySelector('.actionCont').querySelector('.actionItem').insertAdjacentHTML('afterend', `<div class="actionItem" onclick="sidebar()" style="cursor: pointer">
       
      <a class="aiButton" ><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="16" height="16"
viewBox="0 0 172 172"
style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#ffffff"><path d="M21.5,10.75c-5.87521,0 -10.75,4.87479 -10.75,10.75v118.25c0,5.87521 4.87479,10.75 10.75,10.75h53.75c5.87521,0 10.75,-4.87479 10.75,-10.75v-0.65088c6.84122,7.00976 16.35109,11.40088 26.875,11.40088c20.71605,0 37.625,-16.90895 37.625,-37.625c0,-13.74503 -7.52087,-25.68387 -18.58155,-32.25c11.06068,-6.56613 18.58155,-18.50497 18.58155,-32.25c0,-20.71605 -16.90895,-37.625 -37.625,-37.625c-10.52391,0 -20.03378,4.39112 -26.875,11.40088v-0.65088c0,-5.87521 -4.87479,-10.75 -10.75,-10.75zM21.5,21.5h53.75v91.375v26.875h-53.75zM112.875,21.5c14.90632,0 26.875,11.96868 26.875,26.875c0,14.90632 -11.96868,26.875 -26.875,26.875c-14.90632,0 -26.875,-11.96868 -26.875,-26.875c0,-14.90632 11.96868,-26.875 26.875,-26.875zM86,74.59912c2.30961,2.36651 4.97252,4.32863 7.83154,6.02588c-2.85902,1.69725 -5.52193,3.65937 -7.83154,6.02588zM112.875,86c14.90632,0 26.875,11.96868 26.875,26.875c0,14.90632 -11.96868,26.875 -26.875,26.875c-14.90632,0 -26.875,-11.96868 -26.875,-26.875c0,-14.90632 11.96868,-26.875 26.875,-26.875z"></path></g></g></svg>Sidebar</a></div>

<div class="actionItem" onclick="flip()" style="cursor: pointer">
       
      <a class="aiButton" >
      
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="16" height="16"
viewBox="0 0 171 171"
style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,171.99219v-171.99219h171.99219v171.99219z" fill="none"></path><g fill="#ffffff"><path d="M80.15625,11.06323c-38.28296,0 -69.46875,31.06055 -69.46875,69.26001v5.17676h10.6875v-5.17676c0,-32.39648 26.25952,-58.57251 58.78125,-58.57251c17.45069,0 33.02271,7.6399 43.75195,19.66333l-12.06518,12.02344h37.78198v-37.65673l-18.1604,18.0769c-12.69141,-13.94385 -30.9353,-22.79444 -51.30835,-22.79444zM138.9375,74.8125v5.34375c0,32.52173 -26.25952,58.78125 -58.78125,58.78125c-17.53418,0 -33.1062,-7.72339 -43.8772,-19.87207l12.19043,-12.19043h-37.78198v37.78198l18.03516,-18.03516c12.73315,14.0691 31.0188,23.00318 51.43359,23.00318c38.32471,0 69.46875,-31.14404 69.46875,-69.46875v-5.34375z"></path></g></g></svg>

Flip</a></div>` )