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" />
-    <!--
+    <title>Todo App</title>
-      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>
   </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

@@ -64,7 +64,8 @@ const Main = () => {
         <AddIcon />
       </Fab> 
       <Grid container>       
-        <Grid item xs={12} md={4}>
+          {[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>
@@ -91,6 +92,7 @@ const Main = () => {
               </CardActions>
             </Card>
           </Grid>
+          )} 
       </Grid>
       </main>
   )