productioncoder

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'>

productioncoder

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'>

productioncoder

<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'

productioncoder

<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>

productioncoder

import React, { Component } from 'react';
import HeaderNav from './containers/HeaderNav/HeaderNav';

class App extends Component {
  render() {
    return (
      <HeaderNav/>
    );
  }
}

productioncoder

import React from 'react';
import {Icon, Menu} from "semantic-ui-react";
import './SideBarItem.scss';

export function SideBarItem(props) {
  // React will ignore custom boolean attributes, therefore we pass a string
  // we use this attribute in our SCSS for styling
  const highlight = props.highlight ? 'highlight-item' : null;
  return (
      <Menu.Item className={['sidebar-item', highlight].join(' ')}>

productioncoder

import React from 'react';
import {SideBarItem} from './SideBarItem/SideBarItem';
import {Menu} from 'semantic-ui-react';
import './SideBar.scss';

export class SideBar extends React.Component {
  render() {
    return (
      <Menu borderless vertical stackable fixed='left' className='side-nav'>
        {/*...*/}

productioncoder

render() {
  return (
    <Menu borderless vertical stackable fixed='left' className='side-nav'>
      <SideBarItem highlight={true}  label='Home' icon='home'/>
      <SideBarItem label='Trending' icon='fire'/>
      <SideBarItem label='Followers' icon='spy'/>
      <SideBarItem label='History' icon='history'/>
      <SideBarItem label='Watch later' icon='clock'/>
      <SideBarItem label='Liked videos' icon='thumbs up'/>
      <SideBarItem label='Movies and Shows' icon='film'/>

productioncoder

.ui.menu.fixed.side-nav {
  background-color: #f5f5f5;
  margin-top: 64px;
  overflow-y: auto;
  padding-bottom: 64px;

  .sidebar-item:hover {
    background: #ebebeb;
  }
}

productioncoder

@import '../../styles/shared.scss';
.ui.menu.top-menu {
  border: none;
  .logo {
    width: $sidebar-left-width;
  }
  /* ... */
}