Skip to content
Snippets Groups Projects
Commit 148f9ef8 authored by Manoa Harinjo's avatar Manoa Harinjo
Browse files

add sidebar in page and components sidebar

parent 750da23a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
index.d.ts
+ 6
− 0
View file @ 148f9ef8
...@@ -242,6 +242,12 @@ interface Iimage { ...@@ -242,6 +242,12 @@ interface Iimage {
className?: string className?: string
} }
export function Image(props: Iimage): JSX.Element export function Image(props: Iimage): JSX.Element
interface ISideBar {
documents?: object[]
links?: object[]
}
export function SideBar(props: ISideBar): JSX.Element
interface CardListProps { interface CardListProps {
cards?: CardProps[] cards?: CardProps[]
layout?: "row" | "col" | "grid" layout?: "row" | "col" | "grid"
......
index.js
+ 3
− 0
View file @ 148f9ef8
...@@ -66,6 +66,9 @@ export { default as Marquee } from "./src/components/core/Marquee" ...@@ -66,6 +66,9 @@ export { default as Marquee } from "./src/components/core/Marquee"
// Text component // Text component
export { default as Text } from "./src/components/Text" export { default as Text } from "./src/components/Text"
// Sidebar
export { default as SideBar } from "./src/components/core/SideBar"
export { export {
cleanHtml, cleanHtml,
stripImg, stripImg,
......
src/components/core/SideBar.tsx 0 → 100644
+ 71
− 0
View file @ 148f9ef8
import { Link } from "@onegeo-suite/gatsby-theme-onegeo"
import React from "react"
interface ISideBar {
documents?: object[]
links?: object[]
}
const SideBar = (props: ISideBar) => {
const { documents = [], links = [] } = props
if (documents?.length == 0 && links?.length == 0) return null
return (
<div className="bg-base-100 sticky top-24 mx-5 flex h-full flex-col rounded-xl shadow-lg md:w-1/4">
{documents.length > 0 && (
<div className="p-6">
<p className="text-base-300 text-sm font-bold uppercase tracking-widest">
Téléchargements
</p>
<div className="mt-2 ">
{documents.map((item: any, key: number) => {
const file =
item.directus_files_id.imageFile.publicURL
return (
<ul className="leading-8" key={key}>
<li>
<a href={file} target="_blank" download>
{
item.directus_files_id
.filename_download
}
</a>
</li>
</ul>
)
})}
</div>
</div>
)}
{links?.length > 0 && (
<div className="p-6">
<p className="text-base-300 text-sm font-bold uppercase tracking-widest">
Liens
</p>
<div className="mt-2 ">
{links.map((item: any) => {
return (
<ul className="leading-8" key={item.id}>
<li>
<Link
to={item.links_id.url}
target="_blank"
>
<div className="overflow-hidden text-ellipsis">
{" "}
{item.links_id.url}{" "}
</div>
</Link>
</li>
</ul>
)
})}
</div>
</div>
)}
</div>
)
}
export default SideBar
src/layouts/layout.tsx
+ 24
− 2
View file @ 148f9ef8
...@@ -7,10 +7,13 @@ import { useStaticQuery, graphql } from "gatsby" ...@@ -7,10 +7,13 @@ import { useStaticQuery, graphql } from "gatsby"
import SEO from "./seo" import SEO from "./seo"
import Header from "../components/Header" import Header from "../components/Header"
import Footer from "../components/Footer" import Footer from "../components/Footer"
import { SideBar } from "@onegeo-suite/gatsby-theme-onegeo"
interface Props { interface Props {
children: React.ReactNode children: React.ReactNode
UserMenu?: React.ReactNode UserMenu?: React.ReactNode
theme?: string theme?: string
documents?: object[]
links?: object[]
} }
/** /**
...@@ -18,7 +21,12 @@ interface Props { ...@@ -18,7 +21,12 @@ interface Props {
* @param {Props} props - Page content * @param {Props} props - Page content
* @returns {JSX.Element} The complete page * @returns {JSX.Element} The complete page
*/ */
const Layout = ({ children, theme }: Props): JSX.Element => { const Layout = ({
children,
theme,
documents = [],
links = [],
}: Props): JSX.Element => {
const data = useStaticQuery(graphql` const data = useStaticQuery(graphql`
query { query {
directus { directus {
...@@ -35,6 +43,8 @@ const Layout = ({ children, theme }: Props): JSX.Element => { ...@@ -35,6 +43,8 @@ const Layout = ({ children, theme }: Props): JSX.Element => {
} }
`) `)
let position = "right"
return ( return (
<> <>
<Helmet> <Helmet>
...@@ -60,7 +70,19 @@ const Layout = ({ children, theme }: Props): JSX.Element => { ...@@ -60,7 +70,19 @@ const Layout = ({ children, theme }: Props): JSX.Element => {
*/} */}
<div className="pb-24 pt-16"> <div className="pb-24 pt-16">
<Header /> <Header />
{children} {documents.length > 0 || links.length > 0 ? (
<div className="mb-8 mt-8 flex h-full flex-wrap gap-6 md:flex-nowrap">
{position === "left" ? (
<SideBar documents={documents} links={links} />
) : null}
{children}
{position === "right" ? (
<SideBar documents={documents} links={links} />
) : null}
</div>
) : (
<>{children}</>
)}
</div> </div>
<Footer className="absolute bottom-0 h-24" /> <Footer className="absolute bottom-0 h-24" />
</div> </div>
......
src/templates/news.tsx
+ 60
− 59
View file @ 148f9ef8
...@@ -12,67 +12,68 @@ import { ...@@ -12,67 +12,68 @@ import {
Content, Content,
Link, Link,
} from "@onegeo-suite/gatsby-theme-onegeo" } from "@onegeo-suite/gatsby-theme-onegeo"
import SideBar from "../components/core/SideBar"
const SideBar = ({ documents, links }) => { // const SideBar = ({ documents, links }) => {
if (documents?.length == 0 && links?.length == 0) return null // if (documents?.length == 0 && links?.length == 0) return null
return ( // return (
<div className="bg-base-100 sticky top-24 flex h-full flex-col rounded-xl shadow-lg md:w-1/4"> // <div className="bg-base-100 sticky top-24 flex h-full flex-col rounded-xl shadow-lg md:w-1/4">
{documents?.length > 0 && ( // {documents?.length > 0 && (
<div className="p-6"> // <div className="p-6">
<p className="text-base-300 text-sm font-bold uppercase tracking-widest"> // <p className="text-base-300 text-sm font-bold uppercase tracking-widest">
Téléchargements // Téléchargements
</p> // </p>
<div className="mt-2 "> // <div className="mt-2 ">
{documents.map((item: any, key: number) => { // {documents.map((item: any, key: number) => {
const file = // const file =
item.directus_files_id.imageFile.publicURL // item.directus_files_id.imageFile.publicURL
return (
<ul className="leading-8" key={key}>
<li>
<a href={file} target="_blank" download>
{
item.directus_files_id
.filename_download
}
</a>
</li>
</ul>
)
})}
</div>
</div>
)}
{links?.length > 0 && ( // return (
<div className="p-6"> // <ul className="leading-8" key={key}>
<p className="text-base-300 text-sm font-bold uppercase tracking-widest"> // <li>
Liens // <a href={file} target="_blank" download>
</p> // {
<div className="mt-2 "> // item.directus_files_id
{links.map((item: any) => { // .filename_download
return ( // }
<ul className="leading-8" key={item.id}> // </a>
<li> // </li>
<Link // </ul>
to={item.links_id.url} // )
target="_blank" // })}
> // </div>
<div className="overflow-hidden text-ellipsis"> // </div>
{" "} // )}
{item.links_id.url}{" "}
</div> // {links?.length > 0 && (
</Link> // <div className="p-6">
</li> // <p className="text-base-300 text-sm font-bold uppercase tracking-widest">
</ul> // Liens
) // </p>
})} // <div className="mt-2 ">
</div> // {links.map((item: any) => {
</div> // return (
)} // <ul className="leading-8" key={item.id}>
</div> // <li>
) // <Link
} // to={item.links_id.url}
// target="_blank"
// >
// <div className="overflow-hidden text-ellipsis">
// {" "}
// {item.links_id.url}{" "}
// </div>
// </Link>
// </li>
// </ul>
// )
// })}
// </div>
// </div>
// )}
// </div>
// )
// }
interface Idata { interface Idata {
directus: { directus: {
......
src/templates/page.tsx
+ 17
− 2
View file @ 148f9ef8
...@@ -28,7 +28,7 @@ interface IPageContext { ...@@ -28,7 +28,7 @@ interface IPageContext {
// [&_h1]:scroll-mt-28 [&_h2]:scroll-mt-28 [&_h3]:scroll-mt-28 [&_h4]:scroll-mt-28 text-secondary-content // [&_h1]:scroll-mt-28 [&_h2]:scroll-mt-28 [&_h3]:scroll-mt-28 [&_h4]:scroll-mt-28 text-secondary-content
const PageTemplate = ({ data }: PageProps<IPageContext>) => { const PageTemplate = ({ data }: PageProps<IPageContext>) => {
const news = data.directus.pages[0] const news = data.directus.pages[0]
const { title, content, sections, toc = false } = news const { title, content, sections, toc = false, documents, links } = news
const idsSections = sections.map((section: any) => section.sections_id.id) const idsSections = sections.map((section: any) => section.sections_id.id)
...@@ -38,7 +38,7 @@ const PageTemplate = ({ data }: PageProps<IPageContext>) => { ...@@ -38,7 +38,7 @@ const PageTemplate = ({ data }: PageProps<IPageContext>) => {
return ( return (
<PageContext.Provider value={oContext}> <PageContext.Provider value={oContext}>
<Layout theme={options.theme}> <Layout theme={options.theme} documents={documents} links={links}>
<Content <Content
className={twMerge( className={twMerge(
"mt-8 flex flex-wrap gap-6 md:flex-nowrap", "mt-8 flex flex-wrap gap-6 md:flex-nowrap",
...@@ -89,6 +89,21 @@ export const query = graphql` ...@@ -89,6 +89,21 @@ export const query = graphql`
slug slug
toc toc
options options
links {
id
links_id {
url
}
}
documents {
directus_files_id {
id
filename_download
imageFile {
publicURL
}
}
}
} }
} }
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment