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-03 14:04 UTC

src/components/PageHeader.tsx A

↳ Parent: Project

Complexity

Total Complexity	1
Complexity/F	0

Size

Lines of Code	331
Function Count	0

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

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

import { Link } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"
import React, { Fragment, useEffect } from "react"

import "./PageHeader.scss"

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/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
            </Link>
          </li>
          <li>
            <Link to="/jeugd/u10/" activeClassName="active" partiallyActive={true}>
              U10
            </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/responsibilities/" activeClassName="active" partiallyActive={true}>
              Verantwoordelijkheden
            </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>
        </ul>
      </li>
      <li>
        <Link to="/search/" activeClassName="active" partiallyActive={true}>
          <i className={`fa fa-search`} aria-hidden="true"></i>
          {` `}
          <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={350}
              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={350}
            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"
        >
          <i className="fa fa fa-facebook" />
        </a>

        <a
          href="https://twitter.com/kcvve"
          className="social-links__link"
          data-toggle="tooltip"
          data-placement="bottom"
          title=""
          data-original-title="Twitter"
        >
          <i className="fa fa 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"
        >
          <i className="fa fa fa-instagram" />
        </a>
      </li>
    </ul>
  </nav>
)


1			import { Link } from "gatsby"
2			import { StaticImage } from "gatsby-plugin-image"
3			import React, { Fragment, useEffect } from "react"
4
5			import "./PageHeader.scss"
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/u13/" activeClassName="active" partiallyActive={true}>
123			U13
124			</Link>
125			</li>
126			<li>
127			<Link to="/jeugd/u12/" activeClassName="active" partiallyActive={true}>
128			U12
129			</Link>
130			</li>
131			<li>
132			<Link to="/jeugd/u11/" activeClassName="active" partiallyActive={true}>
133			U11
134			</Link>
135			</li>
136			<li>
137			<Link to="/jeugd/u10/" activeClassName="active" partiallyActive={true}>
138			U10
139			</Link>
140			</li>
141			<li>
142			<Link to="/jeugd/u9/" activeClassName="active" partiallyActive={true}>
143			U9
144			</Link>
145			</li>
146			<li>
147			<Link to="/jeugd/u8/" activeClassName="active" partiallyActive={true}>
148			U8
149			</Link>
150			</li>
151			<li>
152			<Link to="/jeugd/u7/" activeClassName="active" partiallyActive={true}>
153			U7
154			</Link>
155			</li>
156			<li>
157			<Link to="/jeugd/u6/" activeClassName="active" partiallyActive={true}>
158			U6
159			</Link>
160			</li>
161			</ul>
162			</li>
163			<li>
164			<Link to="/sponsors/" activeClassName="active" partiallyActive={true}>
165			Sponsors
166			</Link>
167			</li>
168			<li>
169			<Link to="/club/" activeClassName="active" partiallyActive={true}>
170			De club
171			</Link>
172			<ul className="vertical menu submenu">
173			<li>
174			<Link to="/club/history/" activeClassName="active" partiallyActive={true}>
175			Geschiedenis
176			</Link>
177			</li>
178			<li>
179			<Link to="/club/bestuur/" activeClassName="active" partiallyActive={true}>
180			Bestuur
181			</Link>
182			</li>
183			<li>
184			<Link to="/club/jeugdbestuur/" activeClassName="active" partiallyActive={true}>
185			Jeugdbestuur
186			</Link>
187			</li>
188			<li>
189			<Link to="/club/responsibilities/" activeClassName="active" partiallyActive={true}>
190			Verantwoordelijkheden
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			</ul>
204			</li>
205			<li>
206			<Link to="/search/" activeClassName="active" partiallyActive={true}>
207			<i className={`fa fa-search`} aria-hidden="true"></i>
208			{` `}
209			<span className={`display-mobile--inline-block display-mobile search--label`}>Zoeken</span>
210			</Link>
211			</li>
212			</Fragment>
213			)
214			}
215
216			export const PageHeader = () => (
217			// <!-- START STICKY CONTAINER --> //
218			// <header data-sticky-container className="l--header">
219			<header className="l--header">
220			{/* <!-- START STICKY INNER --> */}
221			{/* <div data-sticky data-options="marginTop:0;"> */}
222			<div className="navigation">
223			{/* <!-- START MOBILE NAV BAR --> */}
224			<div className="header--mobile">
225			<button
226			type="button"
227			className="menu-icon"
228			data-toggle="responsiveNavigation"
229			aria-label="Toggle Responsive navigation"
230			/>
231			<div className="header-mobile__logo">
232			<Link to="/">
233			<StaticImage
234			src="../images/logo-flat.png"
235			alt="KCVV ELEWIJT"
236			width={350}
237			placeholder="none"
238			className="header-mobile__logo-img"
239			/>
240			</Link>
241			</div>
242			</div>
243			{/* <!-- END MOBILE NAV BAR --> */}
244
245			{/* <!-- START DESKTOP NAV BAR --> */}
246			<div className="header--desktop">
247			{/* LOGO */}
248			<div className="header-logo">
249			<Link to="/">
250			<StaticImage
251			src="../images/logo-flat.png"
252			alt="KCVV ELEWIJT"
253			placeholder="none"
254			height={112}
255			className="header__logo-img"
256			/>
257			</Link>
258			</div>
259			<nav className="main-nav">
260			<ul className="main-nav__list--desktop menu dropdown" data-dropdown-menu>
261			<MenuItems />
262			</ul>
263			</nav>
264			</div>
265			</div>
266			{/* <!-- END DESKTOP NAV BAR --> */}
267
268			{/* <!-- END STICKY INNER --> */}
269			</header>
270			// <!-- END STICKY CONTAINER --> //
271			)
272
273			export const PageHeaderMobile = () => (
274			<nav className="off-canvas position-left" id="responsiveNavigation" data-off-canvas>
275			<ul className="main-nav__list vertical menu" data-responsive-menu="accordion large-dropdown">
276			<div className="header-mobile__logo">
277			<button aria-label="Close menu" type="button" data-toggle="" className="button--back">
278			{/* <span aria-hidden="true" /> */}
279			</button>
280
281			<Link to="/">
282			<StaticImage
283			src="../images/logo-flat.png"
284			alt="KCVV ELEWIJT"
285			width={350}
286			placeholder="none"
287			className="header-mobile__logo-img"
288			/>
289			</Link>
290			</div>
291
292			<MenuItems />
293
294			<li className="main-nav__item--social-links">
295			<a
296			href="https://www.facebook.com/KCVVElewijt"
297			className="social-links__link"
298			data-toggle="tooltip"
299			data-placement="bottom"
300			title=""
301			data-original-title="Facebook"
302			>
303			<i className="fa fa fa-facebook" />
304			</a>
305
306			<a
307			href="https://twitter.com/kcvve"
308			className="social-links__link"
309			data-toggle="tooltip"
310			data-placement="bottom"
311			title=""
312			data-original-title="Twitter"
313			>
314			<i className="fa fa fa-twitter" />
315			</a>
316
317			<a
318			href="https://www.instagram.com/kcvve/"
319			className="social-links__link"
320			data-toggle="tooltip"
321			data-placement="bottom"
322			title=""
323			data-original-title="Instagram"
324			>
325			<i className="fa fa fa-instagram" />
326			</a>
327			</li>
328			</ul>
329			</nav>
330			)
331

soniCaH / KCVV-Elewijt-Gatsby

Pull Request — develop (#758)

src/components/PageHeader.tsx A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like