90 lines
2.3 KiB
JavaScript
90 lines
2.3 KiB
JavaScript
import Component from '../component/index';
|
|
import routeService from '../../services/RouteService';
|
|
import Image from '../../img/logo.svg';
|
|
|
|
import './MainMenu.css';
|
|
import {createElement} from '../../utils/elementUtils';
|
|
import {EVENTS} from '../../consts';
|
|
|
|
export const NAV_MENU = [
|
|
{
|
|
title: 'Главная',
|
|
url: '/'
|
|
},
|
|
{
|
|
title: 'Список хранилищ',
|
|
url: '/api'
|
|
},
|
|
{
|
|
title: 'Журнал',
|
|
url: '/logs'
|
|
},
|
|
];
|
|
|
|
class MainMenu extends Component {
|
|
menuItems = [];
|
|
|
|
constructor () {
|
|
super('#main-menu', document.body);
|
|
|
|
this.buttonsContainer = this.mainNode.querySelector('.navbar-nav');
|
|
this.logoImg = document.createElement('img');
|
|
this.logoImg.src = Image;
|
|
this.logoImg.alt = 'logo';
|
|
this.logoImg.className = 'Logo mr-2';
|
|
this.logoBox = this.mainNode.querySelector('.Logo__box');
|
|
this.logoBox.appendChild(this.logoImg);
|
|
|
|
this.addSubscribe(routeService, EVENTS.ROUTE_CHANGE, (route) => {
|
|
this.menuItems.forEach(({url, link}) => {
|
|
if (route.url === url) {
|
|
link.classList.add('active');
|
|
} else {
|
|
link.classList.remove('active');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
render = () => {
|
|
this.menuItems = NAV_MENU.map(({url, title}) => {
|
|
const li = createElement({
|
|
tagName: 'li',
|
|
parentNode: this.buttonsContainer,
|
|
options: {
|
|
className: 'nav-item',
|
|
},
|
|
});
|
|
const link = createElement({
|
|
tagName: 'a',
|
|
parentNode: li,
|
|
options: {
|
|
className: 'nav-link',
|
|
textContent: title,
|
|
},
|
|
});
|
|
this.addEventListener(li, 'click', () => {
|
|
routeService.goTo(url);
|
|
});
|
|
|
|
return {url, link};
|
|
});
|
|
}
|
|
|
|
isHide = () => {
|
|
return this.mainNode.parentNode;
|
|
}
|
|
|
|
hideMenu = () => {
|
|
this.mainNode.remove();
|
|
}
|
|
|
|
showMenu = () => {
|
|
document.body.prepend(this.mainNode);
|
|
}
|
|
}
|
|
|
|
const navMenuButtons = new MainMenu();
|
|
|
|
export default navMenuButtons;
|