src/components/PageHeader.tsx - Code Metrics - Inspection of "Full redesign from zero. (#758) (#874)" - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( 7aa1e4...a37cc0 )

by Kevin Van

created 2022-09-05 08:59 UTC

src/components/PageHeader.tsx A

↳ Parent: Project

Complexity

Total Complexity	1
Complexity/F	0

Size

Lines of Code	346
Function Count	0

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
wmc	1
eloc	329
mnd	1
bc	1
fnc	0
dl	0
loc	346
rs	10
bpm	0
cpm	0
noi	0
c	0
b	0
f	0

import Icon from "./Icon"
import "./PageHeader.scss"
import { Link } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"
import React, { Fragment, useEffect } from "react"

const MenuItems = () => {
  useEffect(() => {
    const activeLinks = document.querySelectorAll(`.active`)
    let parent = null

    activeLinks.forEach((activeLink) => {
      parent = activeLink.closest(`.submenu`)
      if (parent !== null) {
        parent.classList.add(`is-active`)
      }
    })
  }, [])

  return (
    <Fragment>
      <li>
        <Link to="/" activeClassName="active" partiallyActive={false}>
          Home
        </Link>
      </li>
      <li>
        <Link to="/news/" activeClassName="active" partiallyActive={true}>
          Nieuws
        </Link>
      </li>
      <li>
        <Link to="/events/" activeClassName="active" partiallyActive={true}>
          Evenementen
        </Link>
      </li>
      <li>
        <Link to="/team/a-ploeg" activeClassName="active" partiallyActive={true}>
          A-Ploeg
        </Link>
        <ul className="vertical menu submenu">
          <li>
            <Link to="/team/a-ploeg#team-info" activeClassName="active" partiallyActive={true}>
              Info
            </Link>
          </li>
          <li>
            <Link to="/team/a-ploeg#team-lineup" activeClassName="active" partiallyActive={true}>
              Spelers &amp; Staff
            </Link>
          </li>
          <li>
            <Link to="/team/a-ploeg#team-matches" activeClassName="active" partiallyActive={true}>
              Wedstrijden
            </Link>
          </li>
          <li>
            <Link to="/team/a-ploeg#team-ranking" activeClassName="active" partiallyActive={true}>
              Stand
            </Link>
          </li>
        </ul>
      </li>
      <li>
        <Link to="/team/b-ploeg" activeClassName="active" partiallyActive={true}>
          B-Ploeg
        </Link>
        <ul className="vertical menu submenu">
          <li>
            <Link to="/team/b-ploeg#team-info" activeClassName="active" partiallyActive={true}>
              Info
            </Link>
          </li>
          <li>
            <Link to="/team/b-ploeg#team-lineup" activeClassName="active" partiallyActive={true}>
              Spelers &amp; Staff
            </Link>
          </li>
          <li>
            <Link to="/team/b-ploeg#team-matches" activeClassName="active" partiallyActive={true}>
              Wedstrijden
            </Link>
          </li>
          <li>
            <Link to="/team/b-ploeg#team-ranking" activeClassName="active" partiallyActive={true}>
              Stand
            </Link>
          </li>
        </ul>
      </li>
      <li>
        <Link to="/jeugd/" activeClassName="active" partiallyActive={true}>
          Jeugd
        </Link>
        <ul className="vertical menu submenu">
          <li>
            <Link to="/team/zondagsreserven/" activeClassName="active" partiallyActive={true}>
              Zondagsreserven
            </Link>
          </li>
          <li>
            <Link
              to="/team/veteranen/"
              activeClassName="active"
              partiallyActive={true}
              className="menu_item--border-bottom"
            >
              Veteranen
            </Link>
          </li>
          <li>
            <Link to="/jeugd/u17/" activeClassName="active" partiallyActive={true}>
              U17
            </Link>
          </li>
          <li>
            <Link to="/jeugd/u15/" activeClassName="active" partiallyActive={true}>
              U15
            </Link>
          </li>
          <li>
            <Link to="/jeugd/u14/" activeClassName="active" partiallyActive={true}>
              U14
            </Link>
          </li>
          <li>
            <Link to="/jeugd/u13/" activeClassName="active" partiallyActive={true}>
              U13
            </Link>
          </li>
          <li>
            <Link to="/jeugd/u12/" activeClassName="active" partiallyActive={true}>
              U12
            </Link>
          </li>
          <li>
            <Link to="/jeugd/u11/" activeClassName="active" partiallyActive={true}>
              U11 - Groen
            </Link>
          </li>
          <li>
            <Link to="/jeugd/u11-wit/" activeClassName="active" partiallyActive={true}>
              U11 - Wit
            </Link>
          </li>
          <li>
            <Link to="/jeugd/u9/" activeClassName="active" partiallyActive={true}>
              U9
            </Link>
          </li>
          <li>
            <Link to="/jeugd/u8/" activeClassName="active" partiallyActive={true}>
              U8
            </Link>
          </li>
          <li>
            <Link to="/jeugd/u7/" activeClassName="active" partiallyActive={true}>
              U7
            </Link>
          </li>
          <li>
            <Link to="/jeugd/u6/" activeClassName="active" partiallyActive={true}>
              U6
            </Link>
          </li>
        </ul>
      </li>
      <li>
        <Link to="/sponsors/" activeClassName="active" partiallyActive={true}>
          Sponsors
        </Link>
      </li>
      <li>
        <Link to="/club/" activeClassName="active" partiallyActive={true}>
          De club
        </Link>
        <ul className="vertical menu submenu">
          <li>
            <Link to="/club/history/" activeClassName="active" partiallyActive={true}>
              Geschiedenis
            </Link>
          </li>
          <li>
            <Link to="/club/bestuur/" activeClassName="active" partiallyActive={true}>
              Bestuur
            </Link>
          </li>
          <li>
            <Link to="/club/jeugdbestuur/" activeClassName="active" partiallyActive={true}>
              Jeugdbestuur
            </Link>
          </li>
          <li>
            <Link to="/club/angels/" activeClassName="active" partiallyActive={true}>
              KCVV Angels
            </Link>
          </li>
          <li>
            <Link to="/club/ultras/" activeClassName="active" partiallyActive={true}>
              KCVV Ultras
            </Link>
          </li>
          <li>
            <Link to="/club/contact/" activeClassName="active" partiallyActive={true}>
              Contact
            </Link>
          </li>
          <li>
            <Link to="/club/downloads/" activeClassName="active" partiallyActive={true}>
              Downloads
            </Link>
          </li>
          <li>
            <Link to="/club/register/" activeClassName="active" partiallyActive={true}>
              Praktische Info
            </Link>
          </li>
        </ul>
      </li>
      <li>
        <Link to="/search/" activeClassName="active" partiallyActive={true} className="menu_link__search">
          <Icon icon="fa fa-search" />
          {` `}
          <span className={`display-mobile--inline-block display-mobile search--label`}>Zoeken</span>
        </Link>
      </li>
    </Fragment>
  )
}

