index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { faSnapchat } from "@fortawesome/free-brands-svg-icons"
import { 
  faGlobe,
  faMars,
  faVenus,
  faCameraRetro,
  faPlus
} from "@fortawesome/free-solid-svg-icons"

import { Provider } from 'mobx-react'
import { RouterStore, syncHistoryWithStore } from 'mobx-react-router'
import { Router } from 'react-router-dom'
import createBrowserHistory from 'history/createBrowserHistory'

// React Components
import userStore from './App/stores/UserStore'
import App from './App/index'

// SCSS
import './scss/base'

library.add(
  faSnapchat,
  faGlobe,
  faMars,
  faVenus,
  faCameraRetro,
  faPlus
)
dom.watch()

/*
 * Main application
 */
const appContainer = document.getElementById('app');
if(appContainer) {
  const browserHistory = createBrowserHistory()
  const routingStore = new RouterStore();

  const stores = {
    users: userStore,
    routing: routingStore
  }

  const history = syncHistoryWithStore(browserHistory, routingStore);

  ReactDOM.render(
    (
      <Provider {...stores}>
        <Router history={history}>
          <App />
        </Router>
      </Provider>
    ),
  appContainer);
}

/*
 * Burger Menu
 */
const burgerMenu = document.querySelector('.navbar-burger');
if (burgerMenu) {
  burgerMenu.addEventListener('click', ev => {
    const target = ev.target
    const menu = document.querySelector('.navbar-menu')
    target.classList.toggle('is-active')
    menu.classList.toggle('is-active')
  })
}