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

* HM-27 Добавил компонет меню вместе с компонентом кнопки
2020-07-15 12:30:09 +03:00
parent 1cfcd762be
commit 40a2342758
12 changed files with 120 additions and 8 deletions
--- a/src/app.css
+++ b/src/app.css
@ -0,0 +1,4 @@
+.Logo {
+    width: 50px;
+    margin: 0 20px;
+}
--- a/src/app.html
+++ b/src/app.html
@ -8,11 +8,37 @@
 </head>

 <body>
+    <!-- Шаблон верхнего меню -->
+    <template id='main-menu'>
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+            <div class="Logo__box">
+            </div>
+            <button 
+                class="navbar-toggler" 
+                type="button" 
+                data-toggle="collapse" 
+                data-target="#navbarNavDropdown" 
+                aria-controls="navbarNavDropdown" 
+                aria-expanded="false" 
+                aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNavDropdown">
+                <div class="Buttons__container">
+                </div>
+            </div>
+        </nav>
+    </template>
    <!-- Шаблон контейнера страниц-->
    <template id="page-container">
        <div class="PageContainer"></div>
    </template>

+    <!-- Шаблон кнопки-->
+    <template id="button">
+        <button type="button" class="btn btn-outline-primary"></div>
+    </template>
+
    <!-- Шаблон страниц -->
    <template id="page">
        <div class="Page"></div>
--- a/src/app.js
+++ b/src/app.js
@ -2,10 +2,16 @@ import './app.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap';

-import routeService from './services/RouteService';
-import routerPagesContainer from './components/router-pages-container';
 import ApiPage from './components/api-page';
 import MainPage from './components/main-page';
+import navMenuButtons from './components/navigation-buttons-component/NavButtonComponent';
+import {NAV_MENU} from './components/navigation-buttons-component/constants';
+import routeService from './services/RouteService';
+import RouterPagesContainer from './components/router-pages-container/index';
+
+navMenuButtons.render(NAV_MENU);
+
+const routerPagesContainer = new RouterPagesContainer();

 // Новые страницы обязательно добавляем тут
 routerPagesContainer.addRoutes([
--- a/src/components/button-component/ButtonComponent.js
+++ b/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;
--- a/src/components/button-component/index.js
+++ b/src/components/button-component/index.js
--- a/src/components/navigation-buttons-component/NavButtonComponent.css
+++ b/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;
+    }
+}
--- a/src/components/navigation-buttons-component/NavButtonComponent.js
+++ b/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;
--- a/src/components/navigation-buttons-component/constants.js
+++ b/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'
+    },
+];
--- a/src/components/navigation-buttons-component/index.js
+++ b/src/components/navigation-buttons-component/index.js
@ -0,0 +1,3 @@
+import NavButtonComponent from './NavButtonComponent';
+
+export default NavButtonComponent;
--- a/src/components/router-pages-container/RouterPagesContainer.css
+++ b/src/components/router-pages-container/RouterPagesContainer.css
@ -1,3 +0,0 @@
-html, body, .PageContainer, .Page {
-    height: 100%;
-}
--- a/src/components/router-pages-container/index.js
+++ b/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;
--- a/src/img/logo.png
+++ b/src/img/logo.png