From 17649c7fbd606628b60ef0239e14504d7555663d Mon Sep 17 00:00:00 2001
From: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date: Tue, 9 Jan 2024 19:37:47 -0500
Subject: [PATCH] feat: add hamburger menu

---
 .../src/components/mobileMenu.js              | 81 +++++++++++++++++++
 dynamicProgrammingExamples/src/index.js       | 20 ++++-
 dynamicProgrammingExamples/src/style.css      |  5 ++
 3 files changed, 105 insertions(+), 1 deletion(-)
 create mode 100644 dynamicProgrammingExamples/src/components/mobileMenu.js

diff --git a/dynamicProgrammingExamples/src/components/mobileMenu.js b/dynamicProgrammingExamples/src/components/mobileMenu.js
new file mode 100644
index 0000000..2855fc1
--- /dev/null
+++ b/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 };
diff --git a/dynamicProgrammingExamples/src/index.js b/dynamicProgrammingExamples/src/index.js
index aaaa11d..c7422bf 100644
--- a/dynamicProgrammingExamples/src/index.js
+++ b/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);
+
diff --git a/dynamicProgrammingExamples/src/style.css b/dynamicProgrammingExamples/src/style.css
index dccdbb8..eb67bd4 100644
--- a/dynamicProgrammingExamples/src/style.css
+++ b/dynamicProgrammingExamples/src/style.css
@@ -1,3 +1,8 @@
+body,
+html {
+    font-size: 18px;
+}
+
 a {
     color: black;
 }