20489659425

Committed 24 Dec 2025 03:59PM UTC coverage: 0.168%. Remained the same

Build # 20489659425

Build Type

Pull #455

github

Committed by

web-flow

Commit Message

Merge 616e6a13c into 009547a86

Pull Request Pull Request #455: C3DC-2045 updated naming convention

Run Details

6 of 3645 branches covered (0.16%)

Branch coverage included in aggregate %.

10 of 5859 relevant lines covered (0.17%)

0.09 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/components/ResponsiveHeader/components/NavbarDesktop.js

import React, { useEffect, useState, useRef } from 'react';
import { useLocation, NavLink } from 'react-router-dom';
import styled from 'styled-components';
import { navMobileList, navbarSublists } from '../../../bento/globalHeaderData';

const Nav = styled.div`
    top: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: -0.1px 6px 9px -6px rgba(0, 0, 0, 0.5);
    z-index: 1100;
    position: relative;

    .dropdownContainer {
      // outline: none;
      // visibility: hidden;
      // opacity: 0;
      margin: 0 auto;
      position: relative;
      width: 1420px;
    }
 `;

const NavContainer = styled.div`
    margin: 0 auto;
    width: 1420px;
    text-align: left;
    position: relative;
`;

const UlContainer = styled.ul`
  list-style: none;
  margin: 0;
  padding-top: 17px;
  padding-left: 11px;
`;

const LiSection = styled.li`
  display: inline-block;
  position: relative;
  line-height: 50px;
  letter-spacing: 1px;
  text-align: center;
  transition:all 0.3s ease-in-out;

  a {
    color: #585C65;
    text-decoration: none;
  }

  .navTitle {
    display: block;
    color: #585C65;
    font-family: poppins;
    font-size: 16.64px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: normal;
    text-decoration: none;
    margin: 0 13px 0 5px;
    padding: 0 15px;
    user-select:none;
  }

  .navTitle:hover {
    cursor: pointer;
  }

  .navText {
    border-bottom: 4px solid transparent;
  }

  .navText:hover {
    cursor: pointer;
    color: #3A75BD;
    border-bottom: 4px solid #3A75BD;

    ::after {
      content: "";
      display: inline-block;
      width: 6px;
      height: 6px;
      border-bottom: 1px solid #3A75BD;
      border-left: 1px solid #3A75BD;
      margin: 0 0 4px 8px;
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
    }
  }

  .navText::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-bottom: 1px solid #585C65;
    border-left: 1px solid #585C65;
    margin: 0 0 4px 8px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }

  .clicked {
    color: #FFFFFF;
    background: #1F4671;
  }

  .clicked::after {
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    border-bottom: 0;
    border-left: 0;
    margin: 0 0 0 8px;
  }

  .clicked:hover {
    border-bottom: 4px solid #1F4671;
    color: #FFFFFF;

    ::after {
      content: "";
      display: inline-block;
      width: 6px;
      height: 6px;
      border-top: 1px solid #FFFFFF;
      border-right: 1px solid #FFFFFF;
      border-bottom: 0;
      border-left: 0;
      margin: 0 0 0 8px;
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
    }
  }

  .directLink::after {
    display: none;
  }

  .directLink:hover {
    ::after {
      display: none;
    }
  }

  .navTitleClicked {
    display: block;
    color: #FFFFFF;
    font-family: poppins;
    font-size: 17px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: normal;
    text-decoration: none;
    margin: 0 13px 0 5px;
    padding: 0 15px;
    user-select:none;
    background: #1F4671;
  }
`;

const Dropdown = styled.div`
    top: 60.5px;
    left: 0;
    width: 100%;
    background: #1F4671;
    z-index: 1100;
    position: absolute;
    // visibility: hidden;
    // outline: none;
    // opacity: 0;
`;

const DropdownContainer = styled.div`
    margin: 0 auto;
    text-align: left;
    position: relative;
    max-width: 1420px;

    .dropdownList {
      background: #1F4671;
      display: grid;
      grid-column-gap: 2%;
      grid-template-columns: 24.25% 24.25% 24.25% 24.25%;
      padding: 32px 140px 0 20px;
    }

    .dropdownItem {
      // border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 0 10px 32px 10px;
      font-size: 30px;
      font-family: poppins;
      font-weight: 600;
      font-size: 20px;
      line-height: 110%;
      color: #FFFFFF;
      text-decoration: none;
  }

  .dropdownItem:hover {
    text-decoration: underline;
  }
`;


const activeStyle = {
  color: '#3A75BD',
  borderBottom: '4px solid #3A75BD',
};

