From 40a2342758da5b1eb2371a9c77a0d1d84effd99f Mon Sep 17 00:00:00 2001 From: mrPadre <51297778+mrPadre@users.noreply.github.com> Date: Wed, 15 Jul 2020 12:30:09 +0300 Subject: [PATCH] =?UTF-8?q?HM-27=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D1=82=20?= =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D1=8E=20=D0=B2=D0=BC=D0=B5=D1=81=D1=82=D0=B5?= =?UTF-8?q?=20=D1=81=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD?= =?UTF-8?q?=D1=82=D0=BE=D0=BC=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8=20(#1?= =?UTF-8?q?1)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * HM-27 Добавил компонет меню вместе с компонентом кнопки --- src/app.css | 4 +++ src/app.html | 26 ++++++++++++++ src/app.js | 10 ++++-- .../button-component/ButtonComponent.js | 15 ++++++++ src/components/button-component/index.js | 0 .../NavButtonComponent.css | 16 +++++++++ .../NavButtonComponent.js | 33 ++++++++++++++++++ .../navigation-buttons-component/constants.js | 14 ++++++++ .../navigation-buttons-component/index.js | 3 ++ .../RouterPagesContainer.css | 3 -- .../router-pages-container/index.js | 4 +-- src/img/logo.png | Bin 0 -> 33077 bytes 12 files changed, 120 insertions(+), 8 deletions(-) create mode 100644 src/components/button-component/ButtonComponent.js create mode 100644 src/components/button-component/index.js create mode 100644 src/components/navigation-buttons-component/NavButtonComponent.css create mode 100644 src/components/navigation-buttons-component/NavButtonComponent.js create mode 100644 src/components/navigation-buttons-component/constants.js create mode 100644 src/components/navigation-buttons-component/index.js create mode 100644 src/img/logo.png diff --git a/src/app.css b/src/app.css index e69de29..c32a180 100644 --- a/src/app.css +++ b/src/app.css @@ -0,0 +1,4 @@ +.Logo { + width: 50px; + margin: 0 20px; +} diff --git a/src/app.html b/src/app.html index 88f795a..01a79c2 100644 --- a/src/app.html +++ b/src/app.html @@ -8,11 +8,37 @@
+ + + + + + + + diff --git a/src/app.js b/src/app.js index f395214..13b9f63 100644 --- 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([ diff --git a/src/components/button-component/ButtonComponent.js b/src/components/button-component/ButtonComponent.js new file mode 100644 index 0000000..122dad7 --- /dev/null +++ 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; diff --git a/src/components/button-component/index.js b/src/components/button-component/index.js new file mode 100644 index 0000000..e69de29 diff --git a/src/components/navigation-buttons-component/NavButtonComponent.css b/src/components/navigation-buttons-component/NavButtonComponent.css new file mode 100644 index 0000000..b7fd956 --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/src/components/navigation-buttons-component/NavButtonComponent.js b/src/components/navigation-buttons-component/NavButtonComponent.js new file mode 100644 index 0000000..3d814d9 --- /dev/null +++ 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; diff --git a/src/components/navigation-buttons-component/constants.js b/src/components/navigation-buttons-component/constants.js new file mode 100644 index 0000000..feacb23 --- /dev/null +++ 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' + }, +]; diff --git a/src/components/navigation-buttons-component/index.js b/src/components/navigation-buttons-component/index.js new file mode 100644 index 0000000..6092c4a --- /dev/null +++ b/src/components/navigation-buttons-component/index.js @@ -0,0 +1,3 @@ +import NavButtonComponent from './NavButtonComponent'; + +export default NavButtonComponent; diff --git a/src/components/router-pages-container/RouterPagesContainer.css b/src/components/router-pages-container/RouterPagesContainer.css index e772840..e69de29 100644 --- 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%; -} \ No newline at end of file diff --git a/src/components/router-pages-container/index.js b/src/components/router-pages-container/index.js index 89716a1..9708cf6 100644 --- 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; diff --git a/src/img/logo.png b/src/img/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..197217947587ae4d3ad9b204df2456f3f3a18731 GIT binary patch literal 33077 zcmV)wK$O3UP)8-RsPaJZ7&i0
z`pquV6IPENJ$4hN3lCk6_Dx#nuREYcA)uqE%oE>IH|?L+rM`3^+;Aor>j|qzj~=^2
zRPJ|o_itPZcGV2=8wRZs%&FB~kZZ1|`F+IxQqkjQdeNS+di3bAlPEHNG0tO~w!O2q
z=~07NP(~QVOp7~Jam}FRceKraZNl-JbMc XUyQ3wb0g_A-rn!|*U6h`%w&(wg$ZF8L7RRHq
z61!3bbteTS?E+VM7b{R3H{YgNA5aE)<%*`KI^jS1JF~B5N%!zhdPSz)8g35i_&-AP
z6^Mu3n8WLChH@f5%ta8@PEpjR^Ioy26!Y^)QIITmb%ZM0N|#U*vUEwQg(PCDcTT}C
z7x+|9SZ8`;RS6=vIT9mcPFpv$P2I`7c&2R)1+>}aXv0K@s11H^s^a08|9wb2Q<3-d
z1hKyiD_?C5lh{Uwifcq^fZ<+#{A^vex@yS9>i
zN&3r~AOfmn@|?KbmY%RS+