grid fixed

client/public/index.html

@@ -10,34 +10,11 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>Todo App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>

client/src/components/DrawerContent/DrawerContent.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Divider from '@material-ui/core/Divider';
 import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
 import CategoryIcon from '@material-ui/icons/Category';
+import AddIcon from '@material-ui/icons/Add';
 import DeleteIcon from '@material-ui/icons/Delete';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
@@ -10,12 +11,17 @@ import ListItemText from '@material-ui/core/ListItemText';
 import Collapse from '@material-ui/core/Collapse'
 import ExpandLess from '@material-ui/icons/ExpandLess'
 import ExpandMore from '@material-ui/icons/ExpandMore'
+import IconButton from '@material-ui/core/IconButton'
 import { makeStyles } from '@material-ui/core/styles'
 
 const useStyles = makeStyles((theme) => ({
   toolbar: theme.mixins.toolbar,
   nested: {
     paddingLeft: theme.spacing(4)
+  },
+  addCategoryItem: {
+    display: 'flex',
+    justifyContent: 'center'
   }
 }))
 
@@ -58,6 +64,11 @@ const Drawer = () => {
         <ListItem button className={classes.nested}>
           <ListItemText primary="Категория 3" />
         </ListItem>
+        <ListItem className={classes.addCategoryItem}>
+          <IconButton aria-label="delete">
+            <AddIcon />
+          </IconButton>
+        </ListItem>
       </List>
     </Collapse>
       <Divider />

client/src/components/Main/Main.js

@@ -63,34 +63,36 @@ const Main = () => {
       <Fab className={classes.fab} color="secondary" size='large' aria-label="add">
         <AddIcon />
       </Fab> 
-      <Grid container>     
-        <Grid item xs={12} md={4}>
-          <Card className={classes.card}>
-            <CardContent>
-              <Typography className={classes.cardCategoryHeading} color="textSecondary" gutterBottom>
-                Категория 1
-                <span className={classes.cardAlarm}>
-                  <AlarmIcon className={classes.alarmIcon} color='action' />
-                  18:00
-                </span>
-              </Typography>
-              <Typography className={classes.cardHeading} variant="h5" component="h2">
-                Todo 1
-              </Typography>
-              <Typography variant="body2" component="p">
-                But I must explain to you how all this mistaken idea of denouncing pleasure and praising.
-              </Typography>
-            </CardContent>
-            <CardActions className={classes.cardActions}>
-              <IconButton aria-label="delete">
-                <EditIcon />
-              </IconButton>
-              <IconButton aria-label="delete" color='secondary'>
-                <DeleteIcon />
-              </IconButton>
-            </CardActions>
-          </Card> 
-        </Grid>
+      <Grid container>       
+          {[1,2,3,4,5,6].map((e) => 
+            <Grid item xs={12} md={4} lg={3}>
+              <Card className={classes.card}>
+              <CardContent>
+                <Typography className={classes.cardCategoryHeading} color="textSecondary" gutterBottom>
+                  Категория 1
+                  <span className={classes.cardAlarm}>
+                    <AlarmIcon className={classes.alarmIcon} color='action' />
+                    18:00
+                  </span>
+                </Typography>
+                <Typography className={classes.cardHeading} variant="h5" component="h2">
+                  Todo 1
+                </Typography>
+                <Typography variant="body2" component="p">
+                  But I must explain to you how all this mistaken idea of denouncing pleasure and praising.
+                </Typography>
+              </CardContent>
+              <CardActions className={classes.cardActions}>
+                <IconButton aria-label="delete">
+                  <EditIcon />
+                </IconButton>
+                <IconButton aria-label="delete" color='secondary'>
+                  <DeleteIcon />
+                </IconButton>
+              </CardActions>
+            </Card>
+          </Grid>
+          )} 
       </Grid>
       </main>
   )