@krowdy-ui/views/esm/Root/Root.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from 'react';
import TopAppBar from '../TopAppBar';
import Main from '../Main';
import { makeStyles } from '@krowdy-ui/core';
var useStyles = makeStyles({
  root: {
    display: 'flex',
    flexDirection: 'column',
    height: '100vh',
    overflow: 'hidden'
  },
  rootFlex: {
    display: 'flex',
    height: '100%',
    overflow: 'hidden',
    position: 'relative'
  }
}, {
  name: 'Root'
});

function Root(props) {
  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      openDrawer = _React$useState2[0],
      setOpenDrawer = _React$useState2[1];

  var children = props.children,
      _props$topAppBarProps = props.topAppBarProps,
      topAppBarProps = _props$topAppBarProps === void 0 ? {} : _props$topAppBarProps,
      _props$mainProps = props.mainProps,
      mainProps = _props$mainProps === void 0 ? {} : _props$mainProps;
  var classes = useStyles();

  var _handleToggleDrawer = function _handleToggleDrawer() {
    setOpenDrawer(!openDrawer);
  };

  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement(TopAppBar, _extends({
    onHandleToggleDrawer: _handleToggleDrawer
  }, topAppBarProps)), /*#__PURE__*/React.createElement("main", {
    className: classes.rootFlex
  }, /*#__PURE__*/React.createElement(Main, _extends({
    component: "div",
    isOpenDrawer: openDrawer
  }, mainProps), children)));
}

export default Root;