TopMenu.js =>

import React, {Component} from "react";
import {Link} from "react-router-dom";
import {Col, Nav,NavDropdown} from 'react-bootstrap';
import  '../../css/topmenublock.css';

import RegistrationModal from "./RegistrationModal";
import LoginModal from "./LoginModal";

import '../../i18n' ;
import { useTranslation } from 'react-i18next';

class TopMenu extends Component {

	constructor() {
		super();
		//console.warn("bagItem",this.props);
	}


	logout(){
         localStorage.removeItem("auth");
	}

  render() {

	  const CustomTomMenu =(props)=>{
		  const { t } = useTranslation();

			  return (

				<Nav variant="pills" className="float-right">
					{/*
					<NavLink  to="/d" className="mr-2 nav-link">
						{t('Home.wishlist')} 3
					</NavLink>
				  </Nav.Item>
				    */}
				  <Nav.Item>

					<button className="mr-2 nav-link cartButton" onClick={this.props.click}>

						{t('Home.cart')}
						 <i className="fa fa-shopping-cart green" aria-hidden="true"></i> 0</span>

					</button>
				  </Nav.Item>
				  <NavDropdown title={t('Home.loginfo')} id="nav-dropdown" >
					  <ul>
						  {
						  	localStorage.getItem("auth") ?
								<>
								   <li><Link to="/profile">{t('Home.profile')}</Link></li>
								   <li>this.logout()}>{t('Home.logout')}</li>
								</>
								: <>
								    <li><LoginModal />
									<li><RegistrationModal />
						           </>
						  }


					  </ul>

				</NavDropdown>
				</Nav>
			  );
	  }
    return (        
    <Col xs={12} sm={12} md={3} lg={3} xl={3} className="nopadding5 ">
		<CustomTomMenu />        
      </Col>
    );
  }
}

export default TopMenu;

LoginModal.js =>

import React, {Component} from 'react';
import {Redirect} from 'react-router-dom';
import {Button,Modal,Row,Col} from 'react-bootstrap';
import '../../css/RegistrationModal.css';

class LoginModal extends Component {
    constructor(props) {
        super(props);
         this.state ={
             loginModalShow:false,
             isLogin:false
         };

        this.setLoginModal = this.setLoginModal.bind(this);
    }

    setLoginModal(){
        this.setState({loginModalShow: !this.state.loginModalShow});
    }

    login(){
        const loginData ={
            id:'1',
            email:'uzzalmodak@yahoo.com',
            pass:'111111',
            full_name:'Uk Modak'
        }
        //alert("okk");
        console.warn("state",this.state);

         /*fetch('http://127.0.0.1:8000/api/login', {
            method: "POST",
            headers: {
                  "Accept":"application/json",
                   "Content-Type":"application/json",
                   },
                   body:JSON.stringify(this.state)
             }).then((result)=>{
                 result.json().then((resp)=>{
                    console.log(resp.success.token);
                    localStorage.setItem("auth",SON.stringify(resp))
                 })
        })
        */

        if(this.state.email===loginData.email && this.state.pass===loginData.pass){
            //localStorage.setItem("id",loginData.id);
            //localStorage.setItem("email",loginData.email);
            //localStorage.setItem("full_name",loginData.full_name);
            localStorage.setItem("auth",JSON.stringify(loginData));
            this.setState({isLogin:true})



           
        }
    }

    render(){
        //const [loginModalShow, setLoginModal] = useState(false);
            if(this.state.isLogin) {
                return 
            }

    return (
        <>
            <span className="showCursor"  onClick={this.setLoginModal}>Sigin</span>
            <Modal
                size="sm"
                show={this.state.loginModalShow}
                onHide={this.setLoginModal}
                aria-labelledby="example-modal-sizes-title-sm"
            >
                <Modal.Header closeButton>
                    <Modal.Title id="example-modal-sizes-title-sm" className="text-success">
                       Login
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <div className="content contentPadding contentBg">
                        <div className="container-fluid nomargin nopadding5">
                            <div className="row nomargin loginForm">
                                <div className="col-xs-12 colsm-12 col-md-12 col-lg-12">


                                    <Row>
                                        <Col xs={12} sm={12} md={12} lg={12}>
                                            
                                        </Col>
                                    </Row>

                                        <Row className="m-2">
                                            <Col xs={12} sm={12} md={4} lg={4} >User ID
                                            <Col xs={12} sm={12} md={8} lg={8}>
                                                <input type="text" onChange={(e)=>{this.setState({email:e.target.value})}} className="form-control" />
                                            </Col>
                                        </Row>

                                        <Row className="m-2">
                                            <Col xs={12} sm={12} md={4} lg={4}>Password
                                            <Col xs={12} sm={12} md={8} lg={8}>
                                                <input type="password" className="form-control" onChange={(e)=>{this.setState({pass:e.target.value})}}/>
                                            </Col>
                                        </Row>

                                    <Row className="m-2">
                                        <Col xs={12} sm={12} md={4} lg={4}>
                                        <Col xs={12} sm={12} md={8} lg={8}>
                                            <div className="checkbox">
                                                <label>
                                                    <input type="checkbox" name="remember"/> Remember Me
                                                </label>
                                            </div>
                                        </Col>
                                    </Row>

                                    <Row className="m-2">
                                        <Col xs={12} sm={12} md={4} lg={4}>
                                        <Col xs={12} sm={12} md={8} lg={8}>
                                            <Button variant="dark" className="btn btn-sm btn-default retailLogin" onClick={() =>this.login()}>Login{' '}
                                            <a className="loglink" href="password/forget">Forget Password ?
                                        </Col>
                                    </Row>

                                    <Row className="mt-3 mr-3 mb-3 ml-2">
                                        <Col xs={12} sm={12} md={4} lg={4}>
                                        <Col xs={12} sm={12} md={8} lg={8}>
                                            <a href="/auth/facebook" className="bg-green btn-facebook p-2 m-1 text-white">Login
                                                with <i className="fa fa-facebook"></i>

                                            </a>
                                            <a href="/auth/google" className="bg-red btn-google p-2 m-1 text-white">Login
                                                with <i className="fa fa-google"></i>
                                            </a>
                                        </Col>
                                    </Row>

                                </div>
                            </div>
                        </div>
                    </div>
                </Modal.Body>
            </Modal>
        </>
    );
}
}

export default LoginModal;