export const PageHeader = () => (
  // <!-- START STICKY CONTAINER --> //
  // <header data-sticky-container className="l--header">
  <header className="l--header">
    {/* <!-- START STICKY INNER --> */}
    {/* <div data-sticky data-options="marginTop:0;"> */}
    <div className="navigation">
      {/* <!-- START MOBILE NAV BAR --> */}
      <div className="header--mobile">
        <button
          type="button"
          className="menu-icon"
          data-toggle="responsiveNavigation"
          aria-label="Toggle Responsive navigation"
        />
        <div className="header-mobile__logo">
          <Link to="/">
            <StaticImage
              src="../images/logo-flat.png"
              alt="KCVV ELEWIJT"
              width={100}
              placeholder="none"
              className="header-mobile__logo-img"
            />
          </Link>
        </div>
      </div>
      {/* <!-- END MOBILE NAV BAR --> */}

      {/* <!-- START DESKTOP NAV BAR --> */}
      <div className="header--desktop">
        {/* LOGO */}
        <div className="header-logo">
          <Link to="/">
            <StaticImage
              src="../images/logo-flat.png"
              alt="KCVV ELEWIJT"
              placeholder="none"
              height={112}
              className="header__logo-img"
            />
          </Link>
        </div>
        <nav className="main-nav">
          <ul className="main-nav__list--desktop menu dropdown" data-dropdown-menu>
            <MenuItems />
          </ul>
        </nav>
      </div>
    </div>
    {/* <!-- END DESKTOP NAV BAR --> */}

    {/* <!-- END STICKY INNER --> */}
  </header>
  // <!-- END STICKY CONTAINER --> //
)

