topbar.js---------------

import React from 'react';

import logo from '../../assets/images/logo.png';
import './topbar.css';
import '../../../node_modules/@fortawesome/fontawesome-free/css/all.css';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';

const Topbar = () => {
  return (
    <Navbar className="navbar__background">
      <Navbar.Brand>
        <img className="navbar__logo d-inline-block align-top" src={ logo } alt="Logo"></img>
      </Navbar.Brand>
      <Navbar.Collapse className="justify-content-end">
        <Nav>
          <Nav.Link className="navbar__link" >
            <i className="far fa-bell" aria-hidden="true"></i>
          </Nav.Link>
          <Nav.Link className="navbar__link">
            <i className="far fa-envelope-open" aria-hidden="true"></i>
          </Nav.Link>
          <Nav.Link className="navbar__link">
            <i className="far fa-calendar-alt" aria-hidden="true"></i>
          </Nav.Link>
          <Nav.Link className="navbar__link">
            <i className="far fa-user" aria-hidden="true"></i>
          </Nav.Link>
          <Nav.Link className="navbar__link">
            <i className="fas fa-sign-out-alt" aria-hidden="true"></i>
          </Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

export default Topbar;

dotValidation.js----------

import React from 'react';

import './dotValidation.css';

const DotValidation = ({ hidden, validation, touched }) => {
  let content;

  if (hidden) {
    content =
    <div className="validation__container">
      <div className="validation__dot"></div>
    </div>;
  } else if ((!hidden && validation && touched) || (!hidden && validation && (touched == null))) {
    content =
    <div className="validation__container">
      <div className="validation__dot validation__dot--red"></div>
    </div>
  } else {
    content =
    <div className="validation__container">
      <div className="validation__dot validation__dot--green"></div>
    </div>
  }

  return (
    <>
      { content }
    </>
  );
}

export default DotValidation;

page.js------------
import React, { Component } from 'react';

import './page.css';

import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

class Page extends Component {
  render() {
    return (
      <Col lg="9" md="8" xs="12">
        <Row className="row--no-margin-left">
          <Col className="page__bar" xs="12">
            <h1 className="page__title">{ this.props.title } <small className="page__description">{ this.props.description }</small>
            </h1>
          </Col>
          <Col xs="12">{ this.props.children }</Col>
        </Row>
      </Col>
    );
  }
}

export default Page;



sidebar.js--------------

import React from 'react';
import { NavLink } from 'react-router-dom';

import './sidebar.css';
import '../../../node_modules/@fortawesome/fontawesome-free/css/all.css';

const Sidebar = () => {
  return (
    <div className="sidebar">
      <div className="sidebar__content">
        <nav className="sidebar__menu">
          <ul className="sidebar__menu-list">
            <li className="sidebar__list-item">
              <NavLink className="sidebar__link" exact={true} activeClassName="sidebar__link--active" to="/panel">
                <i className="fas fa-chart-line icon--padding-right-15"></i> <span className="sidebar__text">Dashboard</span>
              </NavLink>
            </li>
            <li className="sidebar__list-item">
              <NavLink className="sidebar__link" activeClassName="sidebar__link--active" to="/panel/users">
                <i className="fas fa-users icon--padding-right-15"></i> <span className="sidebar__text">Użytkownicy</span>
              </NavLink>
            </li>
            <li className="sidebar__list-item">
              <NavLink className="sidebar__link" activeClassName="sidebar__link--active" to="/panel/lines">
                <i className="fas fa-bars icon--padding-right-15"></i> <span className="sidebar__text">Linie</span>
              </NavLink>
            </li>
            <li className="sidebar__list-item">
              <NavLink className="sidebar__link" activeClassName="sidebar__link--active" to="/panel/devices">
                <i className="fas fa-tools icon--padding-right-15"></i> <span className="sidebar__text">Urządzenia</span>
              </NavLink>
            </li>
            <li className="sidebar__list-item">
              <NavLink className="sidebar__link" activeClassName="sidebar__link--active" to="/panel/parameters">
                <i className="fas fa-flask icon--padding-right-15"></i> <span className="sidebar__text">Parametry</span>
              </NavLink>
            </li>
            {/* <li className="sidebar__list-item">
              <NavLink className="sidebar__link" activeClassName="sidebar__link--active" to="/panel/reports">
                Raporty <i class="fas fa-file-alt"></i>
              </NavLink>
            </li> */}
          </ul>
        </nav>
      </div>
    </div>
  );
}

export default Sidebar;


sidepanel.js------------
import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';

import './sidepanel.css';

import Col from 'react-bootstrap/Col';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Button from 'react-bootstrap/Button';

class Sidepanel extends Component {
  constructor(props) {
    super(props)

    this.state = {
      hasReceivedData: false,
      columnDefs: [],
      rowData: []
    }
  }

  componentDidUpdate() {
    // if (!this.state.columnDefs.length && this.props.columnDefs) {
    //   this.setState({ columnDefs: this.props.columnDefs });
    // }

    // if (!this.state.rowData.length && this.props.rowData) {
    //   this.setState({ rowData: this.props.rowData });
    // }
  }

  render() {
    return (
      <Col className="sidepanel" lg="3" md="4" xs="12">
        <Col className="sidepanel__topbar" xs="12">
          <ButtonGroup aria-label="Sidepanel buttons top group">
            <Button onClick={() => this.props.onChangingMode } disabled={ this.props.mode === true }>
              Dodaj
            </Button>
          </ButtonGroup>
        </Col>
        <div className="ag-theme-balham" style={ { height: 'calc(100vh - 10rem)', width: '100%', margin: '15px 0 0 0' } }>
          <AgGridReact
            columnDefs={ this.state.columnDefs }
            rowData={ this.state.rowData }>
          </AgGridReact>
        </div>
      </Col>
    );
  };
}

export default Sidepanel;