add toc on page and toc responsive

src/components/core/Toc.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react"
 import { useHeadsObserver } from "./utils/hook"
 
 const rnd = (() => {
-    const gen = (min, max) =>
+    const gen = (min: number, max: number) =>
         max++ &&
         [...Array(max - min)].map((s, i) => String.fromCharCode(min + i))
 
@@ -13,14 +13,14 @@ const rnd = (() => {
         alphaUpper: gen(65, 90),
     }
 
-    function* iter(len, set) {
+    function* iter(len: number, set: any) {
         if (set.length < 1) set = Object.values(sets).flat()
         for (let i = 0; i < len; i++)
             yield set[(Math.random() * set.length) | 0]
     }
 
     return Object.assign(
-        (len, ...set) => [...iter(len, set.flat())].join(""),
+        (len:number, ...set:any) => [...iter(len, set.flat())].join(""),
         sets
     )
 })()
@@ -36,7 +36,7 @@ let navulliStyle = {
     marginBottom: "15px",
 } as React.CSSProperties
 
-const getClassName = (level) => {
+const getClassName = (level: number) => {
     switch (level) {
         case 1:
             navulliStyle = {
@@ -89,7 +89,7 @@ const Toc = (props: Props) => {
 
     return (
         <aside
-            className={`w-[20%] fixed right-0 top-auto h-screen bg-slate-50 p-5 ${className}`}
+            className={`w-72 min-w-min fixed right-0 h-screen bg-slate-50 p-5 ${className}`}
         >
             <div className="text-2xl pb-5 flex flex-row">
                 <svg
@@ -110,7 +110,7 @@ const Toc = (props: Props) => {
             </div>
             <nav style={navStyle}>
                 <ul style={navulliStyle}>
-                    {headings.map((heading) => (
+                    {headings.map((heading:any) => (
                         <li
                             key={heading.id}
                             className={getClassName(heading.level)}

src/layouts/content.tsx

@@ -18,7 +18,7 @@ const Content = ({ children, className = "" }: Props): JSX.Element => {
   return (
     <div
       className={
-        "max-w-7xl mx-auto mt-20 px-5 text-gray-800 pb-10 " + className
+        "max-w-7xl mt-20 px-5 text-gray-800 pb-10 " + className
       }
     >
       {children}

src/pages-doc/doc/core/toc.tsx

@@ -4,7 +4,7 @@ import { Toc, Link } from "@onegeo/gatsby-theme-onegeo";
 function tocIndex() {
   return (
     <>
-      <Toc className="" />
+      <Toc className="top-auto" />
         <div className="mr-[25%] ml-4">
           <div className="prose">
             <Link to="/doc/core">Retour</Link>

src/templates/Page.tsx

 import React from "react"
 import { graphql, PageProps } from "gatsby"
 import { Layout, Content, Sections } from "@onegeo/gatsby-theme-onegeo"
+import { Toc } from "@onegeo/gatsby-theme-onegeo";
 
 interface ISection {
     sections_id: string[] | []
@@ -13,6 +14,7 @@ interface IPageContext {
             content: string
             slug: string
             sections: ISection[] | []
+            toc: boolean
         }
     }
 }
@@ -20,13 +22,16 @@ interface IPageContext {
 const PageTemplate = ({ data }: PageProps<IPageContext>) => {
 
     const news = data.directus.pages[0]
-    const { title, content, sections } = news
+    const { title, content, sections, toc = false} = news
 
     const idsSections = sections.map((section: any) => section.sections_id.id)
 
     return (
         <Layout>
-            <Content>
+            {
+                (toc) ? <Toc className="hidden md:block top-14" /> : <></>
+            }
+            <Content className={`${toc ? "mx-0 md:mr-72 md:ml-2" : "mx-auto" } `}>
                 {title && <h1 className="text-3xl font-extrabold">{title}</h1>}
                 {content && (
                     <div
@@ -57,6 +62,7 @@ export const query = graphql`
                 id
                 title
                 slug
+                toc
             }
         }
     }