add options sidebar

docs/OPTIONS.md

@@ -183,3 +183,22 @@ options :  {
 }
 
 ```
+
+### page
+
+```
+options :  {
+    class : {
+        body
+        content
+        main
+        sidebar : {
+            main
+            download
+            links
+        }
+    }
+    theme
+}
+
+```

index.d.ts

@@ -278,6 +278,7 @@ interface ISideBar {
     documents?: object[]
     links?: object[]
     toc?: boolean
+    options?: any
 }
 export function SideBar(props: ISideBar): JSX.Element
 interface CardListProps {

src/components/core/LinkList.tsx

 import React from "react"
-import { Link } from "@onegeo-suite/gatsby-theme-onegeo"
+import { Link, twMerge } from "@onegeo-suite/gatsby-theme-onegeo"
 
 interface ILinkList {
     title?: string
@@ -15,8 +15,18 @@ const LinkList = (props: ILinkList) => {
     const oClass = options.class || {}
 
     return (
-        <aside className="bg-base-100 mb-5 max-w-md rounded-xl p-6 lg:shadow-lg">
-            <p className="text-base-300 text-sm font-bold uppercase tracking-widest">
+        <aside
+            className={twMerge(
+                "bg-base-100 rounded-xl p-6 lg:shadow-lg",
+                oClass.main
+            )}
+        >
+            <p
+                className={twMerge(
+                    "text-base-300 text-sm font-bold uppercase tracking-widest",
+                    oClass.title
+                )}
+            >
                 {title}
             </p>
             <ul className="mt-2">
@@ -26,7 +36,10 @@ const LinkList = (props: ILinkList) => {
                             <Link
                                 to={item.url}
                                 target="_blank"
-                                className="overflow-hidden text-ellipsis"
+                                className={twMerge(
+                                    "overflow-hidden text-ellipsis",
+                                    oClass.item
+                                )}
                                 {...options}
                             >
                                 {item.name || item.url}

src/components/core/SideBar.tsx

 import React from "react"
-import { LinkList, Toc } from "@onegeo-suite/gatsby-theme-onegeo"
+import { LinkList, Toc, twMerge } from "@onegeo-suite/gatsby-theme-onegeo"
 
 interface ISideBar {
     toc?: boolean
     documents?: object[]
     links?: object[]
+    options?: any
 }
 
 const SideBar = (props: ISideBar) => {
     const { documents = [], links = [], toc = false } = props
+    const options = props.options ?? {}
     if (documents?.length == 0 && links?.length == 0) return null
 
     // Format list for component LinkList
@@ -28,16 +30,26 @@ const SideBar = (props: ISideBar) => {
     })
 
     return (
-        <div className="sticky top-24 h-full">
+        <div
+            className={twMerge(
+                "sticky top-24 flex h-full flex-col gap-2",
+                options.main
+            )}
+        >
             {toc && <Toc />}
 
             <LinkList
                 title="Téléchargements"
                 links={documentsData}
-                options={{ download: true }}
+                options={options.download}
+                // options={{ download: true }}
             ></LinkList>
 
-            <LinkList title="Liens" links={linkData}></LinkList>
+            <LinkList
+                title="Liens"
+                links={linkData}
+                options={options.links}
+            ></LinkList>
         </div>
     )
 }

src/templates/page.tsx

@@ -54,6 +54,7 @@ const PageTemplate = ({ data }: PageProps<IPageContext>) => {
                             documents={documents}
                             links={links}
                             toc={toc}
+                            options={oClass.sidebar}
                         />
                     ) : null}
                     <div
@@ -81,6 +82,7 @@ const PageTemplate = ({ data }: PageProps<IPageContext>) => {
                             documents={documents}
                             links={links}
                             toc={toc}
+                            options={oClass.sidebar}
                         />
                     ) : null}
                 </Content>