Link.tsx

// From https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-link/

import React from "react"
import { Link as GatsbyLink } from "gatsby"


interface Props {
    children?: React.ReactNode
    to: string
    activeClassName?: string
    partiallyActive?: any
    onClick?:any
    className?: any
}

// Since DOM elements <a> cannot receive activeClassName
// and partiallyActive, destructure the prop here and
// pass it only to GatsbyLink
const Link = ({
    children,
    to,
    activeClassName,
    partiallyActive,
    onClick,
    className,
    ...other
}: Props) => {
    // Si commence par http
    // Si contient
    //    geoportal | geonetwork | metabase | ...

    // Basé sur les données de l'api grapgql = liste des pages ?

    // Tailor the following test to your environment.
    // This example assumes that any internal link (intended for Gatsby)
    // will start with exactly one slash, and that anything else is external.
    const internal = /^\/(?!\/)/.test(to)

    // Use Gatsby Link for internal links, and <a> for others
    if (internal) {
        return (
            <GatsbyLink
                to={to}
                activeClassName={activeClassName}
                partiallyActive={partiallyActive}
                onClick={onClick}
                className = {className}
                {...other}
            >
                {children}
            </GatsbyLink>
        )
    }
    return (
        <a href={to} {...other} onClick={onClick} className = {className}>
            {children}
        </a>
    )
}

export default Link