i1

photo/src/SearchAppMenu.js

@@ -33,9 +33,6 @@ import Icon from '@material-ui/core/Icon';
 import AddCircle from '@material-ui/icons/AddCircle';
 import CloudIcon from '@material-ui/icons/Cloud';
 import LinearProgress from '@material-ui/core/LinearProgress';
-import ImageList from './imageList';
-
-const drawerWidth = 240;
 
 const BorderLinearProgress = withStyles((theme) => ({
     colorPrimary: {
@@ -49,62 +46,17 @@ const BorderLinearProgress = withStyles((theme) => ({
 
 const useStyles = makeStyles((theme) => ({
     root: {
-        display: 'flex',
-    },
-    appBar: {
-        transition: theme.transitions.create(['margin', 'width'], {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.leavingScreen,
-        }),
-    },
-    appBarShift: {
-        width: `calc(100% - ${drawerWidth}px)`,
-        marginLeft: drawerWidth,
-        transition: theme.transitions.create(['margin', 'width'], {
-            easing: theme.transitions.easing.easeOut,
-            duration: theme.transitions.duration.enteringScreen,
-        }),
+        flexGrow: 1,
     },
     menuButton: {
         marginRight: theme.spacing(2),
     },
-    hide: {
-        display: 'none',
-    },
-    drawer: {
-        width: drawerWidth,
-        flexShrink: 0,
-    },
-    drawerPaper: {
-        width: drawerWidth,
-    },
-    drawerHeader: {
-        display: 'flex',
-        alignItems: 'center',
-        padding: theme.spacing(0, 1),
-        // necessary for content to be below app bar
-        ...theme.mixins.toolbar,
-        justifyContent: 'flex-end',
-    },
-    content: {
+    title: {
         flexGrow: 1,
-        padding: theme.spacing(3),
-        transition: theme.transitions.create('margin', {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.leavingScreen,
-        }),
-        marginLeft: -drawerWidth,
-    },
-    contentShift: {
-        transition: theme.transitions.create('margin', {
-            easing: theme.transitions.easing.easeOut,
-            duration: theme.transitions.duration.enteringScreen,
-        }),
-        marginLeft: 0,
     },
 }));
 
-export default function PersistentDrawerLeft() {
+export default function ButtonAppBar() {
     const classes = useStyles();
     const theme = useTheme();
     const [open, setOpen] = React.useState(false);
@@ -119,37 +71,22 @@ export default function PersistentDrawerLeft() {
 
     return (
         <div className={classes.root}>
-            <CssBaseline />
-            <AppBar
-                position="fixed"
-                style={
-                    { background: '#2196f3' }
-                }
-                className={clsx(classes.appBar, {
-                    [classes.appBarShift]: open,
-                })}
-            >
+            <AppBar position="static">
                 <Toolbar>
-                    <IconButton
-                        color="inherit"
-                        aria-label="open drawer"
-                        onClick={handleDrawerOpen}
-                        edge="start"
-                        className={clsx(classes.menuButton, open && classes.hide)}
-                    >
+                    <IconButton edge="start" onClick={handleDrawerOpen} className={classes.menuButton} color="inherit" aria-label="menu">
                         <MenuIcon />
                     </IconButton>
-                    <Typography variant="h6" noWrap>
+                    <Typography variant="h6" className={classes.title}>
                         谷狗相薄
-                    </Typography>
-                    <Button variant="contained" startIcon={<CloudUploadIcon/>}>Upload</Button>
+          </Typography>
+                    <Button variant="contained" startIcon={<CloudUploadIcon />}>Upload</Button>
                     <IconButton style={{ color: '#ffffff' }} aria-label="delete">
-                        <HelpOutlineIcon/>
+                        <HelpOutlineIcon />
                     </IconButton>
                     <IconButton style={{ color: '#ffffff' }} aria-label="delete">
                         <SettingsIcon />
                     </IconButton>
-                    <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg"/> 
+                    <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
                 </Toolbar>
             </AppBar>
             <Drawer
@@ -185,14 +122,6 @@ export default function PersistentDrawerLeft() {
                     ))}
                 </List>
             </Drawer>
-            <main
-                className={clsx(classes.content, {
-                    [classes.contentShift]: open,
-                })}
-            >
-                <div className={classes.drawerHeader} />
-                    <ImageList/>
-            </main>
         </div>
     );
 }