text: import Header from "../header/header";
  import Meta from "../meta/meta";
  import Nav from "../navigation/navigation";
  import { Component } from "react";
  
  const layoutStyle = {
    padding: 20,
    border: "1px solid #DDD",
  };
  
  class Layout extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        show: false,
        size: 3,
      };
    }
  
    componentDidMount(){
      this.watta();
    }
  
    toggle = () => {
      this.setState({
        show: !this.state.show,
      });
    };
  
    sizeToggle = (screen) => {
      this.setState({
        size: screen,
      });
    };
  
    setWidth = () => {
      let sized;
  
      switch (this.state.size) {
        case 0:
          sized = "mob";
          break;
        case 1:
          sized = "tab";
          break;
        case 2:
          sized = "lap";
          break;
        default:
          sized = "full";
      }
  
      return sized;
    };
  
    watta = () => {
      // Only run if ResizeObserver is supported.
      if ("ResizeObserver" in self) {
        // Create a single ResizeObserver instance to handle all
        // container elements. The instance is created with a callback,
        // which is invoked as soon as an element is observed as well
        // as any time that element's size changes.
        var ro = new ResizeObserver(function (entries) {
            // Default breakpoints that should apply to all observed
            // elements that don't define their own custom breakpoints.
            var defaultBreakpoints = { SM: 384, MD: 576, LG: 768, XL: 960 };
  
            entries.forEach(function (entry) {
                // If breakpoints are defined on the observed element,
                // use them. Otherwise use the defaults.
                var breakpoints = entry.target.dataset.breakpoints
                    ? JSON.parse(entry.target.dataset.breakpoints)
                    : defaultBreakpoints;
  
                // Update the matching breakpoints on the observed element.
                Object.keys(breakpoints).forEach(function (breakpoint) {
                    var minWidth = breakpoints[breakpoint];
                    if (entry.contentRect.width >= minWidth) {
                        entry.target.classList.add(breakpoint);
                    } else {
                        entry.target.classList.remove(breakpoint);
                    }
                });
            });
        });
  
        // Find all elements with the `data-observe-resizes` attribute
        // and start observing them.
        var elements = document.querySelectorAll("[data-observe-resizes]");
        for (var element, i = 0; (element = elements[i]); i++) {
            ro.observe(element);
        }
      }
    }
  
    render() {
      let { hideControls } = this.props;
  
      return (
        <div className={this.state.show ? "page open" : "page"}>
          <Meta title={this.props.title} />
          <Nav toggler={this.toggle} />
          <div className="oh">
            {!hideControls && (
              <Header sizer={this.sizeToggle} activeSizer={this.state.size} />
            )}
            <main style={layoutStyle} className={this.setWidth()} data-observe-resizes>
              {this.props.children}
            </main>
          </div>
        </div>
      );
    }
  }
  
  export default Layout;