From 79ef4268cddee1e92684099d829bf7534ac02e6d Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 10 May 2020 16:43:46 +0200
Subject: [PATCH] [docs] Better visually group tocs items

---
 .../modules/components/AppTableOfContents.js  | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
index 3257600ab23739..411767f0b75f70 100644
--- a/docs/src/modules/components/AppTableOfContents.js
+++ b/docs/src/modules/components/AppTableOfContents.js
@@ -27,7 +27,7 @@ const useStyles = makeStyles((theme) => ({
   },
   contents: {
     marginTop: theme.spacing(2),
-    paddingLeft: theme.spacing(1),
+    paddingLeft: 8,
   },
   ul: {
     padding: 0,
@@ -36,20 +36,17 @@ const useStyles = makeStyles((theme) => ({
   },
   item: {
     fontSize: '.8125rem',
-    lineHeight: 2,
-    // paddingLeft: theme.spacing(1) where `border` is used as the "active" marker
-    paddingLeft: Math.max(0, theme.spacing(1) - 4),
-    borderLeft: `4px solid transparent`,
+    margin: theme.spacing(1, 0),
+    paddingLeft: 5,
+    borderLeft: `3px solid transparent`,
     boxSizing: 'border-box',
     '&:hover': {
-      borderLeft: `4px solid ${
-        theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900]
-      }`,
+      borderLeftColor:
+        theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900],
     },
     '&$active,&:active': {
-      borderLeft: `4px solid ${
-        theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[800]
-      }`,
+      borderLeftColor:
+        theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[800],
     },
   },
   secondaryItem: {