Update application/static/js/components/navbar.js

application/static/js/components/navbar.js

@@ -1,36 +1,73 @@
-// application/static/js/components/navbar.js
+// navbar.js
 class Navbar {
     constructor(UIManager) {
-      console.log("Navbar constructor called"); // Keep this
-    //   this.uiManager = UIManager;
-    //   this.menu = this.uiManager.menu;
-    //   this.hamburger = this.uiManager.hamburger;
-    //   this.container = this.uiManager.container;
-    //   this.state = true; // true = open, false = closed
-    //   this.menuWidth = 0;
-    //   this.containerWidth = this.container.clientWidth;
-    //   this.NAV_AREA_LARGE = 20; // % of window width
-    //   this.NAV_AREA_MEDIUM = 25; // % of window width
-    //   this.NAV_AREA_SMALL = 60; // % of window width
-    //   this.ANIMATION_STEP = 5; // pixels per frame
+      this.uiManager = UIManager;
+      this.menu = this.uiManager.menu;
+      this.hamburger = this.uiManager.hamburger;
+      this.container = this.uiManager.container;
+      this.state = true; // true = open, false = closed
+      this.menuWidth = 0;
+      this.containerWidth = this.container.clientWidth;
+      this.NAV_AREA_LARGE = 20; // % of window width
+      this.NAV_AREA_MEDIUM = 25; // % of window width
+      this.NAV_AREA_SMALL = 60; // % of window width
+      this.ANIMATION_STEP = 5; // pixels per frame
+
+      console.log("Navbar constructor: uiManager =", this.uiManager);
+      console.log("Navbar constructor: menu =", this.menu);
+    }
+
+    calculateNavArea() {
+        if (window.innerWidth > 785) {
+            return window.innerWidth < 1100
+                ? window.innerWidth * (this.NAV_AREA_MEDIUM / 100)
+                : window.innerWidth * (this.NAV_AREA_LARGE / 100);
+        }
+        return window.innerWidth * (this.NAV_AREA_SMALL / 100);
+    }
+
+    animateNav(action) {
+        if (action === 'open' && this.menuWidth < this.navArea) {
+            this.menuWidth += this.ANIMATION_STEP;
+        } else if (action === 'close' && this.menuWidth > 0) {
+            this.menuWidth -= this.ANIMATION_STEP;
+        } else {
+            return; // Stop animation
+        }
+
+        this.menu.style.width = `${this.menuWidth}px`;
+        if(window.innerWidth>775){
+            this.container.style.width = `${this.containerWidth - this.menuWidth}px`;
+            this.container.style.left = `${this.menuWidth}px`;
+        }
+        requestAnimationFrame(() => this.animateNav(action));
     }
 
     run() {
-      console.log("Navbar run called"); //Keep this
-    //   this.navArea = this.calculateNavArea();
-    //   this.nav = {
-    //       open: () => this.animateNav('open'),
-    //       close: () => this.animateNav('close'),
-    //   };
-
-    //   if (window.innerWidth <= 785) {
-    //       this.state = false;
-    //   } else {
-    //       this.nav.open();
-    //   }
-
-    //   this.hamburger.addEventListener('click', () => this.toggleState());
+      console.log("Navbar run called");
+        this.navArea = this.calculateNavArea();
+        this.nav = {
+            open: () => this.animateNav('open'),
+            close: () => this.animateNav('close'),
+        };
+
+        if (window.innerWidth <= 785) {
+            this.state = false;
+        } else {
+            this.nav.open();
+        }
+
+        this.hamburger.addEventListener('click', () => this.toggleState());
+    }
+
+    toggleState() {
+        if (this.state) {
+            this.nav.close();
+        } else {
+            this.nav.open();
+        }
+        this.state = !this.state;
     }
 }
 
-export default Navbar
+export default Navbar;