navigation.tsx

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import GuardLink from '../../../containers/GuardLink';

import styles from './styles.module.scss';
import Config from '../../../config/';
import { rolesAccess } from '../../../constants';
import { MAIN_MENU } from '../../../containers/App/constants'
import Hamburger from '../Hamburger'

const Navigation = ({ unreadMessagesCount, userProfile }) => {
  const showKundenKonto = !!userProfile && !!userProfile.role &&
    (!Config.env.features.toJS().loginWithIAM || rolesAccess[userProfile.role].accountPage);
  const pathname = window.location.pathname;

  const unreadMessagesInfo = unreadMessagesCount ? (
    <span className={styles.badge} data-test="postbox-counter">
      {unreadMessagesCount < 100 ? unreadMessagesCount : '99+'}
    </span>
  ) : null;

  useEffect(() => {
    console.log(window.location.pathname)
  })

  const menuElements = (menu) => {
    return menu.map(element => {
      return (
        <>
          {showKundenKonto &&
            <GuardLink
              data-test={element.dataTest}
              className={cx({
                [styles.item]: true,
                [styles.activeItem]: window.location.pathname === element.path
              })}
              to={element.path}
              key={element.path}
            >
              {element.name}

              {element.path === '/mailbox' &&
                unreadMessagesInfo
              }
            </GuardLink>
          }
        </>
      )
    })
  }

  return (
    <>
      <div className={cx(pathname === '/home' ? styles.hidden : styles.wrapper)} data-test="navigation">
        {menuElements(MAIN_MENU)}
        {/* <GuardLink
          data-test="overview-tab"
          className={cx({
            [styles.item]: true,
            [styles.activeItem]: pathname === '/dashboard/avalarten'
          })}
          to="/dashboard/avalarten"
        >übersicht</GuardLink>

        <GuardLink
          data-test="bond-order-tab"
          className={cx({
            [styles.item]: true,
            [styles.activeItem]: pathname === '/avalantrag'
          })}
          to="/avalantrag"
        >Avalantrag</GuardLink>

        <GuardLink
          data-test="change-facility-tab"
          className={cx({
            [styles.item]: true,
            [styles.activeItem]: pathname === '/Avalrahmenaenderung'
          })}
          to="/Avalrahmenaenderung"
        >avalrahmenänderung</GuardLink>

        {showKundenKonto &&
          <GuardLink
            data-test="account-tab"
            id={'kontoLink'}
            className={cx({
              [styles.item]: true,
              [styles.activeItem]: pathname === '/konto'
            })}
            to="/konto"
          >kundenkonto</GuardLink>
        }

        <GuardLink
          data-test="postbox-tab"
          className={cx({
            [styles.item]: true,
            [styles.activeItem]: pathname === '/mailbox'
          })}
          to="/mailbox"
        >
          Postfach

          {unreadMessagesInfo}
        </GuardLink>

        <GuardLink
          data-test="services-tab"
          className={cx({
            [styles.item]: true,
            [styles.activeItem]: pathname === '/support'
          })}
          to="/support"
        >service</GuardLink> */}

      </div>

      <Hamburger />
    </>
  );
};

Navigation.propTypes = {
  unreadMessagesCount: PropTypes.number,
  userProfile: PropTypes.object,
};

export default Navigation;