import React from "react"; import clsx from 'clsx'; import { useTheme, Toolbar, IconButton, Theme, LinearProgress } from "@material-ui/core"; import { makeStyles, createStyles } from "@material-ui/core/styles"; import { Menu as MenuIcon, Close as CloseIcon, Remove as MinimizeIcon } from "@material-ui/icons"; import { MessageChannel } from 'electron-re'; import { red } from "@material-ui/core/colors"; import DrawerMenu from "../DrawerMenu"; import { AdaptiveDrawer } from "../Pices/Drawer"; import { AdaptiveAppBar } from "../Pices/AppBar"; import { useTypedSelector } from "../../redux/reducers"; export type AppNavNormalProps = { title: string | React.ReactElement; } const useStyles = makeStyles((theme: Theme) => createStyles({ appNavWrapper: { }, drawer: { // [theme.breakpoints.up("sm")]: { // width: drawerWidth, // flexShrink: 0 // } }, visibilityHidden: { visibility: "hidden" }, icons: { transition: 'all .2s', '&.minimum': { backgroundColor: 'rgba(255, 255, 255, .2)', '&:hover': { transform: 'scale(1.1)', } }, '&.close': { marginLeft: '5px', marginRight: '-5px', '&:hover': { color: red[500] } } }, disableDrag: { '-webkit-app-region': 'none', }, appBar: { '-webkit-app-region': 'drag', // [theme.breakpoints.up("sm")]: { // width: `calc(100% - ${drawerWidth}px)`, // marginLeft: drawerWidth // } }, toolBar: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', minHeight: '36px' }, menuButton: { // [theme.breakpoints.up("sm")]: { // display: "none" // } }, title: { fontWeight: 'bold' } }) ); const minimumApp = () => { MessageChannel.invoke('main', 'service:desktop', { action: 'minimumApp', params: [] }); }; const hideApp = () => { MessageChannel.invoke('main', 'service:desktop', { action: 'hideApp', params: [] }); }; const AppNavNormal: React.FC<AppNavNormalProps> = (props) => { const theme = useTheme(); const styles = useStyles(); const { title } = props; const settings = useTypedSelector(state => state.settings); const status = useTypedSelector(state => state.status); const [open, setOpen] = React.useState(false); const handleDrawerToggle = () => { setOpen(!open); }; return ( <div className={styles.appNavWrapper}> <AdaptiveAppBar position="fixed" className={styles.appBar}> <Toolbar className={styles.toolBar} variant="dense"> <div className={styles['disableDrag']}> { !settings.fixedMenu && ( <IconButton color="inherit" edge="start" onClick={handleDrawerToggle} > <MenuIcon className={styles.menuButton} /> </IconButton> ) } <span className={styles.title}>{title}</span> </div> <span> <IconButton style={{ padding: 0 }} color="inherit" className={`${styles['disableDrag']} ${styles.icons} minimum`} onClick={minimumApp} > <MinimizeIcon /> </IconButton> <IconButton color="inherit" style={{ padding: 0 }} className={`${styles['disableDrag']} ${styles.icons} close`} onClick={hideApp} > <CloseIcon /> </IconButton> </span> </Toolbar> <LinearProgress className={clsx(!status.waiting ? styles.visibilityHidden : '')} /> </AdaptiveAppBar> <nav className={styles.drawer}> <AdaptiveDrawer mode={settings.fixedMenu ? 'absolute' : 'fixed'} anchor={theme.direction === "rtl" ? "right" : "left"} open={open} onClose={handleDrawerToggle} ModalProps={{ keepMounted: true }} > <DrawerMenu hideIcon={settings.fixedMenu} onClick={handleDrawerToggle} /> </AdaptiveDrawer> </nav> </div> ); }; export default AppNavNormal;