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

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/esm/extends";
import React from 'react';
import TopAppBar from '../TopAppBar';
import Main from '../Main';
import { makeStyles } from '@krowdy-ui/core';
const 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) {
  const [openDrawer, setOpenDrawer] = React.useState(false);
  const {
    children,
    topAppBarProps = {},
    mainProps = {}
  } = props;
  const classes = useStyles();

  const _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;