feat: menubar component

dynamicProgrammingExamples/.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  "env": {
+      "browser": true,
+      "es2021": true,
+        node: true
+  },
+  "extends": "eslint:recommended",
+  "parserOptions": {
+      "ecmaVersion": "latest",
+      "sourceType": "module"
+  },
+}
+

dynamicProgrammingExamples/README.md

@@ -0,0 +1,3 @@
+# webpack-template
+
+Vanilla template for webpack

dynamicProgrammingExamples/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "webpack-template",
+  "version": "1.0.0",
+  "description": "Vanilla template for webpack",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack serve --open --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "css-loader": "^6.8.1",
+    "eslint": "^8.56.0",
+    "html-webpack-plugin": "^5.6.0",
+    "style-loader": "^3.3.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^5.10.0"
+  }
+}

dynamicProgrammingExamples/src/components/dropDown.js

@@ -0,0 +1,79 @@
+class DropDown {
+    constructor(menu) {
+        this.menu = menu;
+    }
+
+    title = 'Menu';
+    clicked = false;
+
+    getMenu = () => {
+        this.div;
+    }
+
+    dropdownComponent() {
+        // render items 
+        this.createDropdownItems();
+        this.createMenuButton();
+
+        this.div = document.createElement('div');
+        this.div.classList.add('menu-bar');
+        this.div.style = 'margin-left: 50px; display: flex; flex-direction: column; width: 200px; align-items: center;';
+
+        this.div.style.position = 'relative';
+
+        this.div.append(this.button, this.dropdownItems);
+        return this.div;
+    }
+
+    createDropdownItems() {
+        this.dropdownItems = document.createElement('div');
+        this.dropdownItems.classList.add('menu-items');
+
+        this.dropdownItems.style.display = 'flex';
+        this.dropdownItems.style.flexDirection = 'column';
+        this.dropdownItems.style.visibility = 'hidden';
+        this.dropdownItems.style.gap = '10px';
+        this.dropdownItems.style.lineHeight = '1.7';
+        this.dropdownItems.style.fontSize = '18px';
+        this.dropdownItems.style.position = 'absolute';
+        this.dropdownItems.style.top = '100px';
+        this.dropdownItems.style.background = '#E8E8E8';
+        this.dropdownItems.style.width = '100%';
+        this.dropdownItems.style.alignItems = 'center';
+        // this.dropdownItems.style.padding = '15px';
+
+        this.menu.forEach(e => {
+            const a = document.createElement('a');
+            a.href = '#';
+            a.textContent = e;
+            a.style.textDecoration = 'none';
+            a.style.display = 'inline-block';
+            a.style.width = '100%';
+            a.style.textAlign = 'center';
+            a.style.padding = '5px';
+            
+
+            // a.addEventListener('mouseover', () => {
+            //     a.style.background = '#E8E8E8'
+            // })
+            this.dropdownItems.appendChild(a)
+        })
+    }
+
+    createMenuButton() {
+        this.button = document.createElement('button');
+        this.button.classList.add('menu-btn,btn');
+        this.button.textContent = this.title;
+
+        this.button.style = "padding: 20px; margin: 20px;"
+
+        this.button.addEventListener('click', () => {
+            this.clicked = !this.clicked
+            let visibilityToggle = this.clicked ? 'visible' : 'hidden';
+            this.dropdownItems.style.visibility = visibilityToggle;
+        })
+    }
+
+}
+
+export { DropDown }

dynamicProgrammingExamples/src/index.js

@@ -0,0 +1,10 @@
+import { DropDown } from "./components/dropDown";
+
+const dropdown = new DropDown(['main', 'about', 'store', 'blog']);
+
+const div = dropdown.dropdownComponent();
+const h1 = document.createElement('h1');
+h1.textContent = 'DEEZ NUTS MAN';
+
+document.body.appendChild(div);
+document.body.appendChild(h1);

dynamicProgrammingExamples/webpack.common.js

@@ -0,0 +1,34 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+    entry: {
+        index: './src/index.js',
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            title: 'template',
+        }),
+    ],
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist'),
+        clean: true,
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css$/i,
+                use: ['style-loader', 'css-loader'],
+            },
+            {
+                test:  /\.(png|svg|jpg|jpeg|gif)$/i,
+                type: 'asset/resource',
+            },
+            {
+                test: /\.(woff|woff2|eot|ttf|otf)$/i,
+                type: 'asset/resource',
+            },
+        ],
+    },
+};

dynamicProgrammingExamples/webpack.dev.js

@@ -0,0 +1,10 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    mode: 'development',
+    devtool: 'inline-source-map',
+    devServer: {
+        static: './dist',
+    },
+})

dynamicProgrammingExamples/webpack.prod.js

@@ -0,0 +1,7 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+
+module.exports = merge(common, {
+    mode: 'production',
+});