HM-105. Подтянуть загрузку данных пользователя. (#47)

src/components/main-menu/MainMenu.js

@@ -4,19 +4,25 @@ import routeService from '../../services/RouteService';
 import './MainMenu.css';
 import {createElement} from '../../utils/elementUtils';
 import {EVENTS} from '../../consts';
+import tokenApi from '../../api/TokenAPI';
 
 export const NAV_MENU = [
     {
         title: 'Главная',
-        url: '/'
+        url: '/',
     },
     {
         title: 'Список хранилищ',
-        url: '/api'
+        url: '/api',
     },
     {
         title: 'Журнал',
-        url: '/logs'
+        url: '/logs',
+    },
+    {
+        title: 'Личный кабинет',
+        url: '/profile',
+        className: 'MainMenu__profileButton'
     },
 ];
 
@@ -27,12 +33,20 @@ class MainMenu extends Component {
         super('#main-menu', document.body);
 
         this.buttonsContainer = this.mainNode.querySelector('.navbar-nav');
-        this.logoBox = this.mainNode.querySelector('.Logo__box');
+        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) {
@@ -44,13 +58,22 @@ class MainMenu extends Component {
         });
     }
 
+    exitApp = () => {
+        tokenApi.clearTokents();
+        location.reload();
+    }
+
+    setAvatar = (url) => {
+        this.avatar.style.backgroundImage = `url('${url}')`;
+    }
+
     render = () => {
-        this.menuItems = NAV_MENU.map(({url, title}) => {
+        this.menuItems = NAV_MENU.map(({url, title, className = ''}) => {
             const li = createElement({
                 tagName: 'li',
                 parentNode: this.buttonsContainer,
                 options: {
-                    className: 'nav-item',
+                    className: `nav-item ${className}`,
                 },
             });
             const link = createElement({