Refine ToC and Sidebar styling

src/components/shared/icons.ts

@@ -70,9 +70,11 @@ export const icons = {
   redirect:
     'M913.852 702.796c-15.594-15.648-40.922-15.694-56.57-0.1l-57.204 57.006v-451.424c0-0.372-0.028-0.736-0.074-1.098-0.458-99.016-80.86-179.15-179.988-179.15-99.412 0-180 80.592-180 180 0 0.084 0.004 0.166 0.004 0.248h-0.004v343.504h-0.006c0 0.082 0.006 0.164 0.006 0.248 0 55.14-44.86 100-100 100s-100-44.86-100-100c0-0.084 0.006-0.166 0.006-0.248h-0.002v-483.752c0-22.092-17.91-40-40-40s-40.004 17.908-40.004 40v483.752c0 0.018 0.002 0.036 0.002 0.054 0 0.064-0.002 0.128-0.002 0.194 0 99.408 80.59 180 180 180 99.412 0 180-80.592 180-180 0-0.084-0.004-0.166-0.004-0.248h0.004v-343.504h0.008c0-0.082-0.008-0.164-0.008-0.248 0-55.138 44.86-100 100-100s100 44.862 100 100c0 0.084-0.008 0.166-0.008 0.248h0.070v451.008l-56.368-56.506c-15.602-15.642-40.93-15.67-56.566-0.070-7.836 7.814-11.754 18.066-11.754 28.32 0 10.218 3.894 20.442 11.68 28.252l124.692 125c15.594 15.632 40.91 15.67 56.554 0.084l125.434-125c15.652-15.598 15.692-40.92 0.102-56.57z',
   expand:
-    'M959.688 920.068l0.31-176c0.040-22.094-17.84-40.032-39.93-40.070-22.092-0.040-40.032 17.838-40.070 39.93l-0.142 79.672-235.734-235.732c-15.622-15.622-40.948-15.622-56.57 0s-15.622 40.948 0 56.568l235.442 235.442-78.946-0.1c-22.092-0.028-40.022 17.86-40.050 39.952-0.014 11.064 4.464 21.084 11.714 28.334 7.228 7.224 17.208 11.702 28.236 11.714l175.688 0.22c22.086 0.028 40.014-17.846 40.052-39.93zM920.178 64.228l-176-0.308c-22.094-0.040-40.032 17.84-40.070 39.93-0.040 22.092 17.838 40.032 39.93 40.070l79.672 0.14-235.732 235.734c-15.622 15.622-15.622 40.948 0 56.568s40.948 15.622 56.568 0l235.442-235.442-0.1 78.946c-0.028 22.092 17.86 40.022 39.952 40.050 11.064 0.014 21.084-4.464 28.334-11.714 7.224-7.228 11.702-17.208 11.714-28.236l0.22-175.688c0.026-22.082-17.846-40.010-39.93-40.050zM64.236 103.742l-0.308 176c-0.040 22.094 17.84 40.032 39.93 40.070 22.092 0.040 40.032-17.84 40.070-39.93l0.14-79.672 235.734 235.73c15.622 15.622 40.948 15.622 56.568 0s15.622-40.946 0-56.566l-235.442-235.442 78.946 0.098c22.092 0.028 40.022-17.86 40.050-39.95 0.014-11.066-4.464-21.086-11.714-28.336-7.228-7.222-17.208-11.7-28.236-11.714l-175.688-0.218c-22.084-0.026-40.012 17.844-40.050 39.93zM103.748 959.766l176 0.308c22.094 0.040 40.032-17.84 40.070-39.93 0.040-22.092-17.84-40.032-39.93-40.070l-79.672-0.14 235.73-235.734c15.622-15.622 15.622-40.948 0-56.568s-40.946-15.622-56.566 0l-235.442 235.442 0.098-78.946c0.028-22.092-17.86-40.022-39.95-40.050-11.066-0.014-21.086 4.464-28.336 11.714-7.222 7.228-11.7 17.208-11.714 28.236l-0.218 175.688c-0.026 22.082 17.844 40.010 39.93 40.050z',
+    'M84.5 981l184.3.3a41.9 41.9 0 10.2-83.7l-83.5-.2 246.9-246.9a41.9 41.9 0 00-59.3-59.2L126.6 837.9v-82.7A41.9 41.9 0 0043 755l-.2 184a41.9 41.9 0 0041.8 42M43 84.4l-.3 184.3a41.9 41.9 0 1083.8.2l.1-83.5 246.9 246.9a41.9 41.9 0 0059.2-59.2L186.3 126.6h82.6A41.9 41.9 0 00269 43l-184-.2a41.9 41.9 0 00-41.9 41.8M939.5 43l-184.3-.3a41.9 41.9 0 10-.2 83.8l83.5.1-246.9 246.9a41.9 41.9 0 0059.3 59.2l246.5-246.5v82.6a41.9 41.9 0 0083.7.1l.2-184c0-23-18.7-41.9-41.8-41.9M981 939.4l.3-184.3a41.9 41.9 0 10-83.8-.1l-.1 83.4-246.9-246.9a41.9 41.9 0 10-59.2 59.3l246.5 246.5h-82.6a41.9 41.9 0 00-.1 83.7l184 .3a41.9 41.9 0 0041.9-41.9',
   expandalt:
-    'M512.008 959.964c-10.236 0-20.47-3.904-28.282-11.712l-239.898-239.838c-15.624-15.62-15.624-40.946-0.006-56.57 15.622-15.622 40.948-15.624 56.568-0.004l211.618 211.562 211.712-211.658c15.624-15.618 40.952-15.616 56.568 0.004 15.62 15.624 15.618 40.95-0.006 56.57l-239.994 239.934c-7.808 7.808-18.044 11.712-28.28 11.712zM483.824 75.744l-239.994 239.934c-15.624 15.62-15.624 40.948-0.006 56.57s40.944 15.622 56.568 0.004l211.712-211.658 211.618 211.562c15.622 15.62 40.948 15.616 56.568-0.006 15.62-15.624 15.618-40.95-0.006-56.57l-239.898-239.836c-7.81-7.81-18.044-11.714-28.282-11.714s-20.47 3.906-28.28 11.714z',
+    'M479.7 13.4L205.4 287.6a45.7 45.7 0 1064.7 64.7l242-242 241.8 241.9a45.7 45.7 0 1064.7-64.7L544.4 13.4a45.6 45.6 0 00-64.7 0M512 1024a45.6 45.6 0 01-32.3-13.4L205.4 736.5a45.7 45.7 0 1164.7-64.7l241.8 241.8 242-241.9a45.7 45.7 0 1164.7 64.7l-274.3 274.2c-9 9-20.7 13.4-32.4 13.4',
+  collapse:
+    'M479.7 411L205.4 136.6a45.7 45.7 0 1164.7-64.6L512 314 753.9 72.2a45.7 45.7 0 1164.7 64.6L544.4 411a45.6 45.6 0 01-64.7 0M512 598.3a45.6 45.6 0 00-32.3 13.4L205.4 885.8a45.7 45.7 0 1064.7 64.7l241.8-241.8 242 242a45.7 45.7 0 1064.7-64.7L544.3 611.7c-9-8.9-20.7-13.4-32.4-13.4',
   grow:
     'M541.146 448.384c-1.694-0.216-3.408-0.37-5.162-0.37h-367.968c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v368.032c0 22.094 17.91 40 40 40h367.968c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-368.036c0-20.34-15.192-37.094-34.838-39.632zM208.016 816.046v-288.032h287.968v288.032h-287.968zM736.032 856.046c0 22.090-17.908 40-40 40-22.090 0-40-17.908-40-40v-487.902l-488.016 0.002c-22.090 0-40-17.91-40-40s17.908-40.002 40-40.002h528.016c1.754 0 3.468 0.152 5.162 0.37 19.646 2.538 34.838 19.292 34.838 39.63v527.902zM896.032 168.030v688.004c-0.002 22.088-17.91 39.996-40 39.996s-40.002-17.908-40.002-40c0 0 0.002-304.026 0.002-304.040v-343.96h-343.96c-0.014 0-304.040 0.002-304.040 0.002-22.090 0-40-17.91-40-40s17.908-40.002 40-40.002h688c1.754 0 3.468 0.152 5.162 0.37 19.646 2.536 34.838 19.29 34.838 39.63z',
   arrowleft:
@@ -312,4 +314,8 @@ export const icons = {
     'M130 85h332a45 45 0 0 1 8 89l-8 1H175v674h674V557a45 45 0 0 1 89-8l1 8v337c0 22-16 40-37 44l-8 1H130c-22 0-40-16-44-37l-1-8V130c0-22 16-40 37-44l8-1h332-332zm555 0h210l5 1-6-1a45 45 0 0 1 32 13l-5-4 3 3 2 1a46 46 0 0 1 12 24v2l1 5v209a45 45 0 0 1-89 8l-1-8V238L544 544a45 45 0 0 1-57 5l-7-5a45 45 0 0 1 0-64l306-305H685a45 45 0 0 1-8-89l8-1h209-209z',
   accessibility:
     'M512 0a512 512 0 110 1024A512 512 0 01512 0zm0 89.6a422.4 422.4 0 100 844.8 422.4 422.4 0 000-844.8zm262.2 250a40.9 40.9 0 01-27.5 49.3l-169.1 50.7c-8.2 2.7-15.1 11-13.7 20.5 1.3 27.4 1.5 76.5 7 98.4 12.9 59 82.4 214.4 91 233.6a56 56 0 014.9 19 40 40 0 01-40 40c-18 0-30.3-12.7-38.2-28.4A34096 34096 0 01510.9 664l-77.7 165.7-1.3 2.1a40 40 0 01-69.3-39.7c8.6-19 78-174.5 90.8-233.6 5.5-21.9 6-71 7.3-98.4a21 21 0 00-13.7-20.5l-169.1-50.7a40.7 40.7 0 01-27.5-50.7c6.9-20.5 30.2-30.1 50.9-24.6 0 0 154.6 49.3 209.6 49.3s213.8-50.7 213.8-50.7c20.6-5.5 44 6.8 49.5 27.4zm-264-171.2a76.7 76.7 0 110 153.4c-42.6 0-77-34.2-77-76.7 0-41 34.4-76.7 77-76.7z',
+  accessibilityalt:
+    'M512 0a512 512 0 110 1024A512 512 0 01512 0zm262.2 339.6c-5.5-20.6-28.9-32.9-49.5-27.4 0 0-158.8 50.7-213.8 50.7s-209.6-49.3-209.6-49.3c-20.7-5.5-44 4-51 24.6A40.7 40.7 0 00278 389l169 50.7a21 21 0 0113.8 20.5c-1.3 27.4-1.8 76.5-7.3 98.4-12.9 59.1-82.2 214.5-90.8 233.6a40 40 0 1070.6 37.5L511 664a34096 34096 0 0077.7 158.7c7.9 15.7 20.2 28.4 38.2 28.4a40 40 0 0040-40 56 56 0 00-4.8-19c-8.7-19.2-78.2-174.5-91.1-233.6-5.5-21.9-5.7-71-7-98.4-1.4-9.6 5.5-17.8 13.7-20.5l169.1-50.7a40.9 40.9 0 0027.5-49.3zm-264-171.2c-42.6 0-77 35.6-77 76.7a76.7 76.7 0 0077 76.7 76.7 76.7 0 100-153.4z',
+  markup:
+    'M1010.6 479.7L736.4 205.4a45.7 45.7 0 10-64.7 64.6l242 242L671.7 754a45.7 45.7 0 1064.7 64.6l274.1-274.2a45.6 45.6 0 000-64.6M0 511.9c0-11.7 4.5-23.4 13.4-32.3l274.1-274.2a45.7 45.7 0 1164.7 64.6L110.4 512l241.9 241.9a45.7 45.7 0 01-64.7 64.6L13.4 544.2C4.4 535.3 0 523.6 0 512',
 } as const;

src/components/table-of-contents/BulletLink.js

@@ -11,7 +11,8 @@ const StyledBulletLink = styled(({ isActive, ...rest }) => <Link {...rest} />)`
   line-height: 1.5;
   position: relative;
   z-index: 1;
-  ${(props) => props.isActive && `font-weight: ${typography.weight.bold};`}
+  ${(props) =>
+    props.isActive ? `font-weight: ${typography.weight.bold};` : `color: ${color.darker};`}
 
   &::after {
     position: absolute;

src/components/table-of-contents/MenuLink.js

@@ -5,7 +5,8 @@ import { Link } from '../Link';
 
 export const MenuLink = styled(({ isActive, ...rest }) => <Link {...rest} />)`
   outline: none;
-  color: ${(props) => (props.isActive ? color.secondary : color.darkest)};
+  color: ${(props) => (props.isActive ? color.secondary : color.darker)};
   font-weight: ${(props) => (props.isActive ? typography.weight.bold : typography.weight.regular)};
   line-height: 24px;
+  white-space: nowrap;
 `;

src/components/table-of-contents/TableOfContentsItems.js

@@ -32,12 +32,14 @@ const getItemComponent = (itemType) => {
 
 const TopLevelMenuToggle = styled(Link).attrs({ isButton: true, tertiary: true })`
   font-weight: ${typography.weight.bold};
+  word-break: break-word;
+  text-align: left;
 `;
 
 const ArrowIcon = styled(Icon).attrs({ icon: 'arrowright' })`
   && {
-    width: 14px;
-    width: 14px;
+    width: 12px;
+    width: 12px;
     color: ${color.mediumdark};
     transform: translateY(1px) ${(props) => props.isOpen && `rotate(90deg)`};
     ${(props) => (props.isTopLevel ? `margin-right: 8px;` : `margin-left: 8px;`)}
@@ -94,14 +96,6 @@ const List = styled.ul`
   list-style-type: none;
   padding: 0;
   margin: 0;
-  ${(props) =>
-    !props.isTopLevel &&
-    `
-    padding-left: 22px;
-    padding-top: 12px;
-    display: flex;
-    flex-direction: column;
-  `}
 
   li {
     padding-top: 12px;
@@ -113,9 +107,28 @@ const List = styled.ul`
 
   ${(props) =>
     props.isTopLevel &&
-    `
+    `  
     > li {
       padding-top: 20px;
+
+      ul, ol {
+        padding-top: 12px;
+        display: flex;
+        flex-direction: column;
+      }
+
+      > ul { 
+        padding-left: 44px;
+
+        > li ul {
+          padding-left: 20px;
+        }
+      }
+
+      > ol {
+        padding-left: 20px;
+
+      }
     }
   `}
 `;
@@ -145,6 +158,7 @@ TableOfContentsItems.propTypes = {
   className: PropTypes.string,
   currentPath: PropTypes.string.isRequired,
   isTopLevel: PropTypes.bool.isRequired,
+
   items: PropTypes.arrayOf(
     PropTypes.shape({
       type: PropTypes.oneOf(Object.values(ITEM_TYPES)).isRequired,