diff --git a/index.html b/index.html
index 786a730..758cb9b 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
DataTools
+
diff --git a/menu.css b/menu.css
index 41773e0..e863850 100644
--- a/menu.css
+++ b/menu.css
@@ -1,8 +1,7 @@
#menu {
z-index: 100;
width: 100%;
- background-color: #2227;
- backdrop-filter: blur(4px);
+ background-color: #222;
box-shadow: 0px 0px 20px 0px black;
}
@@ -10,6 +9,7 @@
display: flex;
flex-direction: row;
align-items: flex-start;
+ background-color: var(--blue);
}
.menuBarItem {
@@ -19,6 +19,7 @@
padding-top: 5px;
padding-bottom: 5px;
cursor: pointer;
+ user-select: none;
}
.menuBarItem:hover:not(.selected) {
@@ -27,13 +28,14 @@
}
.menuBarItem.selected {
- filter: brightness(1.2);
- box-shadow: inset 0px 0px 5px 0px black;
+ background-color: var(--bg);
}
.menuContentBox {
display: none;
padding: 10px;
+ box-sizing: border-box;
+ width: 100%;
}
#elementsWrapper {
diff --git a/menu.js b/menu.js
new file mode 100644
index 0000000..5ca112b
--- /dev/null
+++ b/menu.js
@@ -0,0 +1,23 @@
+window.addEventListener("DOMContentLoaded", () => {
+ let tabs = document.getElementsByClassName("menuBarItem");
+ for (let i = 0; i < tabs.length; i++) {
+ tabs[i].addEventListener("click", () => {
+ let contents = document.getElementsByClassName("menuContentBox");
+
+ let wasSelected = tabs[i].classList.contains("selected");
+
+ for (let j = 0; j < contents.length; j++) {
+ contents[j].style.display = "none";
+ }
+
+ for (let j = 0; j < tabs.length; j++) {
+ tabs[j].classList.remove("selected");
+ }
+
+ if (!wasSelected) {
+ tabs[i].classList.add("selected");
+ contents[i].style.display = "block";
+ }
+ });
+ }
+});
\ No newline at end of file
diff --git a/style.css b/style.css
index cea006b..7285599 100644
--- a/style.css
+++ b/style.css
@@ -8,6 +8,12 @@
padding: 0;
color: #eee;
outline: none;
+
+ --bg: #222;
+ --blue: #177e89;
+ --red: #db3a34;
+ --yellow: #ffc857;
+ --green: #35ce8d;
}
body, html {