export const PageHeaderMobile = () => (
  <nav className="off-canvas position-left" id="responsiveNavigation" data-off-canvas>
    <ul className="main-nav__list vertical menu" data-responsive-menu="accordion large-dropdown">
      <div className="header-mobile__logo">
        <button aria-label="Close menu" type="button" data-toggle="" className="button--back">
          {/* <span aria-hidden="true" /> */}
        </button>

        <Link to="/">
          <StaticImage
            src="../images/logo-flat.png"
            alt="KCVV ELEWIJT"
            width={100}
            placeholder="none"
            className="header-mobile__logo-img"
          />
        </Link>
      </div>

      <MenuItems />

      <li className="main-nav__item--social-links">
        <a
          href="https://www.facebook.com/KCVVElewijt"
          className="social-links__link"
          data-toggle="tooltip"
          data-placement="bottom"
          title=""
          data-original-title="Facebook"
        >
          <Icon icon="fa-facebook" />
        </a>

        <a
          href="https://twitter.com/kcvve"
          className="social-links__link"
          data-toggle="tooltip"
          data-placement="bottom"
          title=""
          data-original-title="Twitter"
        >
          <Icon icon="fa-twitter" />
        </a>

        <a
          href="https://www.instagram.com/kcvve/"
          className="social-links__link"
          data-toggle="tooltip"
          data-placement="bottom"
          title=""
          data-original-title="Instagram"
        >
          <Icon icon="fa-instagram" />
        </a>
      </li>
    </ul>
  </nav>
)


