Make the search bar expandable on Scratch pages.

expand-search-bar.js

// Inspiration from <https://gist.github.com/CST1229/1063d77b16593e036764b75e56788f8e>
// This will make the Scratch search bar expandable when clicked, like the Scratch Wiki (https://en.scratch-wiki.info)
// This is free and open source, but please use credit if you take all of the code (small snippets are free).
// Use at your own risk! If you do not trust the code, DO NOT USE IT!

const style = document.createElement("style");
style.innerText = ".__hidden { display: none !important; }"; // Will hide nav items
document.body.append(style);

let setup = function(input, nav) {
    // Will set up an input box with the proper nav items.
    input.addEventListener("focus", function() {
        for (let i = 0; i < nav.length; i++) {
            nav[i].classList.add("__hidden"); // Hide the nav item
        }
    });
    input.addEventListener("focusout", function() {
        for (let i = 0; i < nav.length; i++) {
            nav[i].classList.remove("__hidden"); // Show the nav item
        }
    });
};

if (document.querySelector("#search-input") !== null) { // we are on scratchr2    
    setup(
        document.querySelector("#search-input"), 
        document.querySelector(".site-nav").children
    ); // Use the setup function
} else if (document.querySelector("#frc-q-1088") !== null) { // we are on scratch-www    
    setup(
        document.querySelector("#frc-q-1088"), 
        Array.from(document.querySelectorAll("#navigation .link")).splice(0, 4) 
        // (We only want the first 4 navigation tabs)
    );
} else { // We can't tell if there's even a search input at all
    const e = "Are you sure this is activated on a Scratch page?";
    alert(e);
    throw e;
}

expand-search-bar.min.js

javascript:/*Thanks to uglifyjs.net */var style=document.createElement("style");style.innerText=".__hidden{display:none!important;";document.body.append(style);let setup=function(input,nav){input.addEventListener("focus",function(){for(let i=0;i<nav.length;i++){nav[i].classList.add("__hidden")}});input.addEventListener("focusout",function(){for(let i=0;i<nav.length;i++){nav[i].classList.remove("__hidden")}})};if(document.querySelector("#search-input")!==null){setup(document.querySelector("#search-input"),document.querySelector(".site-nav").children)}else if(document.querySelector("#frc-q-1088")!==null){setup(document.querySelector("#frc-q-1088"),Array.from(document.querySelectorAll("#navigation .link")).splice(0,4))}else{const e="Are you sure this is activated on a Scratch page?";alert(e);throw e}