112 lines
2.9 KiB
JavaScript
112 lines
2.9 KiB
JavaScript
import Component from '../component/index';
|
|
import routeService from '../../services/RouteService';
|
|
|
|
import './MainMenu.css';
|
|
import {EVENTS} from '../../consts';
|
|
import tokenApi from '../../api/TokenAPI';
|
|
|
|
export const NAV_MENU = [
|
|
{
|
|
title: 'Главная',
|
|
url: '/',
|
|
},
|
|
{
|
|
title: 'Список хранилищ',
|
|
url: '/api',
|
|
},
|
|
{
|
|
title: 'Журнал',
|
|
url: '/logs',
|
|
},
|
|
{
|
|
title: 'Личный кабинет',
|
|
url: '/profile',
|
|
className: 'MainMenu__profileButton'
|
|
},
|
|
];
|
|
|
|
class MainMenu extends Component {
|
|
menuItems = [];
|
|
|
|
constructor () {
|
|
super('#main-menu', document.body);
|
|
|
|
this.buttonsContainer = this.mainNode.querySelector('.navbar-nav');
|
|
this.logoBox = this.mainNode.querySelector('.MainMenu__logoBox');
|
|
this.avatar = this.mainNode.querySelector('.MainMenu__avatar');
|
|
this.exitButton = this.mainNode.querySelector('.MainMenu__exitButton');
|
|
|
|
this.addEventListener(this.exitButton, 'click', this.exitApp);
|
|
|
|
this.addEventListener(this.logoBox, 'click', () => {
|
|
routeService.goTo('/');
|
|
});
|
|
|
|
this.addEventListener(this.avatar, 'click', () => {
|
|
routeService.goTo('/profile');
|
|
});
|
|
|
|
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');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
exitApp = () => {
|
|
tokenApi.clearTokents();
|
|
location.reload();
|
|
}
|
|
|
|
setAvatar = (url) => {
|
|
this.avatar.style.backgroundImage = `url('${url}')`;
|
|
}
|
|
|
|
render = () => {
|
|
this.menuItems = NAV_MENU.map(({url, title, className = ''}) => {
|
|
const li = this.createElement({
|
|
tagName: 'li',
|
|
parentNode: this.buttonsContainer,
|
|
options: {
|
|
className: `nav-item ${className}`,
|
|
},
|
|
args: {
|
|
'data-toggle': 'collapse',
|
|
'data-target': '#navbarNavDropdown',
|
|
}
|
|
});
|
|
const link = this.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);
|
|
}
|
|
}
|
|
|
|
export default MainMenu;
|