Source: components/baseComponents/sidebar/Sidebar.js

// SideBar.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { withNamespaces } from 'react-i18next';

/**
 * SideBar
 * @extends Component
 * @hideconstructor
 */
class SideBar extends Component {

  render() {
    const { t } = this.props;
    return (
      <aside className="main-sidebar">
        <section className="sidebar">
          <div className="user-panel">
            <div className="pull-left image">
              <img src={require("../../../assets/img/smartlogo.jpg")}
                   className="img-circle"
                   alt="User Image"/>
            </div>
            <div className="pull-left info">
              <p>Traffic Watch</p>
              <a href="http://labss2.fiit.stuba.sk/TeamProject/2018/team21iss-it/"><i className="fa fa-circle text-info"></i>{t('sidebar.about')}</a>
            </div>
          </div>

          <ul className="sidebar-menu" data-widget="tree">
            <li className="header">{t('sidebar.mainNavigation')}</li>
            <li>
              <Link to="/"><i className="fa fa-dashboard"></i><span>{t('sidebar.dashboard')}</span></Link>
            </li>
            <li>
              <Link to="/MonitoredArea"><i className="fa fa-camera"></i><span>{t('sidebar.monitoredAreas')}</span></Link>
            </li>
            <li>
              <Link to="/live"><i className="fa fa-play"></i><span>{t('sidebar.liveStreams')}</span></Link>
            </li>
            <li className="header uppercase">
              {t('sidebar.configuration')}
            </li>
            <li>
              <Link to="/config"><i className="fa fa-gear"></i><span>{t('sidebar.adminConfiguration')}</span></Link>
            </li>
          </ul>
        </section>
      </aside>
    )
  }
}

export default withNamespaces()(SideBar);