FooterMenu FooterMenu.tsx

70.37% Statements 19/27
54.55% Branches 6/11
60% Functions 6/10
70.37% Lines 19/27
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140  
4x
 
 
 
 
 
 
 
4x
 
 
156x
 
 
 
 
 
 
4x
12x
 
 
 
 
 
4x
 
 
 
 
 
18x
18x
 
18x
12x
12x
 
 
 
12x
12x
 
 
 
 
18x
12x
 
 
 
 
 
 
 
 
 
 
 
 
4x
6x
 
6x
 
 
 
 
 
 
 
6x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { ComponentProps, FC, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
const styles = require('./FooterMenu.module.css')
import { SvgIcon } from '../../../SvgIcon';
import { LocalizedLink as Link } from 'gatsby-theme-i18n';
 
interface FooterMenuItemProps extends ComponentProps<Link> {
  local?: boolean;
}
 
export const FooterMenuItem: FC<FooterMenuItemProps> = ({
  local = true, to, target, children
}) =>
  <li>
    {local
      ? <Link className={styles.FooterMenuItem} to={to}>{children}</Link>
      : <a className={styles.FooterMenuItem} href={to} target={target}>{children}</a>
    }
  </li>;
 
export const FooterMenuList: FC = ({ children }) =>
  <ul className={styles.FooterMenuList}>{children}</ul>;
 
export const FooterMenuSection: FC<{
  title: string;
  open?: boolean;
  onClick?: () => void;
}> = ({
  title,
  open,
  onClick,
  children
}) => {
  const sectionRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
 
  useLayoutEffect(() => {
    Eif (sectionRef.current && contentRef.current) {
      Iif (open) {
        sectionRef.current.classList.add(styles.open);
        contentRef.current.style.height = `${contentRef.current.scrollHeight}px`;
      } else {
        contentRef.current.removeAttribute('style');
        sectionRef.current.classList.remove(styles.open);
      }
    }
  }, [open]);
 
  return useMemo(() => (
    <div className={styles.FooterMenuSection} ref={sectionRef}>
      <p className={styles.FooterMenuSectionTitle}>{title}</p>
      <button className={styles.FooterMenuSectionButton} type="button" onClick={onClick}>
        <span>{title}</span>
        <SvgIcon icon={{ name: "chevron-down", width: 20, height: 20, fill: "#144154" }} />
      </button>
      <div className={styles.FooterMenuSectionContent} ref={contentRef}>
        {children}
      </div>
    </div>
  ), [open]);
};
 
export const FooterMenu: FC = () => {
  const [activeIndex, setActiveIndex] = useState<number | string | null>(null);
 
  const clickHandler = useCallback(index => {
    if (index === activeIndex) {
      setActiveIndex(null);
    } else {
      setActiveIndex(index);
    }
  }, [activeIndex, setActiveIndex]);
 
  return (
    <div className={styles.FooterMenu}>
      <FooterMenuSection
        open={activeIndex === 1}
        onClick={() => clickHandler(1)}
        title={'AG EMS'}
      >
        <FooterMenuList>
          <FooterMenuItem to="#">Aktuelles</FooterMenuItem>
          <FooterMenuItem to="#">Unternehmen</FooterMenuItem>
          <FooterMenuItem to="#">Karriere</FooterMenuItem>
          <FooterMenuItem to="#">AGB &amp; Fahrgastrechte</FooterMenuItem>
          <FooterMenuItem to="#">QMS</FooterMenuItem>
          <FooterMenuItem to="#">Presse</FooterMenuItem>
          <FooterMenuItem to="#">Fracht &amp; Logistik</FooterMenuItem>
          <FooterMenuItem to="#">Catering</FooterMenuItem>
          <FooterMenuItem to="#">Souvenirs</FooterMenuItem>
          <FooterMenuItem to="#">Sitemap</FooterMenuItem>
          <FooterMenuItem to="#">Kontakt</FooterMenuItem>
          <FooterMenuItem to="#">Datenschutz</FooterMenuItem>
          <FooterMenuItem to="#">Impressum</FooterMenuItem>
        </FooterMenuList>
      </FooterMenuSection>
      <FooterMenuSection
        open={activeIndex === 2}
        onClick={() => clickHandler(2)}
        title={'Cassen Eils'}
      >
        <FooterMenuList>
          <FooterMenuItem to="#">Aktuelles</FooterMenuItem>
          <FooterMenuItem to="#">Unternehmen</FooterMenuItem>
          <FooterMenuItem to="#">Karriere</FooterMenuItem>
          <FooterMenuItem to="#">AGB &amp; Fahrgastrechte</FooterMenuItem>
          <FooterMenuItem to="#">QMS</FooterMenuItem>
          <FooterMenuItem to="#">Presse</FooterMenuItem>
          <FooterMenuItem to="#">Fracht &amp; Logistik</FooterMenuItem>
          <FooterMenuItem to="#">Catering</FooterMenuItem>
          <FooterMenuItem to="#">Souvenirs</FooterMenuItem>
          <FooterMenuItem to="#">Sitemap</FooterMenuItem>
          <FooterMenuItem to="#">Kontakt</FooterMenuItem>
          <FooterMenuItem to="#">Datenschutz</FooterMenuItem>
          <FooterMenuItem to="#">Impressum</FooterMenuItem>
        </FooterMenuList>
      </FooterMenuSection>
      <FooterMenuSection
        open={activeIndex === 3}
        onClick={() => clickHandler(3)}
        title={'Klarschiff.de'}
      >
        <FooterMenuList>
          <FooterMenuItem to="#">Aktuelles</FooterMenuItem>
          <FooterMenuItem to="#">Unternehmen</FooterMenuItem>
          <FooterMenuItem to="#">Karriere</FooterMenuItem>
          <FooterMenuItem to="#">AGB &amp; Fahrgastrechte</FooterMenuItem>
          <FooterMenuItem to="#">QMS</FooterMenuItem>
          <FooterMenuItem to="#">Presse</FooterMenuItem>
          <FooterMenuItem to="#">Fracht &amp; Logistik</FooterMenuItem>
          <FooterMenuItem to="#">Catering</FooterMenuItem>
          <FooterMenuItem to="#">Souvenirs</FooterMenuItem>
          <FooterMenuItem to="#">Sitemap</FooterMenuItem>
          <FooterMenuItem to="#">Kontakt</FooterMenuItem>
          <FooterMenuItem to="#">Datenschutz</FooterMenuItem>
          <FooterMenuItem to="#">Impressum</FooterMenuItem>
        </FooterMenuList>
      </FooterMenuSection>
    </div>
  );
};