Instantly share code, notes, and snippets.
productioncoder/HeaderNav.js
Last active Oct 3, 2018
Youtube Header navigation using Semantic UI
import React from 'react'; | |
import {Form, Icon, Image, Input, Menu} from 'semantic-ui-react'; | |
import './HeaderNav.scss'; | |
import logo from '../../assets/images/logo.jpg'; | |
export class HeaderNav extends React.Component { | |
render() { | |
return ( | |
<Menu borderless className='top-menu' fixed='top'> | |
<Menu.Item header className='logo'> | |
<Image src={logo} size='tiny'/> | |
</Menu.Item> | |
<Menu.Menu className='nav-container'> | |
<Menu.Item className='search-input'> | |
<Form> | |
<Form.Field> | |
<Input placeholder='Search' | |
size='small' | |
action='Go' | |
/> | |
</Form.Field> | |
</Form> | |
</Menu.Item> | |
<Menu.Menu position='right'> | |
<Menu.Item> | |
<Icon className='header-icon' name='video camera' size='large'/> | |
</Menu.Item> | |
<Menu.Item> | |
<Icon className='header-icon' name='grid layout' size='large'/> | |
</Menu.Item> | |
<Menu.Item> | |
<Icon className='header-icon' name='chat' size='large'/> | |
</Menu.Item> | |
<Menu.Item> | |
<Icon className='header-icon' name='alarm' size='large'/> | |
</Menu.Item> | |
<Menu.Item name='avatar'> | |
<Image src='http://via.placeholder.com/80x80' avatar/> | |
</Menu.Item> | |
</Menu.Menu> | |
</Menu.Menu> | |
</Menu> | |
); | |
} | |
} | |
export default HeaderNav; |
/* | |
The .ui.menu is needed otherwise there's a more specific rule from semantic UI | |
we use this rule to tweak Semantic UI's CSS | |
*/ | |
.ui.menu.top-menu { | |
border: none; | |
.logo { | |
width: 17rem; | |
} | |
.nav-container { | |
flex-grow: 1; | |
padding: 0; | |
.search-input { | |
padding-left: 0; | |
width: 33%; | |
form { | |
width: 100%; | |
} | |
} | |
} | |
.header-icon { | |
color: #a0a0a0; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment