[F][C][SideBar] add paper to menu items

Fibii · Oct 27, 2020 · 8376ba2 · 8376ba2
1 parent a6028df
commit 8376ba2
Showing 1 changed file with 24 additions and 13 deletions.
diff --git a/frontend/src/components/Header/Sidebar.js b/frontend/src/components/Header/Sidebar.js
@@ -14,9 +14,9 @@ import AddBoxIcon from '@material-ui/icons/AddBox'
 import ExitToAppIcon from '@material-ui/icons/ExitToApp'
 import React, { useContext } from 'react'
 import { grey, lightBlue } from '@material-ui/core/colors'
+import Paper from '@material-ui/core/Paper'
 import UserContext from '../UserContext/UserContext'
 
-
 const drawerWidth = 240
 
 const useStyles = makeStyles((theme) => ({
@@ -45,6 +45,11 @@ const useStyles = makeStyles((theme) => ({
     color: lightBlue[800],
     marginRight: 16,
   },
+  itemPaper: {
+    marginTop: 4,
+    marginLeft: 4,
+    marginRight: 4,
+  },
 
 }))
 
@@ -83,21 +88,27 @@ const Sidebar = ({ state, dispatch }) => {
         <Divider />
         <List>
           <Link to="/" className={classes.link}>
-            <ListItem button key="home" data-testid="home-button">
-              <HomeIcon className={classes.icons} />
-              <ListItemText primary="Home" />
-            </ListItem>
+            <Paper className={classes.itemPaper}>
+              <ListItem button key="home" data-testid="home-button">
+                <HomeIcon className={classes.icons} />
+                <ListItemText primary="Home" />
+              </ListItem>
+            </Paper>
           </Link>
           <Link to="/question/new" className={classes.link} data-testid="newQuestion-button">
-            <ListItem button key="newQuestion">
-              <AddBoxIcon className={classes.icons} />
-              <ListItemText primary="New Question" />
-            </ListItem>
+            <Paper className={classes.itemPaper}>
+              <ListItem button key="newQuestion">
+                <AddBoxIcon className={classes.icons} />
+                <ListItemText primary="New Question" />
+              </ListItem>
+            </Paper>
           </Link>
-          <ListItem button key="logout" onClick={() => handleLogout()} data-testid="logoutDrawer-button">
-            <ExitToAppIcon className={classes.icons} />
-            <ListItemText primary="Logout" />
-          </ListItem>
+          <Paper onClick={() => handleLogout()} className={classes.itemPaper}>
+            <ListItem button key="logout" data-testid="logoutDrawer-button">
+              <ExitToAppIcon className={classes.icons} />
+              <ListItemText primary="Logout" />
+            </ListItem>
+          </Paper>
         </List>
       </Drawer>
     </>