productioncoder

npm i -g create-react-app

productioncoder

# you can also run npm start instead
yarn start

productioncoder

git add -A
git commit -m "project setup"
git push

productioncoder

yarn add semantic-ui-react semantic-ui-css

productioncoder

import 'semantic-ui-css/semantic.min.css';
// ...

productioncoder

"scripts": {
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },

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

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

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