added some components

client/src/components/Categories/Categories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Link } from 'react-router-dom'
+import { ListItem, ListItemText } from '@material-ui/core'
+
+const Categories = ({ data, history, classes }) => {
+  return data.map((e, i) => {
+    return (
+      <Link className={classes.link} key={i} to={`/category/${i}`}>
+          <ListItem selected={history.location.pathname === `/category/${i}`} button className={classes.nested}>
+            <ListItemText primary={"Категория " + i} />
+          </ListItem>
+      </Link>
+    )
+  })
+}
+
+export default Categories

client/src/components/Nav/NavContent/NavContent.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Categories from '../../Categories/Categories'
 import { Link } from 'react-router-dom'
 import MuiLink from '@material-ui/core/Link';
 import { Divider, List, ListItemIcon, ListItemText, Collapse, ListItem, IconButton, Typography, makeStyles } from '@material-ui/core'
@@ -86,15 +87,7 @@ const NavContent = ({ history }) => {
       </ListItem>
       <Collapse in={isListOpen.current} timeout="auto" unmountOnExit>
         <List component="div" disablePadding>
-          {[1,2,3].map((e, i) => {
+          <Categories data={[1,2,3]} history={history} classes={classes} />
-            return (
-              <Link className={classes.link} key={i} to={`/category/${i}`}>
-                  <ListItem selected={history.location.pathname === `/category/${i}`} button className={classes.nested}>
-                    <ListItemText primary={"Категория " + i} />
-                  </ListItem>
-              </Link>
-            )
-          })}
           <ListItem className={classes.addCategoryItem}>
             <IconButton aria-label="add">
               <AddIcon />

client/src/containers/Category/Category.js

@@ -12,7 +12,7 @@ const Category = () => {
       <Fab size='large' ariaLabel='add' typeIcon='edit'/>
       <Grid item xs={12}>
         <Typography>
-          Сортируйте свои повседневные задачи используя категории
+          Сортируйте свои повседневные задачи используя категории.
         </Typography> 
       </Grid> 
       <Cards data={[1,2,3]} />