new menu component

index.d.ts

@@ -67,6 +67,9 @@ export function Link(props: LinkProps): JSX.Element;
 interface SearchProps {}
 export function Search(props: SearchProps): JSX.Element;
 
+interface IMenu {}
+export function Menu(props: IMenu): JSX.Element;
+
 interface Ilogo {
   to?: string;
   className?: string;

index.js

@@ -18,3 +18,6 @@ export { default as Hero } from "./src/components/Hero";
 
 // Logo components
 export { default as Logo } from "./src/components/core/Logo";
+
+// Menu components
+export { default as Menu } from "./src/components/core/Menu";

src/components/core/Menu.tsx

+import React from "react";
+
+interface IMenu {
+    logo?: any
+}
+
+const Menu = (props:IMenu) => {
+  const  {logo} = props
+  const menu = [
+    {
+      title: "Decouvrir",
+    },
+    {
+      title: "Actualités",
+    },
+    {
+      title: "A propos",
+    },
+    {
+      title: "Mentions légales",
+    },
+    {
+      title: "Parents",
+      subMenu: [
+        {
+          title: "sousmenu1",
+        },
+        {
+          title: "sousmenu2",
+        },
+      ],
+    },
+  ];
+
+  return (
+    <>
+        <div className="navbar-start">
+            <div className="dropdown">
+                <label tabIndex={0} className="btn btn-ghost lg:hidden">
+                    <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-5 w-5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    >
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M4 6h16M4 12h8m-8 6h16"
+                    />
+                    </svg>
+                </label>
+
+                {/* <MenuMobil /> */}
+                <div>
+                    <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>
+                </div>
+            {/* <End MenuMobil /> */}
+                <div className="flex-shrink-0 flex items-center">
+                    {logo}
+                </div>
+            </div>
+        </div>
+
+        {/* MENU CLASSIQUE */}
+        <div className="navbar-center hidden lg:flex">
+            <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>
+        </div>
+        {/* END MENU CLASSIQUE */}
+    </>
+  );
+};
+
+export default Menu;

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

@@ -22,6 +22,8 @@ function index(): ReactElement {
         <Link to="/doc/core/map">Map</Link>
         <br></br>
         <Link to="/doc/core/logo">Logo</Link>
+        <br></br>
+        <Link to="/doc/core/menu">Menu</Link>
       </div>
     </Content>
   );

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

+import React from 'react'
+import { Content } from "@onegeo/gatsby-theme-onegeo";
+import { Menu } 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="flex gap-6 m-4">
+        <Menu />
+      </div>
+    </Content>
+  )
+}
+
+export default menu