I've been annoyed with the new side bar layout, so I chose to hide it. But then, the useful links were gone, so I decided to make this little user script in Tampermonkey to bring them back to [roughly] how it looked before. Here is a screenshot:
It's nothing very complicated, and it's all plain regular JavaScript, but I'd like any suggestions to improve it before I put it on Stack Apps for everyone to see!
Note that design suggestions are also welcome, but I'd prefer if those were made in comments or in chat.
// ==UserScript==
// @name Stack Overflow custom top navbar
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Make Stack Overflow Design Great Again! #MSODGA :)
// @author https://codereview.stackexchange.com/users/42632/phrancis
// @include http*://*.stackoverflow.com*
// @include http*://stackoverflow.com*
// @grant none
// ==/UserScript==
(function() {
"use strict";
const stackOverflowOrange = "#f48024";
// User of script can set these preferences to modify the script's behavior
const userPreferences = {
// Change to true to hide the "Jobs" Stack Overflow Careers link
hideJobsLink : false,
// Set your own colors for the linkss here
// Make sure to use valid CSS colors like "#f48024" or "black"
linkColor : "black",
linkHoverColor : stackOverflowOrange,
linkClickColor : stackOverflowOrange
};
// It is recommended to not change anything below this comment
// unless you know JavaScript, as it can break the functionality.
const links = [
{ name: "Home", url: "https://stackoverflow.com/" },
{ name: "Questions", url: "https://stackoverflow.com/questions" },
{ name: "Tags", url: "https://stackoverflow.com/tags" },
{ name: "Users", url: "https://stackoverflow.com/users" }
];
if (!userPreferences.hideJobsLink) {
links.push({ name: "Jobs", url: "https://stackoverflow.com/jobs?med=site-ui&ref=jobs-tab" });
};
const navbarContainer = document.createElement("div");
navbarContainer.id = "navbar-container";
document.getElementById("content").prepend(navbarContainer);
const navbarList = document.createElement("ul");
navbarList.id = "navbar-list";
navbarContainer.append(navbarList);
for (let item of links) {
const listItem = document.createElement("li");
listItem.className = "navbar-list-item";
const link = document.createElement("a");
link.className = "navbar-link";
link.href = item.url;
link.innerHTML = item.name;
listItem.append(link);
navbarList.append(listItem);
}
/**
* Add CSS properties to an HTMLCollection queried by document.querySelectorAll
* @param {string} selectorAllQuery
* a valid query to be used by document.querySelectorAll
* @param {object} cssObject
* an object containing pairs of CSS property names (in JS format, like listStyleTyle rather
* than 'list-style-type' and a value to assign to it
* @return {undefined}
*/
const applyCssToHTMLCollection = function(selectorAllQuery, cssObject) {
let elements = null;
try {
elements = document.querySelectorAll(selectorAllQuery);
} catch(exception) {
throw `Invalid document.querySelectorAll query expression: ${selectorAllQuery}`;
}
for (let element of document.querySelectorAll(selectorAllQuery)) {
Object.assign(element.style, cssObject);
}
};
// Style inspired by example at the following link:
// https://www.w3schools.com/css/tryit.asp?filename=trycss_float5
applyCssToHTMLCollection("#navbar-list", {
listStyleType: "none",
margin: 0,
padding: 0,
overflow: "hidden",
textAlign: "center"
});
applyCssToHTMLCollection("li.navbar-list-item", {
float: "left"
});
applyCssToHTMLCollection("li.navbar-list-item > a", {
display: "inline-block",
color: userPreferences.linkColor,
textAlign: "center",
padding: "14px 16px",
textDecoration: "none",
fontSize: "1.4em",
fontWeight: "bold"
});
const navbarLinks = document.querySelectorAll(".navbar-link");
for (let element of navbarLinks) {
console.log(element);
element.addEventListener("mouseenter", function() {
element.style.color = userPreferences.linkHoverColor;
});
element.addEventListener("mouseleave", function() {
element.style.color = userPreferences.linkColor;
});
element.addEventListener("click", function() {
element.style.color = userPreferences.linkClickColor;
});
}
})();
