planning#320: Added toc as sidemenu

src/css/additional/reset-docusaurus-default-style.scss

@@ -2,3 +2,11 @@ button {
   border: none;
   background: transparent;
 }
+
+.table-of-contents a {
+  color: black;
+  &:hover {
+    color: #3578e5;
+    text-decoration: none;
+  }
+}
\ No newline at end of file

src/views/FAQList.jsx

@@ -38,58 +38,59 @@ export default function FAQList() {
   })
 
   return (
-    <section>
-      <div className="max-w-6xl mx-auto px-4 sm:px-6">
+      <div className="">
         <div className="py-12 md:py-20 border-t border-gray-200">
-          {/* Section header */}
-          <div className="max-w-3xl mx-auto text-center pb-10">
-            <h2 className="h2" id="FAQs">
-              FAQs
-            </h2>
-          </div>
-
-          <div className="toc-inline mb-10">
-            <TOCInline toc={toc} minHeadingLevel={1} maxHeadingLevel={2} />
-          </div>
-
-          {groups.map((group, i) => (
-            <div key={'g' + i}>
-              <div className="max-w-3xl mx-auto text-center pb-5" key={i}>
-                <a className="faq-anchor" id={group.anchor} />
-                <h3 className="h3">{group.name}</h3>
+          <div className="flex">
+              <div className="toc-inline flex-start pl-0 pr-12">
+                <TOCInline toc={toc} minHeadingLevel={1} maxHeadingLevel={2} />
               </div>
 
-              {group.subgroups.map((subgroup, j) => (
-                <div key={'sg' + j}>
-                  <div className="max-w-3xl mx-auto text-center pb-5">
-                    <a className="faq-anchor" id={subgroup.anchor} />
-                    <h4 className="h4">{subgroup.name}</h4>
-                  </div>
+              <div className="faq mx-auto px-4 sm:px-6">
+                <div className="max-w-3xl mx-auto text-center pb-10">
+                  <h2 className="h2" id="FAQs">
+                    FAQs
+                  </h2>
+                </div>
+                {groups.map((group, i) => (
+                  <div key={'g' + i}>
+                    <div className="max-w-3xl mx-auto text-center pb-5" key={i}>
+                      <a className="faq-anchor" id={group.anchor} />
+                      <h3 className="h3">{group.name}</h3>
+                    </div>
 
-                  <ul className="mx-auto">
-                    {subgroup.items.map((item, k) => (
-                      <FaqItem title={item.title} key={'i' + k}>
-                        <a className="faq-anchor" id={subgroup.anchor + k} />
-                        <JsxParser
-                          bindings={{
-                            JSON: JSON,
-                          }}
-                          components={{ Link, ApiLink }}
-                          jsx={item.content}
-                        />
-                      </FaqItem>
+                    {group.subgroups.map((subgroup, j) => (
+                      <div key={'sg' + j}>
+                        <div className="max-w-3xl mx-auto text-center pb-5">
+                          <a className="faq-anchor" id={subgroup.anchor} />
+                          <h4 className="h4">{subgroup.name}</h4>
+                        </div>
+
+                        <ul className="mx-auto">
+                          {subgroup.items.map((item, k) => (
+                            <FaqItem title={item.title} key={'i' + k}>
+                              <a className="faq-anchor" id={subgroup.anchor + k} />
+                              <JsxParser
+                                bindings={{
+                                  JSON: JSON,
+                                }}
+                                components={{ Link, ApiLink }}
+                                jsx={item.content}
+                              />
+                            </FaqItem>
+                          ))}
+                          <span
+                            className="block border-t border-gray-300 mb-10"
+                            aria-hidden="true"
+                          />
+                        </ul>
+                      </div>
                     ))}
-                    <span
-                      className="block border-t border-gray-300 mb-10"
-                      aria-hidden="true"
-                    />
-                  </ul>
-                </div>
-              ))}
-            </div>
-          ))}
+                  </div>
+                ))}
+              </div>
+              {/* Section header */}
+          </div>
         </div>
       </div>
-    </section>
   )
 }