diff --git a/gatsby-config.js b/gatsby-config.js
index ed377f7e3f52fa09ad041ea0a2ba8be3c2bc2415..974c880a88000e0738d45fe6530160cc909226c6 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -83,7 +83,8 @@ module.exports = {
},
},
},
- /*{
+ /*
+ {
resolve: `gatsby-plugin-typesense`,
options: {
publicDir: `./public`, // Required
@@ -144,8 +145,8 @@ module.exports = {
],
},
},
- }, */
-
+ },
+ */
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
diff --git a/index.d.ts b/index.d.ts
index 834494ef7e5b71a8ce43d59a771a951c72130aab..427d44c10deea0bbfd0034a50c45db55cee21584 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -38,7 +38,7 @@ export function Button(props: ButtonProps): JSX.Element;
interface CardProps {
title?: string;
content?: string;
- image?: string | IGatsbyImageData;
+ image?: string;
to?: string;
anime?: boolean;
layout?: "top" | "left";
@@ -93,6 +93,12 @@ export function Carousel(props: Image): JSX.Element;
interface SearchProps {}
export function Search(props: SearchProps): JSX.Element;
+interface IMenu {}
+export function Menu(props: IMenu): JSX.Element;
+
+interface IMenuMobile {}
+export function MenuMobile(props: IMenu): JSX.Element;
+
interface Ilogo {
to?: string;
className?: string;
@@ -126,13 +132,6 @@ interface HeroProps {
*/
export function Hero(props: HeroProps): JSX.Element;
-interface CardListProps {
- cards?: CardProps[];
- layout?: 'row' | 'col' | 'grid';
- className?: string;
- anime?: boolean;
-}
-export function CardList(props: CardListProps): JSX.Element;
interface MapProps {
idMap: number;
}
@@ -158,5 +157,12 @@ interface ImageProps {
classname?: string;
}
export function Image(props: ImageProps): JSX.Element;
+interface CardListProps {
+ cards?: CardProps[];
+ layout?: 'row' | 'col' | 'grid';
+ className?: string;
+ anime?: boolean;
+}
+export function CardList(props: CardListProps): JSX.Element;
declare module "@onegeo/gatsby-theme-onegeo";
diff --git a/index.js b/index.js
index eb7ba980893aad243385c68aedf2cd768b10b6f1..1c5c3698d755a54276700a0ecb55bb7f2b54ba2e 100644
--- a/index.js
+++ b/index.js
@@ -15,6 +15,7 @@ export { default as Toc } from "./src/components/core/Toc";
export { default as Map } from "./src/components/core/Map";
export { default as Image } from "./src/components/core/Image";
export {default as Stats} from "./src/components/Stats";
+export { default as CardList } from "./src/components/core/CardList";
// Feature components
export { default as Hero } from "./src/components/Hero";
@@ -26,3 +27,8 @@ export { default as Carousel } from "./src/components/core/Carousel";
// Logo components
export { default as Logo } from "./src/components/core/Logo";
+// Menu components
+export { default as Menu } from "./src/components/core/Menu";
+
+// Menu components
+export { default as MenuMobile } from "./src/components/core/MenuMobile";
diff --git a/src/components/core/Menu.tsx b/src/components/core/Menu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0c482e83dcc45baa7ca51e6c1ed87578c1b96102
--- /dev/null
+++ b/src/components/core/Menu.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+
+const Menu = () => {
+ const menu = [
+ {
+ title: "Decouvrir",
+ },
+ {
+ title: "Actualités",
+ },
+ {
+ title: "A propos",
+ },
+ {
+ title: "Mentions légales",
+ },
+ {
+ title: "Parents",
+ subMenu: [
+ {
+ title: "sousmenu1",
+ },
+ {
+ title: "sousmenu2",
+ },
+ ],
+ },
+ ];
+
+ return (
+ <>
+ {/* MENU MOBILE */}
+ <ul className="menu menu-horizontal p-0">
+ {menu.map((item: any, key: number) => {
+ return (
+ <li key={key}>
+ <a>
+ {item.title}
+ {item.subMenu && (
+ <svg
+ className="fill-current"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 24 24"
+ >
+ <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
+ </svg>
+ )}
+ </a>
+ {item.subMenu && (
+ <ul className="p-2 z-50 bg-slate-200">
+ {item.subMenu.map((itemsm: any, idx: number) => {
+ return (
+ <li key={idx}>
+ <a className="text-neutral-content hover:bg-submenu active:bg-allsubmenu z-50">
+ {itemsm.title}
+ </a>
+ </li>
+ );
+ })}
+ </ul>
+ )}
+ </li>
+ );
+ })}
+ </ul>
+ {/* END MENU MOBILE */}
+ </>
+ );
+};
+
+export default Menu;
diff --git a/src/components/core/MenuMobile.tsx b/src/components/core/MenuMobile.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0d566f56c10b66cc41527bdf8eb42c00fc795954
--- /dev/null
+++ b/src/components/core/MenuMobile.tsx
@@ -0,0 +1,74 @@
+import React from "react";
+
+const MenuMobile = () => {
+ const menu = [
+ {
+ title: "Decouvrir",
+ },
+ {
+ title: "Actualités",
+ },
+ {
+ title: "A propos",
+ },
+ {
+ title: "Mentions légales",
+ },
+ {
+ title: "Parents",
+ subMenu: [
+ {
+ title: "sousmenu1",
+ },
+ {
+ title: "sousmenu2",
+ },
+ ],
+ },
+ ];
+
+ return (
+ <>
+ {/* MENU CLASSIQUE */}
+ <ul
+ tabIndex={0}
+ className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52 z-50"
+ >
+ {menu.map((item: any, key: number) => {
+ return (
+ <li key={key}>
+ <a>
+ {item.title}
+ {item.subMenu && (
+ <svg
+ className="fill-current"
+ xmlns="http://www.w3.org/2000/svg"
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ >
+ <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
+ </svg>
+ )}
+ </a>
+ {item.subMenu && (
+ <ul className="p-2 z-10">
+ {item.subMenu.map((itemsm: any, idx: number) => {
+ return (
+ <li key={idx}>
+ <a>{itemsm.title}</a>
+ </li>
+ );
+ })}
+ </ul>
+ )}
+ </li>
+ );
+ })}
+ </ul>
+ {/* END MENU CLASSIQUE */}
+ </>
+ );
+};
+
+export default MenuMobile;
diff --git a/src/pages-doc/doc/core/index.tsx b/src/pages-doc/doc/core/index.tsx
index 0d2f83c7b5d534220b2a692825c77ce1f27e5873..1298832ca84c6b1a4c7c51689e181d6bbf28e55e 100644
--- a/src/pages-doc/doc/core/index.tsx
+++ b/src/pages-doc/doc/core/index.tsx
@@ -29,6 +29,8 @@ function index(): ReactElement {
<br></br>
<Link to="/doc/core/logo">Logo</Link>
<br></br>
+ <Link to="/doc/core/menu">Menu</Link>
+ <br></br>
<Link to="/doc/core/image">Image</Link>
<br></br>
<Link to="/doc/core/stats">Stats</Link>
diff --git a/src/pages-doc/doc/core/menu.tsx b/src/pages-doc/doc/core/menu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..270f5dd90686446b725001102bb57e9822ba27fe
--- /dev/null
+++ b/src/pages-doc/doc/core/menu.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import { Content } from "@onegeo/gatsby-theme-onegeo";
+import { Menu, MenuMobile } from "@onegeo/gatsby-theme-onegeo";
+import { Link } from "gatsby";
+
+const menu = () => {
+ return (
+ <Content>
+ <div className="prose">
+ <Link to="/doc/core">Retour</Link>
+
+ <h1>Menu</h1>
+ <h2>Props</h2>
+ <div className="mockup-code">
+ <pre>
+ <code>
+ {`const menu = [
+ {
+ title: "Decouvrir",
+ },
+ {
+ title: "Actualités",
+ },
+ {
+ title: "A propos",
+ },
+ {
+ title: "Mentions légales",
+ },
+ {
+ title: "Parents",
+ subMenu: [
+ {
+ title: "sousmenu1",
+ },
+ {
+ title: "sousmenu2",
+ },
+ ],
+ },
+ ];`}
+ </code>
+ </pre>
+ </div>
+
+ <h2>Example</h2>
+ </div>
+ <div className='mt-5'>
+ <h3 className='underline underline-offset-1'>Menu classique</h3>
+ <div className="flex gap-6 m-4">
+ <Menu />
+ </div>
+ </div>
+
+ <div>
+ <h3 className='underline underline-offset-1'>Menu mobile</h3>
+ <div className="flex gap-6 m-4">
+ <MenuMobile />
+ </div>
+ </div>
+ </Content>
+ )
+}
+
+export default menu