react_App.js

on
import React from 'react';
import './App.css';
import './style.css';
import './fonts/icomoon/style.css'; 
import $ from 'jquery';
import Home from './home';
import Users from './users';
import Contact from './contact';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

class App extends React.Component {
  constructor(){
    super();
  }
  componentDidMount() {
    
  }
  slideMenu(e) {
    $('body').addClass('offcanvas-menu');
  };
  unSlideMenu(e){
    $('body').removeClass('offcanvas-menu');
  }
  render() {
    return (  
      <Router>
        <body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
          <div className="site-wrap">
            <div className="site-mobile-menu site-navbar-target">
              <div className="site-mobile-menu-header">
                <div className="site-mobile-menu-close mt-3">
                  <span className="icon-close2 js-menu-toggle" onClick={this.unSlideMenu}></span>
                </div>
              </div>
              <div className="site-mobile-menu-body">
                <nav className="site-navigation position-relative text-right" role="navigation">
                  <a href="/" className="nav-link">Home</a>
                  <a href="/users" className="nav-link">Create Ticket</a>
                  <a href="/contact" className="nav-link">Our Contacts</a>
                </nav>
              </div>
            </div>
            <header className="site-navbar py-4 bg-white js-sticky-header site-navbar-target" role="banner">
              <div className="container-fluid">
                <div className="row align-items-center">          
                  <div className="col-12 col-md-12 d-none d-xl-block">
                    <nav className="site-navigation position-relative text-right" role="navigation">
                      <ul className="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
                        <li><a href="/" className="nav-link">Home</a></li>
                        <li><a href="/users" className="nav-link">Create Ticket</a></li>
                        <li><a href="/contact" className="nav-link">Our Contacts</a></li>
                      </ul>
                    </nav>
                    <hr />
                    
                  </div>
                  <div className="col-12 d-inline-block d-xl-none ml-md-0 py-3">
                    <a href="#" className="site-menu-toggle js-menu-toggle text-black float-right" onClick={this.slideMenu}>
                      <span className="icon-menu h3"></span>
                    </a>
                  </div>
                </div>
              </div>      
          </header>
          <Switch>
              <Route exact path='/' component={Home} />
              <Route path='/users' component={Users} />
              <Route path='/contact' component={Contact} />
          </Switch>
        </div>
      </body> 
    </Router>       
    )
  }
}
export default App;

Comments

Post a Comment