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 0000000..1972179
Binary files /dev/null and b/src/img/logo.png differ