HM-27 Добавил компонет меню вместе с компонентом кнопки (#11)

* HM-27 Добавил компонет меню вместе с компонентом кнопки

src/components/button-component/ButtonComponent.js

@@ -0,0 +1,15 @@
+import Component from '../component/index';
+
+class ButtonComponent extends Component {
+    constructor (parentNode, text, newStyle) {
+        super('#button', parentNode);
+
+        this.mainNode.textContent = text;
+        this.mainNode.className = newStyle;
+
+        this.addEventListener(this.mainNode, 'click', (event) => {
+            this.next('click', event);
+        });
+    }
+}
+export default ButtonComponent;

src/components/navigation-buttons-component/NavButtonComponent.css

@@ -0,0 +1,16 @@
+.Buttons__container {
+    margin: 0 20px;
+    display: flex;
+    justify-content: center;
+}
+.NavButton {
+    margin: 5px 10px;
+}
+
+@media (max-width: 900px){
+    .Buttons__container {
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+}

src/components/navigation-buttons-component/NavButtonComponent.js

@@ -0,0 +1,33 @@
+import Component from '../component/index';
+import routeService from '../../services/RouteService';
+import ButtonComponent from '../button-component/ButtonComponent';
+import Image from '../../img/logo.png';
+
+import './NavButtonComponent.css';
+
+class NavButtonComponent extends Component {
+    constructor () {
+        super('#main-menu', document.body);
+
+        this.buttonsContainer = this.mainNode.querySelector('.Buttons__container');
+        this.logoImg = document.createElement('img');
+        this.logoImg.src = Image;
+        this.logoImg.alt = 'logo';
+        this.logoImg.className = 'Logo';
+        this.logoBox = this.mainNode.querySelector('.Logo__box');
+        this.logoBox.appendChild(this.logoImg);
+    }
+
+    render = (menu) => {
+        menu.forEach((element) => {
+            this.button = new ButtonComponent(this.buttonsContainer, element.title, 'btn btn-outline-primary NavButton');
+            this.button.subscribe('click', () => {
+                routeService.goTo(element.url);
+            });
+        });
+    }
+}
+
+const navMenuButtons = new NavButtonComponent();
+
+export default navMenuButtons;

src/components/navigation-buttons-component/constants.js

@@ -0,0 +1,14 @@
+export const NAV_MENU = [
+    {
+        title: 'Home',
+        url: '/'
+    },
+    {
+        title: 'Api',
+        url: '/api'
+    },
+    {
+        title: 'Еще что-то',
+        url: '/something'
+    },
+];

src/components/navigation-buttons-component/index.js

@@ -0,0 +1,3 @@
+import NavButtonComponent from './NavButtonComponent';
+
+export default NavButtonComponent;

src/components/router-pages-container/RouterPagesContainer.css

@@ -1,3 +0,0 @@
-html, body, .PageContainer, .Page {
-    height: 100%;
-}

src/components/router-pages-container/index.js

@@ -1,5 +1,3 @@
 import RouterPagesContainer from './RouterPagesContainer';
 
-const routerPagesContainer = new RouterPagesContainer();
-
-export default routerPagesContainer;
+export default RouterPagesContainer;