21596747702

Committed 02 Feb 2026 03:43PM UTC coverage: 0.154%. Remained the same

Build # 21596747702

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #484 from CBIIT/C3DC-1996

C3DC-1996 updated header to have its responsive behavior

Run Details

6 of 4082 branches covered (0.15%)

Branch coverage included in aggregate %.

0 of 26 new or added lines in 3 files covered. (0.0%)

4 existing lines in 2 files now uncovered.

10 of 6313 relevant lines covered (0.16%)

0.08 hits per line

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

0.0

/src/components/ResponsiveHeader/HeaderTablet.js

import React, {useState, useEffect} from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import styled from 'styled-components';
import Logo from '../ResponsiveHeader/components/LogoTablet';
import SearchBar from '../ResponsiveHeader/components/SearchBarTablet';
import menuClearIcon from '../../assets/header/Menu_Cancel_Icon.svg';
import rightArrowIcon from '../../assets/header/Right_Arrow.svg';
import leftArrowIcon from '../../assets/header/Left_Arrow.svg';
import { navMobileList, navbarSublists, navBarCartData } from '../../bento/globalHeaderData'
import { USGovBannerData } from '../../bento/globalHeaderData';

const HeaderBanner = styled.div`
  width: 100%;
`;

const HeaderContainer = styled.div`
    margin: 0 auto;
    padding-left: 16px;
    box-shadow: -0.1px 6px 9px -6px rgba(0, 0, 0, 0.5);

    .searchBarArea {
        padding: 0 16px 0 0;
        margin-left: auto;
    }

    .headerLowerContainer {
        display: flex;
        margin: 16px 0 0 0;
        height: 58px;
    }

    .menuButton {
        width: 89px;
        height: 45px;
        background: #1F4671;
        border-radius: 5px;
        font-family: 'Open Sans';
        font-weight: 700;
        font-size: 20px;
        line-height: 45px;
        color: #FFFFFF;
        text-align: center;
    }

    .menuButton:hover {
        cursor: pointer;
    }

    // .menuButton:active {
    //     outline: 0.25rem solid #2491ff;
    //     outline-offset: 0.25rem
    // }
`;

const NavMobileContainer = styled.div`
    // display: none;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1200;
`;

const MenuArea = styled.div`
    height: 100%;
    width: 100%;
    display: flex;

    .menuContainer {
        background: #ffffff;
        width: 385px;
        height: 100%;
        padding: 21px 16px;
    }

    .greyContainer {
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.2);
    }

    .closeIcon {
        height: 14px;
        margin-bottom: 29px;
    }

    .closeIconImg {
        float: right;
    }

    .closeIconImg:hover {
        cursor: pointer;
    }

    // .closeIconImg:active {
    //     outline: 0.25rem solid #2491ff;
    //     outline-offset: 0.5rem
    // }

    .backButton {
        font-family: Open Sans;
        font-weight: 600;
        font-size: 16px;
        line-height: 16px;
        color: #007BBD;
        padding-left: 16px;
        background: url(${leftArrowIcon}) left no-repeat;
    }

    .backButton:hover {
        cursor: pointer;
    }

    // .backButton:active {
    //     outline: 0.25rem solid #2491ff;
    //     outline-offset: 0.5rem;
    // }

    .navMobileContainer {
        padding: 24px 0 0 0;

        a {
            text-decoration: none;
            color: #3D4551;
        }
    }

    .navMobileItem {
        width: 353px;
        padding: 8px 24px 8px 16px;
        font-family: Open Sans;
        font-weight: 400;
        font-size: 16px;
        line-height: 16px;
        border-top: 1px solid #F0F0F0;
        border-bottom: 1px solid #F0F0F0;
        color: #3D4551;
    }

    .navMobileItem:hover {
        background-color: #f9f9f7;
    }

    // .navMobileItem:active {
    //     outline: 0.25rem solid #2491ff;
    // }

    .SubItem {
        padding-left: 24px;
    }

    .clickable {
        background: url(${rightArrowIcon}) 90% no-repeat;
    }

    .clickable {
        cursor: pointer;
    }
`;
const USGovBanner = styled.div`
  background-color: #f0f0f0;
  height: 46px;
  width: 100%;
  align-items: center;
    .USGovBannerInner {
      padding: 8px 32px;
      display: flex;
      align-items: center;
      height: 100%;
      margin: 0 auto;
      max-width: 1420px;
    }

  img {
      height: 11px;
      width: 16px;
    }

    .bannerLeft {
        width: 50%;
        text-align: left;
        display: flex;
        align-items: center;
    }
    .bannerText {
        font-family: 'Open Sans';
        font-size: 12px;
        font-weight: 400;
        color: #000000;
        margin-left: 15px;
    }
    .bannerRight {
        width: 50%;
        text-align: right;
    .bannerButton {
        display: inline-block;
        background-color: #3b7f84;
        width: 72px;
        height: 30px;
        border-radius: 5px;
        font-family: 'Open Sans', sans-serif;
        font-size: 15px;
        font-weight: 700;
        color: white;
        letter-spacing: 0em;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
    }
  }

`;

const Header = () => {
  const path = useLocation().pathname;
  const [clickTitle, setClickTitle] = useState('');
  const [navMobileDisplay, setNavMobileDisplay] = useState('none');
  const [navbarMobileList, setNavbarMobileList] = useState(navMobileList);

  const clickNavItem = (e) => {
    const ctitle = e.target.innerText;
    setClickTitle(ctitle);
  }

  useEffect(() => {
    if (clickTitle && navbarSublists[clickTitle]) {
      setNavbarMobileList([...navbarSublists[clickTitle]]);
    } else {
      setNavbarMobileList(navMobileList);
    }
  }, [clickTitle]);

  return (
    <>
      <USGovBanner>
        <div className ='USGovBannerInner'>
          <div className='bannerLeft'>
            <img src={USGovBannerData.logo} alt={"US Flag logo"}></img>
            <span className='bannerText'>An official website of the United States government</span>
          </div>

          <div className='bannerRight'>
            {/*
            <span className='bannerButton'>Español</span>
            */}
          </div>
        </div>
      </USGovBanner>
      <HeaderBanner role="banner">
        <HeaderContainer>
          <Logo />
          <div className='headerLowerContainer'>
            <div className='menuButton' onClick={() => setNavMobileDisplay('block')}>Menu</div>
            { path !== "/sitesearch" && <div className='searchBarArea'><SearchBar /></div> }
          </div>
        </HeaderContainer>
      </HeaderBanner>
      <NavMobileContainer style={{display: navMobileDisplay}}>
        <MenuArea>
            <div className='menuContainer'>
                <div className='closeIcon' onClick={() => setNavMobileDisplay('none')}><img className='closeIconImg' src={menuClearIcon} alt="menuClearButton" /></div>
                { navbarMobileList !== navMobileList && <div className='backButton' onClick={() => setClickTitle('')}>Main Menu</div>}
                <div className='navMobileContainer'>
                { navbarMobileList !== navMobileList && <div className='navMobileItem'>{clickTitle}</div>}
                    {
                        navbarMobileList.map((navMobileItem, idx) => {
                            const mobilekey = `mobile_${idx}`;
                            return (
                                <>
                                    {navMobileItem.className === 'navMobileItem' && <NavLink to={navMobileItem.link} state={{ navigationType: 'main_menu' }} key={mobilekey} onClick={() => setNavMobileDisplay('none')}><div className='navMobileItem'>{navMobileItem.name}</div></NavLink>}
                                    {navMobileItem.className === 'navMobileItem clickable' && <div key={mobilekey} className='navMobileItem clickable' onClick={clickNavItem}>{navMobileItem.name}</div>}
                                    {navMobileItem.className === 'navMobileSubItem' && <a href={navMobileItem.link} target={navMobileItem.externalLink ? "_blank" : ""} rel="noopener noreferrer" key={mobilekey}><div className='navMobileItem SubItem' onClick={() => setNavMobileDisplay('none')}>{navMobileItem.name}</div></a>}
                                    {navMobileItem.className === 'cart' && <NavLink to={navBarCartData.cartLink} key='cart_key' onClick={() => setNavMobileDisplay('none')}><div className='navMobileItem' style={{fontWeight: '600'}}>MY FILES</div></NavLink>}
                                </>
                            )
                        })
                    }
                </div>
            </div>
            <div className='greyContainer' onClick={() => setNavMobileDisplay('none')}/>
        </MenuArea>
      </NavMobileContainer>
    </>
  );
};

export default Header;

