Youtube Header navigation using Semantic UI

HeaderNav.js

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;

HeaderNav.scss

/*
  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;
  }
}