u

photo/src/index.js

@@ -8,7 +8,7 @@ import ButtonAppBar from './testM';
 ReactDOM.render( <
     div >
     <
-    SearchAppBar / >
+    ButtonAppBar / >
     <
     App / >
     <

photo/src/testM.js

@@ -25,6 +25,8 @@ import PhotoAlbumIcon from '@material-ui/icons/PhotoAlbum';
 import LibraryAddCheckIcon from '@material-ui/icons/LibraryAddCheck';
 import Grid from '@material-ui/core/Grid';
 
+const drawerWidth = 240;
+
 const useStyles = makeStyles((theme) => ({
     root: {
         flexGrow: 1,
@@ -43,6 +45,65 @@ const useStyles = makeStyles((theme) => ({
         // necessary for content to be below app bar
         ...theme.mixins.toolbar,
     },
+    root: {
+        display: 'flex',
+    },
+    appBar: {
+        zIndex: theme.zIndex.drawer + 1,
+        transition: theme.transitions.create(['width', 'margin'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+    },
+    appBarShift: {
+        marginLeft: drawerWidth,
+        width: `calc(100% - ${drawerWidth}px)`,
+        transition: theme.transitions.create(['width', 'margin'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    },
+    menuButton: {
+        marginRight: 36,
+    },
+    hide: {
+        display: 'none',
+    },
+    drawer: {
+        width: drawerWidth,
+        flexShrink: 0,
+        whiteSpace: 'nowrap',
+    },
+    drawerOpen: {
+        width: drawerWidth,
+        transition: theme.transitions.create('width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    },
+    drawerClose: {
+        transition: theme.transitions.create('width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        overflowX: 'hidden',
+        width: theme.spacing(7) + 1,
+        [theme.breakpoints.up('sm')]: {
+            width: theme.spacing(9) + 1,
+        },
+    },
+    toolbar: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        padding: theme.spacing(0, 1),
+        // necessary for content to be below app bar
+        ...theme.mixins.toolbar,
+    },
+    content: {
+        flexGrow: 1,
+        padding: theme.spacing(3),
+    },
 }));
 
 export default function ButtonAppBar() {
@@ -59,12 +120,24 @@ export default function ButtonAppBar() {
     };
 
     return ( <
-        div className = { classes.toolbar } >
+        div className = { classes.root } >
         <
-        AppBar position = "static" >
+        AppBar position = "fixed" >
         <
         Toolbar >
         <
+        IconButton color = "inherit"
+        onClick = { handleDrawerOpen }
+        edge = "start"
+        className = {
+            clsx(classes.menuButton, {
+                [classes.hide]: open,
+            })
+        } >
+        <
+        MenuIcon / >
+        <
+        /IconButton>  <
         IconButton edge = "start"
         className = { classes.menuButton }
         color = "inherit" >
@@ -78,8 +151,7 @@ export default function ButtonAppBar() {
         /Typography> <
         Button color = "inherit" > Login < /Button> < /
         Toolbar > <
-        /AppBar>       <Drawer
-        variant = "permanent"
+        /AppBar> < Drawer variant = "permanent"
         className = {
             clsx(classes.drawer, {
                 [classes.drawerOpen]: open,