All files / src/components/Profile CollapseMenu.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
 
 
 
 
4x
 
 
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { FC } from 'react';
import { KsCollapse } from 'ag-ems-ui-library';
import { LocalizedLink as Link } from 'gatsby-theme-i18n';
import { useTranslation } from 'react-i18next';
import { useUserContext } from '../../contexts';
const styles = require('./Profile.module.css')
import { ProfilePage } from './types';
 
export const CollapseMenu: FC<{ current?: ProfilePage }> = ({ current }) => {
  const { t } = useTranslation();
  const { signout } = useUserContext();
 
  const logout = () => {
    signout();
  };
 
  return (
    <KsCollapse title={t('profile.myAccount')} sticky={true}>
      <div className={styles.ProfileMenu}>
        <ul className={styles.ProfileMenuList}>
          <li>
            <Link className={`${styles.ProfileMenuItem} ${current === 'profile' ? styles.current : ''}`}
                  to="/profile">{t('profile.myData')}</Link>
          </li>
          <li>
            <Link className={`${styles.ProfileMenuItem} ${current === 'addresses' ? styles.current : ''}`}
                  to="/profile/addresses">{t('profile.myAddresses')}</Link>
          </li>
          <li>
            <Link className={`${styles.ProfileMenuItem} ${current === 'orders' ? styles.current : ''}`}
                  to="/profile/orders">{t('profile.myOrders')}</Link>
          </li>
          <li>
            <button className={styles.ProfileMenuItem} type="button" onClick={logout}>{t('logout')}</button>
          </li>
        </ul>
      </div>
    </KsCollapse>
  );
};