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-16 20:19 UTC

src/components/PageHeader.tsx A

↳ Parent: Project

Complexity

Total Complexity	1
Complexity/F	0

Size

Lines of Code	327
Function Count	0

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
wmc	1
eloc	310
mnd	1
bc	1
fnc	0
dl	0
loc	327
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 Icon from "./Icon"

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

soniCaH / KCVV-Elewijt-Gatsby

Pull Request — develop (#758)

src/components/PageHeader.tsx A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like