propose heading indentation within metabar toc

Author: bmuenzenmeyer

apps/site/components/Containers/MetaBar/index.stories.tsx

@@ -78,6 +78,21 @@ export const Default: Story = {
           depth: 3,
           data: { id: 'contact_and_future_updates' },
         },
+        {
+          value: 'Email',
+          depth: 4,
+          data: { id: 'email' },
+        },
+        {
+          value: 'Slack',
+          depth: 4,
+          data: { id: 'slack' },
+        },
+        {
+          value: '#node-website',
+          depth: 5, // h5s do not get shown
+          data: { id: 'node-website' },
+        },
       ],
     },
   },

apps/site/components/Containers/MetaBar/index.tsx

@@ -44,8 +44,13 @@ const MetaBar: FC<MetaBarProps> = ({ items, headings }) => {
             <dd>
               <ol>
                 {heading.map(head => (
-                  <li key={head.value}>
-                    <Link href={`#${head?.data?.id}`}>{head.value}</Link>
+                  <li
+                    key={head.value}
+                    className={
+                      head.depth === 3 ? 'pl-2' : head.depth === 4 ? 'pl-4' : ''
+                    }
+                  >
+                    <Link href={`#${head?.data?.id}`}> {head.value}</Link>
                   </li>
                 ))}
               </ol>