src/components/PageHeader.tsx - Code Metrics - Inspection of "[WIP] Full redesign from zero." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Pull Request — develop (#758)

by Kevin Van

created 2022-08-23 20:34 UTC

src/components/PageHeader.tsx A

↳ Parent: Project

Complexity

Total Complexity	1
Complexity/F	0

Size

Lines of Code	336
Function Count	0

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

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

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/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>
        </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/ultras/" activeClassName="active" partiallyActive={true}>
195			KCVV Ultras
196			</Link>
197			</li>
198			<li>
199			<Link to="/club/contact/" activeClassName="active" partiallyActive={true}>
200			Contact
201			</Link>
202			</li>
203			<li>
204			<Link to="/club/downloads/" activeClassName="active" partiallyActive={true}>
205			Downloads
206			</Link>
207			</li>
208			</ul>
209			</li>
210			<li>
211			<Link to="/search/" activeClassName="active" partiallyActive={true} className="menu_link__search">
212			<Icon icon="fa fa-search" />
213			{` `}
214			<span className={`display-mobile--inline-block display-mobile search--label`}>Zoeken</span>
215			</Link>
216			</li>
217			</Fragment>
218			)
219			}
220
221			export const PageHeader = () => (
222			// <!-- START STICKY CONTAINER --> //
223			// <header data-sticky-container className="l--header">
224			<header className="l--header">
225			{/* <!-- START STICKY INNER --> */}
226			{/* <div data-sticky data-options="marginTop:0;"> */}
227			<div className="navigation">
228			{/* <!-- START MOBILE NAV BAR --> */}
229			<div className="header--mobile">
230			<button
231			type="button"
232			className="menu-icon"
233			data-toggle="responsiveNavigation"
234			aria-label="Toggle Responsive navigation"
235			/>
236			<div className="header-mobile__logo">
237			<Link to="/">
238			<StaticImage
239			src="../images/logo-flat.png"
240			alt="KCVV ELEWIJT"
241			width={100}
242			placeholder="none"
243			className="header-mobile__logo-img"
244			/>
245			</Link>
246			</div>
247			</div>
248			{/* <!-- END MOBILE NAV BAR --> */}
249
250			{/* <!-- START DESKTOP NAV BAR --> */}
251			<div className="header--desktop">
252			{/* LOGO */}
253			<div className="header-logo">
254			<Link to="/">
255			<StaticImage
256			src="../images/logo-flat.png"
257			alt="KCVV ELEWIJT"
258			placeholder="none"
259			height={112}
260			className="header__logo-img"
261			/>
262			</Link>
263			</div>
264			<nav className="main-nav">
265			<ul className="main-nav__list--desktop menu dropdown" data-dropdown-menu>
266			<MenuItems />
267			</ul>
268			</nav>
269			</div>
270			</div>
271			{/* <!-- END DESKTOP NAV BAR --> */}
272
273			{/* <!-- END STICKY INNER --> */}
274			</header>
275			// <!-- END STICKY CONTAINER --> //
276			)
277
278			export const PageHeaderMobile = () => (
279			<nav className="off-canvas position-left" id="responsiveNavigation" data-off-canvas>
280			<ul className="main-nav__list vertical menu" data-responsive-menu="accordion large-dropdown">
281			<div className="header-mobile__logo">
282			<button aria-label="Close menu" type="button" data-toggle="" className="button--back">
283			{/* <span aria-hidden="true" /> */}
284			</button>
285
286			<Link to="/">
287			<StaticImage
288			src="../images/logo-flat.png"
289			alt="KCVV ELEWIJT"
290			width={100}
291			placeholder="none"
292			className="header-mobile__logo-img"
293			/>
294			</Link>
295			</div>
296
297			<MenuItems />
298
299			<li className="main-nav__item--social-links">
300			<a
301			href="https://www.facebook.com/KCVVElewijt"
302			className="social-links__link"
303			data-toggle="tooltip"
304			data-placement="bottom"
305			title=""
306			data-original-title="Facebook"
307			>
308			<Icon icon="fa-facebook" />
309			</a>
310
311			<a
312			href="https://twitter.com/kcvve"
313			className="social-links__link"
314			data-toggle="tooltip"
315			data-placement="bottom"
316			title=""
317			data-original-title="Twitter"
318			>
319			<Icon icon="fa-twitter" />
320			</a>
321
322			<a
323			href="https://www.instagram.com/kcvve/"
324			className="social-links__link"
325			data-toggle="tooltip"
326			data-placement="bottom"
327			title=""
328			data-original-title="Instagram"
329			>
330			<Icon icon="fa-instagram" />
331			</a>
332			</li>
333			</ul>
334			</nav>
335			)
336

soniCaH / KCVV-Elewijt-Gatsby

Pull Request — develop (#758)

src/components/PageHeader.tsx A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like