☰

No More Sidebar in Mastodon 4.0

10/31/2022, 2:47:56 PM

  1. // ==UserScript==
  2. // @name        No More Sidebar in Mastodon 4.0
  3. // @namespace   Violentmonkey Scripts
  4. // @match       https://mas.to/*
  5. // @match       https://bgme.me/*
  6. // @match       https://bgme.bid/*
  7. // @match       https://0rz.one/*
  8. // @match       https://mstdn.social/*
  9. // @match       https://o3o.ca/*
  10. // @match       https://m.cmx.im/*
  11. // @grant       none
  12. // @version     2.1
  13. // @author      mas.to/@Renn
  14. // @description 10/31/2022, 2:47:56 PM
  15. // @license     GNU GPLv3
  16. // ==/UserScript==
  17.  
  18. // Make notification badge overlap the bell icon
  19. // Fix scrollbar positions
  20. for(let j = 0; j < document.styleSheets.length; j++) {
  21.   if(document.styleSheets[j].href.endsWith('.chunk.css')) {
  22.     document.styleSheets[j].insertRule('.icon-with-badge__badge { top: -1px !important; left: 0 !important; }');
  23. //     document.styleSheets[j].insertRule('.columns-area--mobile .column, .columns-area--mobile .drawer { overflow-y: scroll !important; }');
  24. //     document.styleSheets[j].insertRule('.columns-area__panels__main { max-height: 100vh !important; }');
  25. //     document.styleSheets[j].insertRule('body.app-body.layout-single-column { overflow-y: hidden !important; }');
  26.     break;
  27.   }
  28. }
  29.  
  30. // Wait for page to load otherwise it won't work
  31. // Still won't work when not logged in, don't know why
  32. window.addEventListener('load',() => {
  33.  
  34.   var headerlinks = document.getElementsByClassName('ui__header__links')[0];
  35.  
  36.   // F-off logo
  37.   var hugeArseLogoToBeRemoved=document.getElementsByClassName("ui__header__logo")[0];
  38.   hugeArseLogoToBeRemoved.parentNode.removeChild(hugeArseLogoToBeRemoved);
  39.  
  40.   // New div to rest navigations
  41.   var topNavigationDiv = document.createElement("div");
  42.   topNavigationDiv.setAttribute('class', 'ui__header__links');
  43.   topNavigationDiv.style['overflow-x'] = 'scroll';
  44.   topNavigationDiv.style['overflow-y'] = 'hidden';
  45.   topNavigationDiv.style['padding-top'] = '14px';
  46.   topNavigationDiv.style['padding-left'] = '6px';
  47.   topNavigationDiv.style['gap'] = '0';
  48.   var topbar = document.getElementsByClassName('ui__header')[0];
  49.   topbar.insertBefore(topNavigationDiv, headerlinks);
  50.  
  51.   // Move navigations into the new div
  52.   var sidebarItems = document.getElementsByClassName('column-link--transparent');
  53.   Array.from(sidebarItems).forEach(moveToTopBar);
  54.   function moveToTopBar(item, index, arr) {
  55.     item.parentNode.removeChild(item);
  56.     item.style['min-width'] = '11px';
  57.     topNavigationDiv.appendChild(item);
  58.   }
  59.  
  60.   // Remove sidebar
  61.   var sidebar = document.getElementsByClassName('columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational')[0];
  62.   sidebar.parentNode.removeChild(sidebar);
  63.  
  64.   // Resize mainpanel to the proper size
  65.   var mainPanel = document.getElementsByClassName('columns-area__panels__main')[0];
  66.   mainPanel.style['width'] = '100%';
  67.  
  68.   // Replace post button with pencil icon
  69.   // Haven't found a way to set it again after returning from the posting page
  70.   // var postButton = headerlinks.getElementsByClassName('button')[0];
  71.   // postButton.style['width'] = '35px';
  72.   // postButton.style['height'] = '35px';
  73.   // postButton.style['padding-left'] = '12px';
  74.   // postButton.style['text-overflow'] = 'clip';
  75.   // var pencilIcon = document.createElement('i');
  76.   // pencilIcon.classList.add('fa');
  77.   // pencilIcon.classList.add('fa-pencil');
  78.   // postButton.replaceChild(pencilIcon, postButton.childNodes[0])
  79.  
  80. });