import React from 'react'; import PropTypes from 'prop-types'; import Head from 'next/head'; import Link from 'next/link'; import {makeStyles, ThemeProvider} from '@material-ui/core/styles'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; import Drawer from '@material-ui/core/Drawer'; import Divider from '@material-ui/core/Divider'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; import DashboardIcon from '@material-ui/icons/Dashboard'; import TrendingUpIcon from '@material-ui/icons/TrendingUp'; import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; import ListIcon from '@material-ui/icons/List'; import clsx from "classnames"; import CssBaseline from '@material-ui/core/CssBaseline'; import theme from '../src/theme'; import '../styles/globals.css' const drawerWidth = 240; const useStyles = makeStyles((theme) => ({ root: { // flexGrow: 1, display: 'flex', }, content: { flexGrow: 1, height: '100vh', overflow: 'auto', }, fixedHeight: { height: 240, }, toolbar: { paddingRight: 24, // keep right padding when drawer closed }, toolbarIcon: { display: 'flex', alignItems: 'center', justifyContent: 'flex-end', padding: '0 8px', ...theme.mixins.toolbar, }, menuButton: { marginRight: 36, }, menuButtonHidden: { display: 'none', }, title: { flexGrow: 1, }, appBar: { zIndex: theme.zIndex.drawer + 1, transition: theme.transitions.create(['width', 'margin'], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), }, appBarSpacer: theme.mixins.toolbar, appBarShift: { marginLeft: drawerWidth, width: `calc(100% - ${drawerWidth}px)`, transition: theme.transitions.create(['width', 'margin'], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.enteringScreen, }), }, drawerPaper: { position: 'relative', whiteSpace: 'nowrap', width: drawerWidth, transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.enteringScreen, }), }, drawerPaperClose: { overflowX: 'hidden', transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), width: theme.spacing(7), [theme.breakpoints.up('sm')]: { width: theme.spacing(9), }, }, })); export default function MyApp(props) { const {Component, pageProps} = props; const [open, setOpen] = React.useState(true); const handleDrawerOpen = () => { setOpen(true); }; const handleDrawerClose = () => { setOpen(false); }; const classes = useStyles(); React.useEffect(() => { // Remove the server-side injected CSS. const jssStyles = document.querySelector('#jss-server-side'); if (jssStyles) { jssStyles.parentElement.removeChild(jssStyles); } }, []); return ( BBGO {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
BBGO
); } MyApp.propTypes = { Component: PropTypes.elementType.isRequired, pageProps: PropTypes.object.isRequired, };