vigdorov/storage-service-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* HM-27 Добавил компонет меню вместе с компонентом кнопки
This commit is contained in:
mrPadre
2020-07-15 12:30:09 +03:00
committed by GitHub
parent 1cfcd762be
commit 40a2342758
12 changed files with 120 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.css
View File

@ -0,0 +1,4 @@
.Logo {
width: 50px;
margin: 0 20px;
}

26
src/app.html
View File

@ -8,11 +8,37 @@
</head> </head>
<body> <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"> <template id="page-container">
<div class="PageContainer"></div> <div class="PageContainer"></div>
</template> </template>
<!-- Шаблон кнопки-->
<template id="button">
<button type="button" class="btn btn-outline-primary"></div>
</template>
<!-- Шаблон страниц --> <!-- Шаблон страниц -->
<template id="page"> <template id="page">
<div class="Page"></div> <div class="Page"></div>

10
src/app.js
View File

@ -2,10 +2,16 @@ import './app.css';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap'; import 'bootstrap';
import routeService from './services/RouteService';
import routerPagesContainer from './components/router-pages-container';
import ApiPage from './components/api-page'; import ApiPage from './components/api-page';
import MainPage from './components/main-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([ routerPagesContainer.addRoutes([

15
src/components/button-component/ButtonComponent.js Normal file
View File

@ -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;

0
src/components/button-component/index.js Normal file
View File

16
src/components/navigation-buttons-component/NavButtonComponent.css Normal file
View File

@ -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;
}
}

33
src/components/navigation-buttons-component/NavButtonComponent.js Normal file
View File

@ -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;

14
src/components/navigation-buttons-component/constants.js Normal file
View File

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

3
src/components/navigation-buttons-component/index.js Normal file
View File

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

3
src/components/router-pages-container/RouterPagesContainer.css
View File

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

4
src/components/router-pages-container/index.js
View File

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

BIN
src/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB