greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: add nav items (#37339) 

* fix: add nav items

* fix: clean up
pull/37342/head
Ahmad Abdolsaheb 2019-10-16 17:09:31 +03:00 committed by Kristofer Koishigawa
parent dd008f73d2
commit 31d3e5eb3b
4 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/Header/Header.test.js
View File

@ -23,16 +23,16 @@ describe('<NavLinks />', () => {
return acc; return acc;
}, []); }, []);
const expectedLinks = ['/learn', '/portfolio']; const expectedLinks = ['/learn', '/portfolio', '/news', '/forum'];
it('renders to the DOM', () => { it('renders to the DOM', () => {
expect(root).toBeTruthy(); expect(root).toBeTruthy();
}); });
it('has 2 links', () => { it('has 2 links', () => {
expect(aTags.length === 2).toBeTruthy(); expect(aTags.length === 4).toBeTruthy();
}); });
it('has links to learn and portfolio', () => { it('has links to news, forum, learn and portfolio', () => {
// checks if all links in expected links exist in links // checks if all links in expected links exist in links
expect(expectedLinks.every(elem => links.indexOf(elem) > -1)).toBeTruthy(); expect(expectedLinks.every(elem => links.indexOf(elem) > -1)).toBeTruthy();
}); });

10
client/src/components/Header/components/NavLinks.js
View File

@ -14,6 +14,16 @@ function NavLinks({ displayMenu }) {
className={'nav-list' + (displayMenu ? ' display-flex' : '')} className={'nav-list' + (displayMenu ? ' display-flex' : '')}
role='menu' role='menu'
> >
<li className='nav-news' role='menuitem'>
<Link external={true} to='/news'>
News
</Link>
</li>
<li className='nav-forum' role='menuitem'>
<Link external={true} to='/forum'>
Forum
</Link>
</li>
<li className='nav-projects' role='menuitem'> <li className='nav-projects' role='menuitem'>
<Link to='/learn'>Projects</Link> <Link to='/learn'>Projects</Link>
</li> </li>

16
client/src/components/Header/components/universalNav.css
View File

@ -86,10 +86,6 @@
height: 38px; height: 38px;
} }
.nav-list li:hover {
background: var(--gray-00);
}
.nav-list li a:hover { .nav-list li a:hover {
color: var(--theme-color); color: var(--theme-color);
text-decoration: none; text-decoration: none;
@ -101,6 +97,11 @@
color: white; color: white;
} }
.nav-list li a:focus:hover {
color: var(--theme-color);
background: white;
}
.universal-nav-right { .universal-nav-right {
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
@ -128,13 +129,14 @@
border: 1px solid var(--gray-00); border: 1px solid var(--gray-00);
} }
@media (max-width: 265px) { @media (max-width: 355px) {
.nav-list li a { .nav-list li a {
width: 50vw; width: 50vw;
text-align: center;
} }
} }
@media (max-width: 799px) { @media (max-width: 999px) {
.site-header { .site-header {
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
@ -200,7 +202,7 @@
} }
} }
@media (min-width: 800px) { @media (min-width: 1000px) {
.universal-nav-middle { .universal-nav-middle {
flex: 1 0 30%; flex: 1 0 30%;
margin-right: 0px; margin-right: 0px;

4
client/src/components/search/searchBar/searchbar.css
View File

@ -30,7 +30,7 @@
} }
.fcc_searchBar .ais-Hits { .fcc_searchBar .ais-Hits {
top: 71px; top: 70px;
width: calc(100vw - 30px); width: calc(100vw - 30px);
left: 15px; left: 15px;
} }
@ -122,7 +122,7 @@ and arrow keys */
right: 15px; right: 15px;
} }
@media (min-width: 800px) { @media (min-width: 1000px) {
.ais-SearchBox-input { .ais-SearchBox-input {
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;