feat: add hamburger menu

dynamicProgrammingExamples/src/components/mobileMenu.js

@@ -0,0 +1,81 @@
+class Menu {
+    constructor(menuItems) {
+        this.menuItems = menuItems;
+        this.menu = document.createElement('nav');
+        this.burgerIcon = document.createElement('i');
+        this.container = document.createElement('div');
+
+
+        this.setupMenuStructure();
+        this.setupResizeListener();
+    }
+
+    setupMenuStructure() {
+        this.container.classList.add('navbar');
+        this.container.style.display = 'flex';
+        this.container.style.padding = '20px';
+
+        // Determine if Burger Icon should show
+        this.burgerIconStyles();
+        this.burgerIconSetter();
+
+        this.menuItems.forEach(element => {
+            const li = document.createElement('li');
+            li.textContent = element;
+            li.style.listStyleType = 'none';
+
+            this.container.appendChild(li);
+
+        });
+
+        this.menu.append(this.burgerIcon, this.container);
+    }
+
+    adjustStylesForSmallScreen() {
+        this.container.style.flexDirection = 'column';
+        this.burgerIcon.style.display = 'inline-block';
+        this.container.style.gap = '20px';
+        this.container.style.alignItems = 'center';
+        this.container.style.display = 'none';
+    }
+
+    adjustStylesForLargeScreen() {
+        this.container.style.display = 'flex';
+        this.container.style.flexDirection = 'row';
+        this.container.style.justifyContent = 'space-around';
+        this.burgerIcon.style.display = 'none';
+    }
+
+    burgerIconStyles() {
+        this.burgerIcon.classList.add('fas', 'fa-bars', 'fa-2x');
+        this.burgerIcon.style.margin = '10px';
+    }
+
+    burgerIconSetter() {
+        const isSmallScreen = window.innerWidth <= 600;
+        if (isSmallScreen) {
+            this.adjustStylesForSmallScreen();
+            this.burgerIconClickListener();
+        } else {
+            this.adjustStylesForLargeScreen();
+        }
+
+    }
+
+    burgerIconClickListener () {
+        this.burgerIcon.addEventListener('click', () => {
+            this.container.style.display = this.container.style.display === 'none' ? 'flex' : 'none';
+        });
+    }
+
+    setupResizeListener() {
+        window.addEventListener('resize', () => this.burgerIconSetter());
+    }
+
+    buildMenu() {
+        return this.menu;
+    }
+}
+
+
+export { Menu };

dynamicProgrammingExamples/src/index.js

@@ -1,11 +1,29 @@
 import { DropDown } from "./components/dropDown";
+import { Menu } from "./components/mobileMenu";
 import './style.css';
 
-const dropdown = new DropDown(['main', 'about', 'store', 'blog']);
+
+function fontAwesome() {
+    let script = document.createElement('script');
+    script.src = 'https://kit.fontawesome.com/24f16b96cf.js';
+    script.crossOrigin = 'anonymous';
+
+    document.head.appendChild(script);
+}
+
+fontAwesome();
+
+const _menu = ['main', 'about', 'store', 'blog', 'contact'];
+const dropdown = new DropDown(_menu);
+const mobile = new Menu(_menu);
 
 const div = dropdown.dropdownComponent();
 const h1 = document.createElement('h1');
 h1.textContent = 'DEEZ NUTS MAN';
 
+
+const menuMobile = mobile.buildMenu();
+document.body.appendChild(menuMobile);
 document.body.appendChild(div);
 document.body.appendChild(h1);
+

dynamicProgrammingExamples/src/style.css

@@ -1,3 +1,8 @@
+body,
+html {
+    font-size: 18px;
+}
+
 a {
     color: black;
 }