const dropdownInvisibleStyle = {
  visibility: 'hidden',
};

const useOutsideAlerter = (ref) => {
  useEffect(() => {
      function handleClickOutside(event) {
          if (!event.target || (event.target.getAttribute("class") !== "dropdownList" && ref.current && !ref.current.contains(event.target))) {
            const toggle = document.getElementsByClassName("navText clicked");
            if (toggle[0] && event.target.getAttribute("class") !== "navText clicked" && event.target.getAttribute("class") !== "navText clicked") {
              toggle[0].click();
            }
          }
      }

      document.addEventListener("mousedown", handleClickOutside);
      return () => {
          document.removeEventListener("mousedown", handleClickOutside);
      };
  }, [ref]);
};


const NavBar = () => {
  const path = useLocation().pathname;
  const [clickedTitle, setClickedTitle] = useState("");
  const dropdownSelection = useRef(null);
  const clickableObject = navMobileList.filter(item => item.className === 'navMobileItem clickable');
  const clickableTitle = clickableObject.map(item => item.name);
  useOutsideAlerter(dropdownSelection);

  const handleMenuClick = (e) => {
    if (e.target.innerText === clickedTitle || !clickableTitle.includes(e.target.innerText)) {
      setClickedTitle("");
    } else {
      setClickedTitle(e.target.innerText);
    }
  };

  const onKeyPressHandler = (e) => {
    if (e.key === "Enter") {
      handleMenuClick(e);
    }
  };

  useEffect(() => {
    setClickedTitle("");
  }, []);

  return (
    <>
    <Nav>
      <NavContainer>
        <UlContainer>
          {
            navMobileList.map((navMobileItem, idx) => {
              const navkey = `nav_${idx}`;
              return (
                <>
                {
                  navMobileItem.className === 'navMobileItem'
                  &&
                  <LiSection key={navkey}>
                    <div className='navTitle directLink'>
                      <NavLink to={navMobileItem.link}>
                        <div
                          className='navText directLink'
                          onKeyDown={onKeyPressHandler}
                          role="button"
                          onClick={handleMenuClick}
                          style={path === navMobileItem.link || (path === '/' && navMobileItem.link === '/home') ? activeStyle : null}
                        >
                          {navMobileItem.name}
                          </div>
                        </NavLink>
                      </div>
                    </LiSection>
                }
                {
                  navMobileItem.className === 'navMobileItem clickable'
                  &&
                  <LiSection key={navkey}>
                    <div className={clickedTitle === navMobileItem.name ? 'navTitleClicked' : 'navTitle'}>
                      <div
                        className={clickedTitle === navMobileItem.name ? 'navText clicked' : 'navText'}
                        onClick={handleMenuClick}
                        onKeyDown={onKeyPressHandler}
                        role="button"
                        tabIndex={0}
                      >
                        {navMobileItem.name}
                      </div>
                    </div>
                  </LiSection>
                }
                </>
              )
            })
          }
        </UlContainer>
      </NavContainer>
      <Dropdown ref={dropdownSelection} style={clickedTitle === '' ? dropdownInvisibleStyle : null}>
        <DropdownContainer>
          <div className="dropdownList">
            {clickedTitle !== "" ? navbarSublists[clickedTitle].map((dropItem, idx) => {
              const dropkey = `drop_${idx}`;
              return (
                dropItem.link && (
                  <a
                    href={dropItem.link}
                    className="dropdownItem"
                    key={dropkey}
                    onClick={() => setClickedTitle("")}
                    target={dropItem.externalLink ? "_blank" : "_self"} // Set target attribute based on externalLink
                    rel='noopener noreferrer'
                  >
                    {dropItem.name}
                  </a>
                )
              );
            }) : null}
          </div>
        </DropdownContainer>
      </Dropdown>
    </Nav>
    </>
  );
};

export default NavBar;

