Here’s the code:
<div id=“style”></div><div id=“navigation-pane”>
<nav id=“navbar”>
<button class=“tabselector” id=“home-tab” onclick=“page(‘home’)”>Home</button>
<button class=“tabselector” id=“browse-tab” onclick=“page(‘browse’)”>Browse</button>
<button class=“tabselector” id=“play-tab” onclick=“page(‘play’)”>Play</button>
<button class=“tabselector” id=“chat-tab” onclick=“page(‘chat’)”>Chat</button>
<button class=“tabselector” id=“about-tab” onclick=“page(‘about’)”>About</button>
<a href=“about:blank”><button id=“exit”>Exit</button></a>
</nav>
</div>
<div class=“tabc” id=“home”>Tab 1</div>
<div class=“tabc” id=“browse”>
<p>Choose a Browser:<br>
<!–
@import url(‘https://fonts.googleapis.com/css2?family=Assistant:wght@600&display=swap’);
#navigation-pane {
height: 70vmax;
width: fit-content;
position: fixed;
margin: 0;
padding: 0;
right: 0.5rem;
}
#navbar {
background-color: #363636;
width: 6rem;
height: max-content;
overflow: hidden;
border-radius: 12px;
box-shadow: 1.5px 0px 24px #686868;
}
#navbar button {
width: 6rem;
height: 3.4rem;
background-color: #363636;
color: #fff;
border: none;
font-weight: bolder;
font-size: 10pt;
box-shadow: none;
z-index: 12;
}
#exit:hover {filter: brightness(125%)}
#about-tab {background-color: #385 !important;}
#exit {background-color: #833 !important;}
.tabc {
display: none;
padding: 100px 20px;
height: 100%;
font-weight: 200;
}
.tabc a {
text-decoration: none;
}
.tabc a:hover {
color: #6200ff;
}
- {
color:rgb(255, 255, 255);
font-family: “Assistant”, sans-serif;
}
br {line-height: 2px;}
body {background-color: #363636;}
#Home {background-color: #363636;}
#Chat {background-color: #363636;}
#Browse {background-color: #363636;}
#Play {background-color: #363636;}
#About {background-color: #363636;}
function page(page) {
// Hide all elements with class=“tabcontent” by default */
var i, tabcontent, tabselector;
tabcontent = document.getElementsByClassName(“tabc”);
tabselector = document.getElementsByClassName(“tabselector”);
for (i = 0; i < tabcontent.length; i++) {
tabcontent.style.display = “none”;
tabselector.style.filter = “brightness(100%)”;
}
document.getElementById(page).style.display = “block”;
document.getElementById(page + “-tab”).style.filter = “brightness(125%)”;
}
page(‘home’);
