some menu changes

2025-02-17 00:41:17 +01:00 · 2025-02-17 00:41:17 +01:00 · fd99e9424f
parent 90ed3dd1e5
commit fd99e9424f
4 changed files with 36 additions and 4 deletions
--- a/index.html
+++ b/index.html
@ -4,6 +4,7 @@
 		<title>DataTools</title>
 		<link rel="stylesheet" type="text/css" href="style.css">
 		<script src="Box.js"></script>
+		<script src="menu.js"></script>
 	</head>
 	<body>
 		<canvas id="canvas"></canvas>
--- 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 {
--- a/menu.js
+++ 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";
+			}
+		});
+	}
+});
--- 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 {