1	import React, { useEffect, useState, useRef } from 'react';	×
2	import { useLocation, NavLink } from 'react-router-dom';	×
3	import styled from 'styled-components';	×
4	import { navMobileList, navbarSublists } from '../../../bento/globalHeaderData';	×
5
6	const Nav = styled.div`	×
7	top: 0;
8	left: 0;
9	width: 100%;
10	background: #ffffff;
11	box-shadow: -0.1px 6px 9px -6px rgba(0, 0, 0, 0.5);
12	z-index: 1100;
13	position: relative;
14
15	.dropdownContainer {
16	// outline: none;
17	// visibility: hidden;
18	// opacity: 0;
19	margin: 0 auto;
20	position: relative;
21	width: 1420px;
22	}
23	`;
24
25	const NavContainer = styled.div`	×
26	margin: 0 auto;
27	width: 1420px;
28	text-align: left;
29	position: relative;
30	`;
31
32	const UlContainer = styled.ul`	×
33	list-style: none;
34	margin: 0;
35	padding-top: 17px;
36	padding-left: 11px;
37	`;
38
39	const LiSection = styled.li`	×
40	display: inline-block;
41	position: relative;
42	line-height: 50px;
43	letter-spacing: 1px;
44	text-align: center;
45	transition:all 0.3s ease-in-out;
46
47	a {
48	color: #585C65;
49	text-decoration: none;
50	}
51
52	.navTitle {
53	display: block;
54	color: #585C65;
55	font-family: poppins;
56	font-size: 16.64px;
57	font-weight: 600;
58	line-height: 40px;
59	letter-spacing: normal;
60	text-decoration: none;
61	margin: 0 13px 0 5px;
62	padding: 0 15px;
63	user-select:none;
64	}
65
66	.navTitle:hover {
67	cursor: pointer;
68	}
69
70	.navText {
71	border-bottom: 4px solid transparent;
72	}
73
74	.navText:hover {
75	cursor: pointer;
76	color: #3A75BD;
77	border-bottom: 4px solid #3A75BD;
78
79	::after {
80	content: "";
81	display: inline-block;
82	width: 6px;
83	height: 6px;
84	border-bottom: 1px solid #3A75BD;
85	border-left: 1px solid #3A75BD;
86	margin: 0 0 4px 8px;
87	transform: rotate(-45deg);
88	-webkit-transform: rotate(-45deg);
89	}
90	}
91
92	.navText::after {
93	content: "";
94	display: inline-block;
95	width: 6px;
96	height: 6px;
97	border-bottom: 1px solid #585C65;
98	border-left: 1px solid #585C65;
99	margin: 0 0 4px 8px;
100	transform: rotate(-45deg);
101	-webkit-transform: rotate(-45deg);
102	}
103
104	.clicked {
105	color: #FFFFFF;
106	background: #1F4671;
107	}
108
109	.clicked::after {
110	border-top: 1px solid #FFFFFF;
111	border-right: 1px solid #FFFFFF;
112	border-bottom: 0;
113	border-left: 0;
114	margin: 0 0 0 8px;
115	}
116
117	.clicked:hover {
118	border-bottom: 4px solid #1F4671;
119	color: #FFFFFF;
120
121	::after {
122	content: "";
123	display: inline-block;
124	width: 6px;
125	height: 6px;
126	border-top: 1px solid #FFFFFF;
127	border-right: 1px solid #FFFFFF;
128	border-bottom: 0;
129	border-left: 0;
130	margin: 0 0 0 8px;
131	transform: rotate(-45deg);
132	-webkit-transform: rotate(-45deg);
133	}
134	}
135
136	.directLink::after {
137	display: none;
138	}
139
140	.directLink:hover {
141	::after {
142	display: none;
143	}
144	}
145
146	.navTitleClicked {
147	display: block;
148	color: #FFFFFF;
149	font-family: poppins;
150	font-size: 17px;
151	font-weight: 700;
152	line-height: 40px;
153	letter-spacing: normal;
154	text-decoration: none;
155	margin: 0 13px 0 5px;
156	padding: 0 15px;
157	user-select:none;
158	background: #1F4671;
159	}
160	`;
161
162	const Dropdown = styled.div`	×
163	top: 60.5px;
164	left: 0;
165	width: 100%;
166	background: #1F4671;
167	z-index: 1100;
168	position: absolute;
169	// visibility: hidden;
170	// outline: none;
171	// opacity: 0;
172	`;
173
174	const DropdownContainer = styled.div`	×
175	margin: 0 auto;
176	text-align: left;
177	position: relative;
178	max-width: 1420px;
179
180	.dropdownList {
181	background: #1F4671;
182	display: grid;
183	grid-column-gap: 2%;
184	grid-template-columns: 24.25% 24.25% 24.25% 24.25%;
185	padding: 32px 140px 0 20px;
186	}
187
188	.dropdownItem {
189	// border: 1px solid rgba(0, 0, 0, 0.8);
190	padding: 0 10px 32px 10px;
191	font-size: 30px;
192	font-family: poppins;
193	font-weight: 600;
194	font-size: 20px;
195	line-height: 110%;
196	color: #FFFFFF;
197	text-decoration: none;
198	}
199
200	.dropdownItem:hover {
201	text-decoration: underline;
202	}
203	`;
204
205
206	const activeStyle = {	×
207	color: '#3A75BD',
208	borderBottom: '4px solid #3A75BD',
209	};
210
211	const dropdownInvisibleStyle = {	×
212	visibility: 'hidden',
213	};
214
215	const useOutsideAlerter = (ref) => {	×
216	useEffect(() => {	×
217	function handleClickOutside(event) {
218	if (!event.target \|\| (event.target.getAttribute("class") !== "dropdownList" && ref.current && !ref.current.contains(event.target))) {	×
219	const toggle = document.getElementsByClassName("navText clicked");	×
220	if (toggle[0] && event.target.getAttribute("class") !== "navText clicked" && event.target.getAttribute("class") !== "navText clicked") {	×
221	toggle[0].click();	×
222	}
223	}
224	}
225
226	document.addEventListener("mousedown", handleClickOutside);	×
227	return () => {	×
228	document.removeEventListener("mousedown", handleClickOutside);	×
229	};
230	}, [ref]);
231	};
232
233
234	const NavBar = () => {	×
235	const path = useLocation().pathname;	×
236	const [clickedTitle, setClickedTitle] = useState("");	×
237	const dropdownSelection = useRef(null);	×
238	const clickableObject = navMobileList.filter(item => item.className === 'navMobileItem clickable');	×
239	const clickableTitle = clickableObject.map(item => item.name);	×
240	useOutsideAlerter(dropdownSelection);	×
241
242	const handleMenuClick = (e) => {	×
243	if (e.target.innerText === clickedTitle \|\| !clickableTitle.includes(e.target.innerText)) {	×
244	setClickedTitle("");	×
245	} else {
246	setClickedTitle(e.target.innerText);	×
247	}
248	};
249
250	const onKeyPressHandler = (e) => {	×
251	if (e.key === "Enter") {	×
252	handleMenuClick(e);	×
253	}
254	};
255
256	useEffect(() => {	×
257	setClickedTitle("");	×
258	}, []);
259
260	return (	×
261	<>
262	<Nav>
263	<NavContainer>
264	<UlContainer>
265	{
266	navMobileList.map((navMobileItem, idx) => {
267	const navkey = `nav_${idx}`;	×
268	return (	×
269	<>
270	{
271	navMobileItem.className === 'navMobileItem'	×
272	&&
273	<LiSection key={navkey}>
274	<div className='navTitle directLink'>
275	<NavLink to={navMobileItem.link}>
276	<div
277	className='navText directLink'
278	onKeyDown={onKeyPressHandler}
279	role="button"
280	onClick={handleMenuClick}
281	style={path === navMobileItem.link \|\| (path === '/' && navMobileItem.link === '/home') ? activeStyle : null}	×
282	>
283	{navMobileItem.name}
284	</div>
285	</NavLink>
286	</div>
287	</LiSection>
288	}
289	{
290	navMobileItem.className === 'navMobileItem clickable'	×
291	&&
292	<LiSection key={navkey}>
293	<div className={clickedTitle === navMobileItem.name ? 'navTitleClicked' : 'navTitle'}>	×
294	<div
295	className={clickedTitle === navMobileItem.name ? 'navText clicked' : 'navText'}	×
296	onClick={handleMenuClick}
297	onKeyDown={onKeyPressHandler}
298	role="button"
299	tabIndex={0}
300	>
301	{navMobileItem.name}
302	</div>
303	</div>
304	</LiSection>
305	}
306	</>
307	)
308	})
309	}
310	</UlContainer>
311	</NavContainer>
312	<Dropdown ref={dropdownSelection} style={clickedTitle === '' ? dropdownInvisibleStyle : null}>	×
313	<DropdownContainer>
314	<div className="dropdownList">
315	{clickedTitle !== "" ? navbarSublists[clickedTitle].map((dropItem, idx) => {	×
316	const dropkey = `drop_${idx}`;	×
317	return (	×
318	dropItem.link && (	×
319	<a
320	href={dropItem.link}
321	className="dropdownItem"
322	key={dropkey}
323	onClick={() => setClickedTitle("")}	×
324	target={dropItem.externalLink ? "_blank" : "_self"} // Set target attribute based on externalLink	×
325	rel='noopener noreferrer'
326	>
327	{dropItem.name}
328	</a>
329	)
330	);
331	}) : null}
332	</div>
333	</DropdownContainer>
334	</Dropdown>
335	</Nav>
336	</>
337	);
338	};	×
339
340	export default NavBar;

CBIIT / bento-c3dc-frontend / 20489659425

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous