119 lines
5.6 KiB
JavaScript
119 lines
5.6 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import logo from '../../assets/images/wrenchboard-logo-text.png';
|
|
import getConfig from './../../Config/config'
|
|
|
|
|
|
function Drawer({ drawer, action }) {
|
|
var site = getConfig()[0];
|
|
|
|
const [itemSize, setSize] = useState('0px');
|
|
const [item, setItem] = useState('home');
|
|
const handler = (e, value) => {
|
|
e.preventDefault();
|
|
const getItems = document.querySelectorAll(`#${value} li`).length;
|
|
if (getItems > 0) {
|
|
setSize(`${43 * getItems}px`);
|
|
setItem(value);
|
|
}
|
|
};
|
|
return (
|
|
<>
|
|
<div
|
|
onClick={(e) => action(e)}
|
|
className={`off_canvars_overlay ${drawer ? 'active' : ''}`}
|
|
></div>
|
|
<div className="offcanvas_menu">
|
|
<div className="container-fluid">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className={`offcanvas_menu_wrapper ${drawer ? 'active' : ''}`}>
|
|
<div className="canvas_close">
|
|
<a href="#" onClick={(e) => action(e)}>
|
|
<i className="fa fa-times"></i>
|
|
</a>
|
|
</div>
|
|
<div className="offcanvas-brand text-center mb-40">
|
|
<img src={logo} alt="WrechBoard" />
|
|
</div>
|
|
<div id="menu" className="text-left ">
|
|
<ul className="offcanvas_main_menu">
|
|
<li
|
|
onClick={(e) => handler(e, 'home')}
|
|
id="home"
|
|
className="menu-item-has-children active"
|
|
>
|
|
|
|
<a href="/">Home</a>
|
|
|
|
</li>
|
|
<li
|
|
onClick={(e) => handler(e, 'service')}
|
|
id="service"
|
|
className="menu-item-has-children active"
|
|
>
|
|
<Link to="/service">Service</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/about-us">About Us</Link>
|
|
</li>
|
|
|
|
|
|
|
|
<li
|
|
onClick={(e) => handler(e, 'contact')}
|
|
id="contact"
|
|
className="menu-item-has-children active"
|
|
>
|
|
<Link to="/contact">Contact</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div className="offcanvas-social">
|
|
<ul className="text-center">
|
|
<li>
|
|
<a href={process.env.REACT_APP_FACEBOOK_LINK} >
|
|
<i className="fab fa-facebook-f"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href={site.twitter_link}>
|
|
<i className="fab fa-twitter"></i>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
<div className="footer-widget-info">
|
|
<ul>
|
|
<li>
|
|
<a href="#">
|
|
<i className="fal fa-envelope"></i>{' '}
|
|
{process.env.REACT_APP_SUPPORT_EMAIL}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<i className="fal fa-phone"></i> {process.env.REACT_APP_SUPPORT_PHONE}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<i className="fal fa-map-marker-alt"></i>
|
|
{site.support_us_address}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Drawer;
|
|
|