given files

src/pages/utils.js

@@ -0,0 +1,83 @@
+/**
+ * Global variables
+ */
+let [leftSize, rightSize] = [
+    localStorage.getItem("leftSize") ?? 0,
+    localStorage.getItem("rightSize") ?? 0,
+];
+
+const parentContainer = document.getElementById("container");
+
+const leftContainer = document.getElementById("left-container");
+const closeLeftButton = document.getElementById("close-left");
+const rightContainer = document.getElementById("right-container");
+const closeRightButton = document.getElementById("close-right");
+
+const roomButton = document.getElementById("MenuButton");
+const chatButton = document.getElementById("ChatButton");
+
+leftContainer.classList.toggle("Hidden", !leftSize);
+
+/**
+ * Calculate the layout of the home page.
+ *
+ * Initialize the layout of the home page, the left and right sidebars, the
+ * rest of the script adds event listeners to the elements in the layout so
+ * that the layout follows the mouse cursor when clicked and dragged.
+ *
+ * @returns {void}
+ **/
+export const calculateLayout = () => {
+    const parentContainerSize = `${4.5 - leftSize - rightSize}fr`;
+
+    // left and right are reversed because of the grid layout
+    parentContainer.style.gridTemplateColumns = `${leftSize}fr ${parentContainerSize} ${rightSize}fr`;
+    leftContainer.style.opacity = leftSize;
+    rightContainer.style.opacity = rightSize;
+};
+
+closeLeftButton.addEventListener("click", () => {
+    leftSize = 1 - leftSize;
+    localStorage.setItem("leftSize", leftSize);
+
+    calculateLayout();
+    setTimeout(
+        () => {
+            leftContainer.classList.toggle("Hidden", true);
+        },
+        leftSize ? 0 : 300,
+    );
+});
+
+closeRightButton.addEventListener("click", () => {
+    rightSize = 1 - rightSize;
+    localStorage.setItem("rightSize", rightSize);
+
+    calculateLayout();
+    setTimeout(
+        () => {
+            rightContainer.classList.toggle("Hidden", true);
+        },
+        rightSize ? 0 : 300,
+    );
+});
+
+roomButton.addEventListener("click", () => {
+    leftSize = 1;
+    localStorage.setItem("leftSize", leftSize);
+
+    calculateLayout();
+    setTimeout(() => {
+        leftContainer.classList.toggle("Hidden", false);
+    }, 300);
+});
+
+chatButton.addEventListener("click", () => {
+    rightSize = 1;
+    localStorage.setItem("rightSize", rightSize);
+
+    calculateLayout();
+    setTimeout(() => {
+        rightContainer.classList.toggle("Hidden", false);
+    }, 300);
+});