Merge pull request #33 from kacper-cyra/km38/ui/main-menu-settings#28

Add MainMenu Component

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["@babel/preset-env"]
+  "presets": ["@parcel/babel-preset-env"]
 }

package.json

@@ -7,7 +7,7 @@
     "prebuild": "rimraf dist",
     "build": "parcel build index.html --public-url ./",
     "format": "prettier --write \"src/**/*.js\" \"src/**/*.ts\" \"test/**/*.js\" \"test/**/*.ts\" \"src/**/*.scss\"",
-    "start:dev": "parcel index.html",
+    "start:dev": "parcel --no-cache index.html",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:cov": "jest --coverage"
@@ -29,7 +29,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.11.5",
+    "@parcel/babel-preset-env": "^2.0.1",
     "@parcel/transformer-sass": "^2.0.1",
     "@testing-library/dom": "^8.11.1",
     "@testing-library/jest-dom": "^5.11.6",

src/components/MainMenu/MainMenu.js

@@ -0,0 +1,51 @@
+import * as classes from './style.module.scss';
+
+export const MAIN_MENU_COMPONENT_NAME = 'main-menu-component';
+
+const optionsNames = ['People', 'Vehicles', 'Starships'];
+
+class MainMenu extends HTMLElement {
+  constructor() {
+    super();
+    this._contents = new DocumentFragment();
+
+    this.options = optionsNames.map((optionName) => {
+      return MainMenu.addOptions(optionName);
+    });
+    this.options[0].classList.add(classes.active);
+
+    this.nav = MainMenu.addNavBar();
+    this.options.forEach((element) => {
+      this.nav.appendChild(element);
+    });
+
+    this._contents.appendChild(this.nav);
+  }
+
+  connectedCallback() {
+    this.appendChild(this._contents);
+  }
+
+  static addNavBar() {
+    const nav = document.createElement('nav');
+    nav.id = classes.mainMenu;
+    return nav;
+  }
+
+  static addOptions(text) {
+    const option = document.createElement('div');
+    option.className = classes.options;
+    option.textContent = text;
+    option.addEventListener('click', (e) => {
+      const lastActiveElement = e.target.parentNode.querySelector(
+        `.${classes.active}`,
+      );
+      lastActiveElement.classList.remove(classes.active);
+      e.target.classList.add(classes.active);
+    });
+    return option;
+  }
+}
+
+customElements.get(MAIN_MENU_COMPONENT_NAME) ||
+  customElements.define(MAIN_MENU_COMPONENT_NAME, MainMenu);

src/components/MainMenu/style.module.scss

@@ -0,0 +1,48 @@
+@use '../../themes/theme.scss' as *;
+
+#mainMenu {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 8rem;
+  box-shadow: $red-box-shadow;
+  border-radius: $border-radius;
+}
+
+div .active {
+  color: #202020;
+  &::after {
+    content: '';
+    border-radius: 4px;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25),
+      4px 4px 40px rgba(255, 0, 0, 0.9);
+    background-color: #df4b4b;
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+.options {
+  position: relative;
+  color: #979797;
+  font-size: 2em;
+  font-weight: bold;
+  transition: all 0.3s ease-in-out;
+  user-select: none;
+  &:hover {
+    color: $red-color;
+    cursor: pointer;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -8px;
+    left: 0;
+    z-index: 2;
+    display: block;
+    width: 100%;
+    height: 0.5rem;
+    background-color: #fe6666;
+    clip-path: inset(0 100% 0 0);
+    transition: all 0.5s ease-in-out;
+  }
+}

src/index.js

@@ -18,3 +18,9 @@ window.onload = () => {
     },
   });
 };
+
+if (module.hot) {
+  module.hot.accept(function () {
+    window.location.reload();
+  });
+}

src/themes/theme.scss

@@ -1,3 +1,5 @@
-$red-box-shadow: 4px 4px 40px 0px #ff0000e5, 0px 4px 4px 0px #00000040;
+$red-color: #ff0000e5;
+
+$red-box-shadow: 4px 4px 40px 0px $red-color, 0px 4px 4px 0px #00000040;
 
 $border-radius: 16px;