Youtube HeaderNav layout

HeaderNav-1.js

import React from 'react';
import {Image, 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'>
          {/* TODO */}
        </Menu.Menu>
      </Menu>
    );
  }
}

export default HeaderNav;

HeaderNav.scss

.ui.menu.top-menu {
  border: none; /*Remove Semantic UI's bottom border*/
  .logo {
    width: 17rem;
  }
  .nav-container {
    justify-content: space-between; /*maximize whitespace between elements*/
    flex-grow: 1; /* take available space in the flex container */
    padding: 0;
  }
}