1			import Icon from "./Icon"
2			import "./PageHeader.scss"
3			import { Link } from "gatsby"
4			import { StaticImage } from "gatsby-plugin-image"
5			import React, { Fragment, useEffect } from "react"
6
7			const MenuItems = () => {
8			useEffect(() => {
9			const activeLinks = document.querySelectorAll(`.active`)
10			let parent = null
11
12			activeLinks.forEach((activeLink) => {
13			parent = activeLink.closest(`.submenu`)
14			if (parent !== null) {
15			parent.classList.add(`is-active`)
16			}
17			})
18			}, [])
19
20			return (
21			<Fragment>
22			<li>
23			<Link to="/" activeClassName="active" partiallyActive={false}>
24			Home
25			</Link>
26			</li>
27			<li>
28			<Link to="/news/" activeClassName="active" partiallyActive={true}>
29			Nieuws
30			</Link>
31			</li>
32			<li>
33			<Link to="/events/" activeClassName="active" partiallyActive={true}>
34			Evenementen
35			</Link>
36			</li>
37			<li>
38			<Link to="/team/a-ploeg" activeClassName="active" partiallyActive={true}>
39			A-Ploeg
40			</Link>
41			<ul className="vertical menu submenu">
42			<li>
43			<Link to="/team/a-ploeg#team-info" activeClassName="active" partiallyActive={true}>
44			Info
45			</Link>
46			</li>
47			<li>
48			<Link to="/team/a-ploeg#team-lineup" activeClassName="active" partiallyActive={true}>
49			Spelers & Staff
50			</Link>
51			</li>
52			<li>
53			<Link to="/team/a-ploeg#team-matches" activeClassName="active" partiallyActive={true}>
54			Wedstrijden
55			</Link>
56			</li>
57			<li>
58			<Link to="/team/a-ploeg#team-ranking" activeClassName="active" partiallyActive={true}>
59			Stand
60			</Link>
61			</li>
62			</ul>
63			</li>
64			<li>
65			<Link to="/team/b-ploeg" activeClassName="active" partiallyActive={true}>
66			B-Ploeg
67			</Link>
68			<ul className="vertical menu submenu">
69			<li>
70			<Link to="/team/b-ploeg#team-info" activeClassName="active" partiallyActive={true}>
71			Info
72			</Link>
73			</li>
74			<li>
75			<Link to="/team/b-ploeg#team-lineup" activeClassName="active" partiallyActive={true}>
76			Spelers & Staff
77			</Link>
78			</li>
79			<li>
80			<Link to="/team/b-ploeg#team-matches" activeClassName="active" partiallyActive={true}>
81			Wedstrijden
82			</Link>
83			</li>
84			<li>
85			<Link to="/team/b-ploeg#team-ranking" activeClassName="active" partiallyActive={true}>
86			Stand
87			</Link>
88			</li>
89			</ul>
90			</li>
91			<li>
92			<Link to="/jeugd/" activeClassName="active" partiallyActive={true}>
93			Jeugd
94			</Link>
95			<ul className="vertical menu submenu">
96			<li>
97			<Link to="/team/zondagsreserven/" activeClassName="active" partiallyActive={true}>
98			Zondagsreserven
99			</Link>
100			</li>
101			<li>
102			<Link
103			to="/team/veteranen/"
104			activeClassName="active"
105			partiallyActive={true}
106			className="menu_item--border-bottom"
107			>
108			Veteranen
109			</Link>
110			</li>
111			<li>
112			<Link to="/jeugd/u17/" activeClassName="active" partiallyActive={true}>
113			U17
114			</Link>
115			</li>
116			<li>
117			<Link to="/jeugd/u15/" activeClassName="active" partiallyActive={true}>
118			U15
119			</Link>
120			</li>
121			<li>
122			<Link to="/jeugd/u14/" activeClassName="active" partiallyActive={true}>
123			U14
124			</Link>
125			</li>
126			<li>
127			<Link to="/jeugd/u13/" activeClassName="active" partiallyActive={true}>
128			U13
129			</Link>
130			</li>
131			<li>
132			<Link to="/jeugd/u12/" activeClassName="active" partiallyActive={true}>
133			U12
134			</Link>
135			</li>
136			<li>
137			<Link to="/jeugd/u11/" activeClassName="active" partiallyActive={true}>
138			U11 - Groen
139			</Link>
140			</li>
141			<li>
142			<Link to="/jeugd/u11-wit/" activeClassName="active" partiallyActive={true}>
143			U11 - Wit
144			</Link>
145			</li>
146			<li>
147			<Link to="/jeugd/u9/" activeClassName="active" partiallyActive={true}>
148			U9
149			</Link>
150			</li>
151			<li>
152			<Link to="/jeugd/u8/" activeClassName="active" partiallyActive={true}>
153			U8
154			</Link>
155			</li>
156			<li>
157			<Link to="/jeugd/u7/" activeClassName="active" partiallyActive={true}>
158			U7
159			</Link>
160			</li>
161			<li>
162			<Link to="/jeugd/u6/" activeClassName="active" partiallyActive={true}>
163			U6
164			</Link>
165			</li>
166			</ul>
167			</li>
168			<li>
169			<Link to="/sponsors/" activeClassName="active" partiallyActive={true}>
170			Sponsors
171			</Link>
172			</li>
173			<li>
174			<Link to="/club/" activeClassName="active" partiallyActive={true}>
175			De club
176			</Link>
177			<ul className="vertical menu submenu">
178			<li>
179			<Link to="/club/history/" activeClassName="active" partiallyActive={true}>
180			Geschiedenis
181			</Link>
182			</li>
183			<li>
184			<Link to="/club/bestuur/" activeClassName="active" partiallyActive={true}>
185			Bestuur
186			</Link>
187			</li>
188			<li>
189			<Link to="/club/jeugdbestuur/" activeClassName="active" partiallyActive={true}>
190			Jeugdbestuur
191			</Link>
192			</li>
193			<li>
194			<Link to="/club/angels/" activeClassName="active" partiallyActive={true}>
195			KCVV Angels
196			</Link>
197			</li>
198			<li>
199			<Link to="/club/ultras/" activeClassName="active" partiallyActive={true}>
200			KCVV Ultras
201			</Link>
202			</li>
203			<li>
204			<Link to="/club/contact/" activeClassName="active" partiallyActive={true}>
205			Contact
206			</Link>
207			</li>
208			<li>
209			<Link to="/club/downloads/" activeClassName="active" partiallyActive={true}>
210			Downloads
211			</Link>
212			</li>
213			<li>
214			<Link to="/club/register/" activeClassName="active" partiallyActive={true}>
215			Praktische Info
216			</Link>
217			</li>
218			</ul>
219			</li>
220			<li>
221			<Link to="/search/" activeClassName="active" partiallyActive={true} className="menu_link__search">
222			<Icon icon="fa fa-search" />
223			{` `}
224			<span className={`display-mobile--inline-block display-mobile search--label`}>Zoeken</span>
225			</Link>
226			</li>
227			</Fragment>
228			)
229			}
230
231			export const PageHeader = () => (
232			// <!-- START STICKY CONTAINER --> //
233			// <header data-sticky-container className="l--header">
234			<header className="l--header">
235			{/* <!-- START STICKY INNER --> */}
236			{/* <div data-sticky data-options="marginTop:0;"> */}
237			<div className="navigation">
238			{/* <!-- START MOBILE NAV BAR --> */}
239			<div className="header--mobile">
240			<button
241			type="button"
242			className="menu-icon"
243			data-toggle="responsiveNavigation"
244			aria-label="Toggle Responsive navigation"
245			/>
246			<div className="header-mobile__logo">
247			<Link to="/">
248			<StaticImage
249			src="../images/logo-flat.png"
250			alt="KCVV ELEWIJT"
251			width={100}
252			placeholder="none"
253			className="header-mobile__logo-img"
254			/>
255			</Link>
256			</div>
257			</div>
258			{/* <!-- END MOBILE NAV BAR --> */}
259
260			{/* <!-- START DESKTOP NAV BAR --> */}
261			<div className="header--desktop">
262			{/* LOGO */}
263			<div className="header-logo">
264			<Link to="/">
265			<StaticImage
266			src="../images/logo-flat.png"
267			alt="KCVV ELEWIJT"
268			placeholder="none"
269			height={112}
270			className="header__logo-img"
271			/>
272			</Link>
273			</div>
274			<nav className="main-nav">
275			<ul className="main-nav__list--desktop menu dropdown" data-dropdown-menu>
276			<MenuItems />
277			</ul>
278			</nav>
279			</div>
280			</div>
281			{/* <!-- END DESKTOP NAV BAR --> */}
282
283			{/* <!-- END STICKY INNER --> */}
284			</header>
285			// <!-- END STICKY CONTAINER --> //
286			)
287
288			export const PageHeaderMobile = () => (
289			<nav className="off-canvas position-left" id="responsiveNavigation" data-off-canvas>
290			<ul className="main-nav__list vertical menu" data-responsive-menu="accordion large-dropdown">
291			<div className="header-mobile__logo">
292			<button aria-label="Close menu" type="button" data-toggle="" className="button--back">
293			{/* <span aria-hidden="true" /> */}
294			</button>
295
296			<Link to="/">
297			<StaticImage
298			src="../images/logo-flat.png"
299			alt="KCVV ELEWIJT"
300			width={100}
301			placeholder="none"
302			className="header-mobile__logo-img"
303			/>
304			</Link>
305			</div>
306
307			<MenuItems />
308
309			<li className="main-nav__item--social-links">
310			<a
311			href="https://www.facebook.com/KCVVElewijt"
312			className="social-links__link"
313			data-toggle="tooltip"
314			data-placement="bottom"
315			title=""
316			data-original-title="Facebook"
317			>
318			<Icon icon="fa-facebook" />
319			</a>
320
321			<a
322			href="https://twitter.com/kcvve"
323			className="social-links__link"
324			data-toggle="tooltip"
325			data-placement="bottom"
326			title=""
327			data-original-title="Twitter"
328			>
329			<Icon icon="fa-twitter" />
330			</a>
331
332			<a
333			href="https://www.instagram.com/kcvve/"
334			className="social-links__link"
335			data-toggle="tooltip"
336			data-placement="bottom"
337			title=""
338			data-original-title="Instagram"
339			>
340			<Icon icon="fa-instagram" />
341			</a>
342			</li>
343			</ul>
344			</nav>
345			)
346

soniCaH / KCVV-Elewijt-Gatsby

Push — master ( 7aa1e4...a37cc0 )

src/components/PageHeader.tsx A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like