I use an extention that allows me to edit the css of Youtube. I need the navigation menu on the left of youtube home page to be hidden when the webpage loads and appear when the menu button is clicked.
Is there any way I can do this?
The extention can use Javascript too.
HTML code when the bar is open:
<tp-yt-app-drawer id="guide" align="start" role="navigation" class="style-scope ytd-app" style="transition-duration: 0ms; touch-action: pan-y;" position="left" swipe-open="" opened="" persistent="">
HTML code when the bar is closed:
<tp-yt-app-drawer id="guide" align="start" role="navigation" class="style-scope ytd-app" style="transition-duration: 0ms; touch-action: pan-y;" position="left" swipe-open="" persistent="">
HTML code of the button
<yt-icon-button id="guide-button" toggleable="true" class="style-scope ytd-masthead"><!--css-build:shady--><button id="button" class="style-scope yt-icon-button" aria-label="Guide" aria-pressed="true">
Hope this helps?
document.getElementById("guide-button").onclick = function() {
myFunction()
};
function myFunction() {
var x = document.getElementById("guide");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}<tp-yt-app-drawer id="guide" align="start" role="navigation" class="style-scope ytd-app" style="transition-duration: 0ms; touch-action: pan-y; display:none;" position="left" swipe-open="" opened="" persistent="">
<yt-icon-button id="guide-button" toggleable="true" class="style-scope ytd-masthead"><!--css-build:shady--><button id="button" class="style-scope yt-icon-button" aria-label="Guide" aria-pressed="true">