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; }