import { useContainer } from "unstated-next";
import DropdownContainer from "../components/DropdownContainer";
import GlobalStore from "../store/global";
import NavBar from "../components/NavBar";
import Footer from "../components/Footer";

const AppOuter = ({ children }) => {
  const { isHamburger, setIsHamburger } = useContainer(GlobalStore);
  return (
    <div className="container">
      {isHamburger ? (
        <DropdownContainer hamburgerToggle={setIsHamburger} />
      ) : null}
      <div style={{ marginTop: 70 }}>{children}</div>
      <NavBar hamburgerToggle={setIsHamburger}></NavBar>
      <Footer></Footer>
    </div>
  );
};

export default AppOuter;