NEW 1	import React, {useState, useEffect} from 'react';	×
2	import { NavLink, useLocation } from 'react-router-dom';	×
3	import styled from 'styled-components';	×
4	import Logo from '../ResponsiveHeader/components/LogoTablet';	×
5	import SearchBar from '../ResponsiveHeader/components/SearchBarTablet';	×
6	import menuClearIcon from '../../assets/header/Menu_Cancel_Icon.svg';	×
7	import rightArrowIcon from '../../assets/header/Right_Arrow.svg';	×
8	import leftArrowIcon from '../../assets/header/Left_Arrow.svg';	×
9	import { navMobileList, navbarSublists, navBarCartData } from '../../bento/globalHeaderData'	×
10	import { USGovBannerData } from '../../bento/globalHeaderData';
11
12	const HeaderBanner = styled.div`	×
13	width: 100%;
14	`;
15
16	const HeaderContainer = styled.div`	×
17	margin: 0 auto;
18	padding-left: 16px;
19	box-shadow: -0.1px 6px 9px -6px rgba(0, 0, 0, 0.5);
20
21	.searchBarArea {
22	padding: 0 16px 0 0;
23	margin-left: auto;
24	}
25
26	.headerLowerContainer {
27	display: flex;
28	margin: 16px 0 0 0;
29	height: 58px;
30	}
31
32	.menuButton {
33	width: 89px;
34	height: 45px;
35	background: #1F4671;
36	border-radius: 5px;
37	font-family: 'Open Sans';
38	font-weight: 700;
39	font-size: 20px;
40	line-height: 45px;
41	color: #FFFFFF;
42	text-align: center;
43	}
44
45	.menuButton:hover {
46	cursor: pointer;
47	}
48
49	// .menuButton:active {
50	// outline: 0.25rem solid #2491ff;
51	// outline-offset: 0.25rem
52	// }
53	`;
54
55	const NavMobileContainer = styled.div`	×
56	// display: none;
57	position: absolute;
58	left: 0;
59	top: 0;
60	height: 100%;
61	width: 100%;
62	z-index: 1200;
63	`;
64
65	const MenuArea = styled.div`	×
66	height: 100%;
67	width: 100%;
68	display: flex;
69
70	.menuContainer {
71	background: #ffffff;
72	width: 385px;
73	height: 100%;
74	padding: 21px 16px;
75	}
76
77	.greyContainer {
78	width: 100%;
79	height: 100%;
80	background: rgba(0,0,0,.2);
81	}
82
83	.closeIcon {
84	height: 14px;
85	margin-bottom: 29px;
86	}
87
88	.closeIconImg {
89	float: right;
90	}
91
92	.closeIconImg:hover {
93	cursor: pointer;
94	}
95
96	// .closeIconImg:active {
97	// outline: 0.25rem solid #2491ff;
98	// outline-offset: 0.5rem
99	// }
100
101	.backButton {
102	font-family: Open Sans;
103	font-weight: 600;
104	font-size: 16px;
105	line-height: 16px;
106	color: #007BBD;
107	padding-left: 16px;
108	background: url(${leftArrowIcon}) left no-repeat;
109	}
110
111	.backButton:hover {
112	cursor: pointer;
113	}
114
115	// .backButton:active {
116	// outline: 0.25rem solid #2491ff;
117	// outline-offset: 0.5rem;
118	// }
119
120	.navMobileContainer {
121	padding: 24px 0 0 0;
122
123	a {
124	text-decoration: none;
125	color: #3D4551;
126	}
127	}
128
129	.navMobileItem {
130	width: 353px;
131	padding: 8px 24px 8px 16px;
132	font-family: Open Sans;
133	font-weight: 400;
134	font-size: 16px;
135	line-height: 16px;
136	border-top: 1px solid #F0F0F0;
137	border-bottom: 1px solid #F0F0F0;
138	color: #3D4551;
139	}
140
141	.navMobileItem:hover {
142	background-color: #f9f9f7;
143	}
144
145	// .navMobileItem:active {
146	// outline: 0.25rem solid #2491ff;
147	// }
148
149	.SubItem {
150	padding-left: 24px;
151	}
152
153	.clickable {
154	background: url(${rightArrowIcon}) 90% no-repeat;
155	}
156
157	.clickable {
158	cursor: pointer;
159	}
160	`;
NEW 161	const USGovBanner = styled.div`	×
162	background-color: #f0f0f0;
163	height: 46px;
164	width: 100%;
165	align-items: center;
166	.USGovBannerInner {
167	padding: 8px 32px;
168	display: flex;
169	align-items: center;
170	height: 100%;
171	margin: 0 auto;
172	max-width: 1420px;
173	}
174
175	img {
176	height: 11px;
177	width: 16px;
178	}
179
180	.bannerLeft {
181	width: 50%;
182	text-align: left;
183	display: flex;
184	align-items: center;
185	}
186	.bannerText {
187	font-family: 'Open Sans';
188	font-size: 12px;
189	font-weight: 400;
190	color: #000000;
191	margin-left: 15px;
192	}
193	.bannerRight {
194	width: 50%;
195	text-align: right;
196	.bannerButton {
197	display: inline-block;
198	background-color: #3b7f84;
199	width: 72px;
200	height: 30px;
201	border-radius: 5px;
202	font-family: 'Open Sans', sans-serif;
203	font-size: 15px;
204	font-weight: 700;
205	color: white;
206	letter-spacing: 0em;
207	text-align: center;
208	line-height: 30px;
209	cursor: pointer;
210	}
211	}
212
213	`;
214
215	const Header = () => {	×
216	const path = useLocation().pathname;	×
NEW 217	const [clickTitle, setClickTitle] = useState('');	×
218	const [navMobileDisplay, setNavMobileDisplay] = useState('none');	×
219	const [navbarMobileList, setNavbarMobileList] = useState(navMobileList);	×
220
221	const clickNavItem = (e) => {	×
NEW 222	const ctitle = e.target.innerText;	×
NEW 223	setClickTitle(ctitle);	×
224	}
225
NEW 226	useEffect(() => {	×
NEW 227	if (clickTitle && navbarSublists[clickTitle]) {	×
NEW 228	setNavbarMobileList([...navbarSublists[clickTitle]]);	×
229	} else {
NEW 230	setNavbarMobileList(navMobileList);	×
231	}
232	}, [clickTitle]);
233
UNCOV 234	return (	×
235	<>
236	<USGovBanner>
237	<div className ='USGovBannerInner'>
238	<div className='bannerLeft'>
239	<img src={USGovBannerData.logo} alt={"US Flag logo"}></img>
240	<span className='bannerText'>An official website of the United States government</span>
241	</div>
242
243	<div className='bannerRight'>
244	{/*
245	<span className='bannerButton'>Español</span>
246	*/}
247	</div>
248	</div>
249	</USGovBanner>
250	<HeaderBanner role="banner">
251	<HeaderContainer>
252	<Logo />
253	<div className='headerLowerContainer'>
254	<div className='menuButton' onClick={() => setNavMobileDisplay('block')}>Menu</div>	×
255	{ path !== "/sitesearch" && <div className='searchBarArea'><SearchBar /></div> }	×
256	</div>
257	</HeaderContainer>
258	</HeaderBanner>
259	<NavMobileContainer style={{display: navMobileDisplay}}>
260	<MenuArea>
261	<div className='menuContainer'>
262	<div className='closeIcon' onClick={() => setNavMobileDisplay('none')}><img className='closeIconImg' src={menuClearIcon} alt="menuClearButton" /></div>	×
NEW 263	{ navbarMobileList !== navMobileList && <div className='backButton' onClick={() => setClickTitle('')}>Main Menu</div>}	×
264	<div className='navMobileContainer'>
265	{ navbarMobileList !== navMobileList && <div className='navMobileItem'>{clickTitle}</div>}	×
266	{
267	navbarMobileList.map((navMobileItem, idx) => {
268	const mobilekey = `mobile_${idx}`;	×
269	return (	×
270	<>
NEW 271	{navMobileItem.className === 'navMobileItem' && <NavLink to={navMobileItem.link} state={{ navigationType: 'main_menu' }} key={mobilekey} onClick={() => setNavMobileDisplay('none')}><div className='navMobileItem'>{navMobileItem.name}</div></NavLink>}	×
272	{navMobileItem.className === 'navMobileItem clickable' && <div key={mobilekey} className='navMobileItem clickable' onClick={clickNavItem}>{navMobileItem.name}</div>}	×
NEW 273	{navMobileItem.className === 'navMobileSubItem' && <a href={navMobileItem.link} target={navMobileItem.externalLink ? "_blank" : ""} rel="noopener noreferrer" key={mobilekey}><div className='navMobileItem SubItem' onClick={() => setNavMobileDisplay('none')}>{navMobileItem.name}</div></a>}	×
UNCOV 274	{navMobileItem.className === 'cart' && <NavLink to={navBarCartData.cartLink} key='cart_key' onClick={() => setNavMobileDisplay('none')}><div className='navMobileItem' style={{fontWeight: '600'}}>MY FILES</div></NavLink>}	×
275	</>
276	)
277	})
278	}
279	</div>
280	</div>
281	<div className='greyContainer' onClick={() => setNavMobileDisplay('none')}/>	×
282	</MenuArea>
283	</NavMobileContainer>
284	</>
285	);
286	};	×
287
288	export default Header;

CBIIT / bento-c3dc-frontend / 21596747702

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