App.js => import React, { Component } from "react"; import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom"; import HomeLayout from "./uk_component/layout/HomeLayout"; import ProductLayout from "./uk_component/layout/ProductLayout"; import UserProfileLayout from "./uk_component/layout/UserProfileLayout"; import Home from "./uk_component/Home"; import Product from "./uk_component/Product"; import Userprofile from "./uk_component/Userprofile"; import './css/ukstyle.css'; const HomeLayoutRoute = ({ component: Component, ...rest }) => { return ( <Route {...rest} exact render={matchProps => ( <HomeLayout> <Component {...matchProps} /> </HomeLayout> )} /> ); }; const ProductLayoutRoute = ({ component: Component, ...rest }) => { return ( <Route {...rest} exact render={matchProps => ( <ProductLayout> <Component {...matchProps} /> </ProductLayout> )} /> ); }; const UserProfileLayoutRoute = ({ component: Component, ...rest }) => { return ( <Route {...rest} exact render={matchProps => ( <UserProfileLayout> <Component {...matchProps} /> </UserProfileLayout> )} /> ); }; class App extends Component { render() { return ( <div> <BrowserRouter> <Switch> <Route exact path="/"> <Redirect to="/home" /> </Route> <HomeLayoutRoute path="/home" component={Home} /> <ProductLayoutRoute path="/product/:cat_metaname" component={Product}/> <UserProfileLayoutRoute path="/profile" component={Userprofile} /> </Switch> </BrowserRouter> </div> ); } } export default App;
HomeLayout.js => import React, {Component} from "react"; import {Container,Row,Col} from "react-bootstrap"; import LogoBlock from "../../uk_component/template/Logo"; import LoginInfo from "../../uk_component/template/Logininfo"; import TopSearch from "../../uk_component/template/top_search"; import TopMenu from "../template/TopMenu"; import LandingBanner from "../../uk_component/template/landing_banner"; import MenWomenCollection from "../../uk_component/template/MenWomenCollection"; import PelloHomeCollection from "../../uk_component/template/PelloHomeCollection"; import Footer from "../../uk_component/template/footer"; import LandingInfo from '../../uk_component/template/LandingInfo' import Mainmenu from "../template/Mainmenu"; import Language from "../template/Language"; import Cartlist from '../../uk_component/template/Cartlist'; //import 'jquery/dist/jquery.js'; //import 'popper.js/dist/umd/popper.js'; import '../../css/Landing.css'; class HomeLayout extends Component{ constructor() { super(); this.state={ isCartOnOff:false } } cartHandlee(){ this.setState({isCartOnOff:!this.state.isCartOnOff}); //alert(this.state.isCartOnOff); } render() { return ( <Container fluid> <div className="wrapper"> <Row> <Col xs={12} sm={12} md={12} lg={12} xl={12} className="p-0"> <div className="transparent-header-background"> <div className="top-area top-area-style-default top-area-alignment ukfloatleft"> </div> </div> </Col> </Row> <Row> <Col xs={12} sm={12} md={12} lg={12} xl={12} className="p-0 logobarbg"> <div className="ukmcontainer p-0"> <Row> <LogoBlock/> <LoginInfo/> <TopSearch/> <Language/> <TopMenu click={this.cartHandlee.bind(this)}/> </Row> </div> </Col> </Row> <Row> <Col xs={12} sm={12} md={12} lg={12} xl={12} className="p-0"> <Mainmenu/> <div className="cls"></div> </Col> </Row> <Row> <Col xs={12} sm={12} md={12} lg={12} xl={12} className="p-0 noSearch"> <LandingBanner/> </Col> </Row> <Row> <Col xs={12} sm={12} md={12} lg={12} xl={12} className="p-0 noSearch"> <LandingInfo/> </Col> </Row> <Row> <Col xs={12} sm={12} md={12} lg={12} xl={12} className="p-0 noSearch"> <div className="ukmcontainer paddingtopBottom25 nopadding5"> <MenWomenCollection/> <PelloHomeCollection/> {/*children*/} </div> </Col> </Row> <Row> <Col xs={12} sm={12} md={12} lg={12} xl={12} className="p-0 noSearch"> <div className="cls"></div> <div className="footer-bottom"> <Footer/> </div> </Col> </Row> <Cartlist isCart={this.state.isCartOnOff}/> </div> </Container> ); } } export default HomeLayout;
Mainmenu.js => import React, { Component } from "react"; import {Link} from "react-router-dom"; import {Navbar,Nav,NavDropdown} from "react-bootstrap"; import SubMenu from './SubMenu'; import '../../css/Mainmenu.css'; import '../../i18n' ; import {useTranslation} from "react-i18next"; class Mainmenu extends Component { render() { const MainMenuArray =[ {title:'Home','title_bn':'বাড়ি',link:'/home'}, {title:'Product','title_bn':'পণ্য',link:'/product/women'}, {title:'Women',link:'/product/women_one',sub:[ {title:'Women One',link:'/product/women_two'}, {title:'Women Two',link:'/product/men2'}, {title:'Women Three',link:'/product/men3'}, {title:'Women Four',link:'/product/men4'} ] } ]; const MenuText =()=> { const { t} = useTranslation(); return ( <> <Navbar collapseOnSelect expand="lg" bg="white" variant="light" className="p-0"> <div className="ukmcontainer p-0"> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> <Nav className="mr-auto"> {MainMenuArray.map((menuLink,index)=>{ if(menuLink.sub){ return( <NavDropdown className="pt-2 pr-4 pb-3 pl-0" title={menuLink.title} id="collasible-nav-dropdown" key={index}> <SubMenu submenu={menuLink.sub}/> </NavDropdown> ) }else{ return( <Link to={menuLink.link} className="pt-3 pr-4 pb-3 pl-0" key={index}>{(localStorage.getItem('i18nextLng')==="bn")? menuLink.title_bn:menuLink.title}</Link> ) } })} </Nav> </Navbar.Collapse> </div> </Navbar> </> ); } return ( <MenuText /> ); } } export default Mainmenu;
SubMenu.js => import React, { Component } from "react"; import {Link} from 'react-router-dom'; import '../../css/Mainmenu.css'; class SubMenu extends Component { render() { return ( <div className="ukMega"> {this.props.submenu.map((eachSubmenu,index)=>{ return( <Link to={eachSubmenu.link} className="dropdown-item" key={index}>{eachSubmenu.title}</Link> ) })} </div> ); } } export default SubMenu;
Total : 27273
Today :9
Today Visit Country :