/* eslint-disable import/no-anonymous-default-export */
import React, { useEffect, useState } from "react";
import Menu from "./component/Menu";
import Footer from "./component/Footer";
import "../index.css"

const Layout = (props) => {
  const { children, } = props;
  const [width, setwidth] = useState();
  useEffect(() => {
    window.addEventListener("orientationchange", handleOrientationChange, true);
    getWidth();
    return () => {
      window.removeEventListener("orientationchange", handleOrientationChange)
    }
  });
  const handleOrientationChange = () => {
    // const height = (document.documentElement.clientHeight - 30) * 1.695 - 29;
    getWidth();
  }
  const getWidth = () => {
    const width = document.documentElement.clientWidth;
    setwidth(width);
  }
  return (
    <Menu>
      <div
        style={{
          position: "absolute",
          top: -40,
          background: "white",
          minHeight: "100vh"
        }}
      >
        <div className="mobile_main" style={{
          width
        }}>
          {children}
        </div>
        <Footer style={{ marginTop: 10 }} />
      </div>
    </Menu>
  );
};

export default Layout;
