HM-79. Добавлена работа формы с ручкой, валидация формы. HM-88. Добавлены пункты меню с js. HM-76. Добавлена подсветка элементов меню (#40)

src/components/main-menu/MainMenu.js

@@ -0,0 +1,89 @@
+import Component from '../component/index';
+import routeService from '../../services/RouteService';
+import Image from '../../img/logo.svg';
+
+import './MainMenu.css';
+import {createElement} from '../../utils/elementUtils';
+import {EVENTS} from '../../consts';
+
+export const NAV_MENU = [
+    {
+        title: 'Главная',
+        url: '/'
+    },
+    {
+        title: 'Список хранилищ',
+        url: '/api'
+    },
+    {
+        title: 'Журнал',
+        url: '/logs'
+    },
+];
+
+class MainMenu extends Component {
+    menuItems = [];
+
+    constructor () {
+        super('#main-menu', document.body);
+
+        this.buttonsContainer = this.mainNode.querySelector('.navbar-nav');
+        this.logoImg = document.createElement('img');
+        this.logoImg.src = Image;
+        this.logoImg.alt = 'logo';
+        this.logoImg.className = 'Logo mr-2';
+        this.logoBox = this.mainNode.querySelector('.Logo__box');
+        this.logoBox.appendChild(this.logoImg);
+
+        this.addSubscribe(routeService, EVENTS.ROUTE_CHANGE, (route) => {
+            this.menuItems.forEach(({url, link}) => {
+                if (route.url === url) {
+                    link.classList.add('active');
+                } else {
+                    link.classList.remove('active');
+                }
+            });
+        });
+    }
+
+    render = () => {
+        this.menuItems = NAV_MENU.map(({url, title}) => {
+            const li = createElement({
+                tagName: 'li',
+                parentNode: this.buttonsContainer,
+                options: {
+                    className: 'nav-item',
+                },
+            });
+            const link = createElement({
+                tagName: 'a',
+                parentNode: li,
+                options: {
+                    className: 'nav-link',
+                    textContent: title,
+                },
+            });
+            this.addEventListener(li, 'click', () => {
+                routeService.goTo(url);
+            });
+
+            return {url, link};
+        });
+    }
+
+    isHide = () => {
+        return this.mainNode.parentNode;
+    }
+
+    hideMenu = () => {
+        this.mainNode.remove();
+    }
+
+    showMenu = () => {
+        document.body.prepend(this.mainNode);
+    }
+}
+
+const navMenuButtons = new MainMenu();
+
+export default navMenuButtons;