# All files / src/components/Menu MenuItems.tsx

60% Statements 9/15
100% Branches 0/0
0% Functions 0/4
70% Lines 7/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    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
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    1x
    1x
    1x
    1x

    1x

    1x

    1x

     import type { FC } from 'react';
    import { bannerPages } from '../../routes';
    import cs from 'classnames';
    import { NavLink } from 'react-router-dom';
    import { Covid19, Deaths, IncreaseInDeaths } from 'src/urls';

    import styles from './Menu.module.scss';

    export interface MenuItemsProps {
      collapse: () => void;
    }

    export const MenuItems: FC<MenuItemsProps> = ({ collapse }) => (
      <>
        {bannerPages.map((page) => (
          <li key={page.heading} className={styles.horizontal}>
            <NavLink to={page.path} className={page.className} activeClassName={styles.active} onClick={collapse}>
              {page.heading}
            </NavLink>
          </li>
        ))}
      </>
    );

    export const MobileMenuItems: FC<MenuItemsProps> = ({ collapse }) => {
      return (
        <div>
          <li className={cs(styles.horizontal, styles.mobile, styles.close__button)}>
            <button type="button" onClick={collapse}>
              X
            </button>
          </li>
          <MenuItems collapse={collapse} />
          {[
            {
              path: Covid19,
              heading: 'COVID-19 Daily increase in Scottish deaths',
            },
            {
              path: IncreaseInDeaths,
              heading: 'COVID-19 Daily increase in World deaths',
            },
            { path: Deaths, heading: 'COVID-19 Total deaths' },
          ].map((page) => {
            return (
              <li key={page.heading} className={cs(styles.horizontal, styles.mobile)}>
                <NavLink to={page.path} activeClassName={styles.active} onClick={collapse}>
                  {page.heading}
                </NavLink>
              </li>
            );
          })}
        </div>
      );
    };