53 lines
1.6 KiB
JavaScript
53 lines
1.6 KiB
JavaScript
var navSelect = "home";
|
|
|
|
var navi = [ // Array containing navigation items in form [Font-Awesome class name, Display Text, Onclick function].
|
|
["home", "Home", "home"],
|
|
["bar-chart", "Data Values", "dataValues"],
|
|
["database", "Database and Files", "files"],
|
|
["bell", "Updates and Progress", "updates"]
|
|
];
|
|
|
|
for(var i = 0; i < navi.length; i++) { // Create navigation tabs.
|
|
var side = document.getElementById("sidebar");
|
|
var div = document.createElement("div");
|
|
div.className = "navi transition";
|
|
div.setAttribute("option", navi[i][2]);
|
|
div.onclick = function() {
|
|
var op = this.getAttribute("option");
|
|
if(navSelect === op) return;
|
|
updateMain(op);
|
|
};
|
|
var ic = document.createElement("i");
|
|
ic.className = "fa fa-"+navi[i][0];
|
|
ic["aria-hidden"] = true;
|
|
var p = document.createElement("p");
|
|
p.appendChild(document.createTextNode(navi[i][1]));
|
|
div.appendChild(ic);
|
|
div.appendChild(p);
|
|
side.appendChild(div);
|
|
}
|
|
|
|
updateNav(navSelect);
|
|
|
|
function updateMain(op) {
|
|
updateNav(op);
|
|
document.getElementById(navSelect).style.opacity = "0";
|
|
setTimeout(function() {
|
|
document.getElementById(navSelect).style.display = "none";
|
|
document.getElementById(op).style.display = "grid";
|
|
setTimeout(function() {
|
|
document.getElementById(op).style.opacity = "1";
|
|
}, 30);
|
|
navSelect = op;
|
|
}, 300);
|
|
}
|
|
|
|
function updateNav(op) {
|
|
var oldNav = document.querySelectorAll("[option="+navSelect+"]")[0];
|
|
var newNav = document.querySelectorAll("[option="+op+"]")[0];
|
|
oldNav.style.backgroundColor = "rgba(0,0,0,0)";
|
|
oldNav.style.color = "white";
|
|
newNav.style.backgroundColor = "#F8F3F0";
|
|
newNav.style.color = "#F47922";
|
|
}
|