Skip to content
Snippets Groups Projects
Commit dda35a97 authored by Julien MARGAIL's avatar Julien MARGAIL
Browse files

Merge branch 'feat/header' into 'main' 

Feat/header

See merge request onegeo/gatsby-theme-onegeo!14
parents a58b8e52 063c22fa
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 @ dda35a97
......@@ -70,6 +70,12 @@ interface TocProps {
}
export function Toc(props: TocProps): JSX.Element;
interface Iheader {
className?: string
logo?: any
}
export function Header(props: Iheader): JSX.Element;
interface LinkProps {
children?: React.ReactNode;
to: string;
......
index.js
+ 2
− 0
View file @ dda35a97
......@@ -34,3 +34,5 @@ export { default as Menu } from "./src/components/core/Menu";
// Menu components
export { default as MenuMobile } from "./src/components/core/MenuMobile";
// Header components
export { default as Header } from "./src/components/Header";
src/components/Header.tsx 0 → 100644
+ 68
− 0
View file @ dda35a97
import React from "react";
import Logo from "./core/Logo";
import Menu from "./core/Menu";
import logoSig from "../images/logo-egeo.png";
import MenuMobile from "./core/menuMobile";
import Profil from "./core/Profil";
interface Iheader {
className?: string
logo?: any
}
const Header = (props: Iheader) => {
const {className='', logo} = props
return (
<>
<div className="navbar bg-accent sticky top-0">
<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>
{/* ---------------MENU MOBILE------------------ */}
<MenuMobile />
{/* ---------------END MENU MOBILE------------------ */}
</div>
{/*----------------- LOGO --------------------------*/}
<div className="flex-shrink-0 flex items-center">
<Logo image={logoSig} />
</div>
{/*-----------------END LOGO --------------------------*/}
</div>
{/* ---------------MENU------------------ */}
<div className="navbar-center hidden lg:flex">
<Menu />
</div>
{/* ---------------END MENU------------------ */}
<div className="navbar-end">
<div className="form-control hidden sm:block">
<input
type="text"
placeholder="Search"
className="input input-bordered"
/>
</div>
{/* ---------------PROFIL------------------ */}
<Profil />
{/* ---------------END PROFIL------------------ */}
</div>
</div>
</>
);
};
export default Header;
src/components/core/Header.tsx 0 → 100644
+ 68
− 0
View file @ dda35a97
import React from "react";
import Logo from "./Logo";
import Menu from "./Menu";
import logoSig from "../../images/logo-egeo.png";
import MenuMobile from "./menuMobile";
import Profil from "./Profil";
interface Iheader {
className?: string
logo?: any
}
const Header = (props: Iheader) => {
const {className='', logo} = props
return (
<>
<div className="navbar bg-accent sticky top-0">
<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>
{/* ---------------MENU MOBILE------------------ */}
<MenuMobile />
{/* ---------------END MENU MOBILE------------------ */}
</div>
{/*----------------- LOGO --------------------------*/}
<div className="flex-shrink-0 flex items-center">
<Logo image={logoSig} />
</div>
{/*-----------------END LOGO --------------------------*/}
</div>
{/* ---------------MENU------------------ */}
<div className="navbar-center hidden lg:flex">
<Menu />
</div>
{/* ---------------END MENU------------------ */}
<div className="navbar-end">
<div className="form-control hidden sm:block">
<input
type="text"
placeholder="Search"
className="input input-bordered"
/>
</div>
{/* ---------------PROFIL------------------ */}
<Profil />
{/* ---------------END PROFIL------------------ */}
</div>
</div>
</>
);
};
export default Header;
src/components/core/Profil.tsx 0 → 100644
+ 37
− 0
View file @ dda35a97
import React from "react";
interface Props {
imgProfile?: string
}
const Profil = (props: Props) => {
const {imgProfile="https://placeimg.com/80/80/people"} = props
return (
<div className="dropdown dropdown-end">
<label tabIndex={0} className="btn btn-ghost btn-circle avatar">
<div className="w-10 rounded-full">
<img src={imgProfile}/>
</div>
</label>
<ul
tabIndex={0}
className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52"
>
<li>
<a className="justify-between">
Profile
<span className="badge">Actualité</span>
</a>
</li>
<li>
<a>Paramètre</a>
</li>
<li>
<a>Déconnexion</a>
</li>
</ul>
</div>
);
};
export default Profil;
src/pages-doc/doc/core/header.tsx 0 → 100644
+ 34
− 0
View file @ dda35a97
import React from 'react'
import { Content } from "@onegeo/gatsby-theme-onegeo";
import { Header } from "@onegeo/gatsby-theme-onegeo";
import { Link } from "gatsby";
const header = () => {
return (
<Content>
<div className="prose">
<Link to="/doc/core">Retour</Link>
<h1>Header</h1>
<h2>Props</h2>
<div className="mockup-code">
<pre>
<code>
{`interface Iheader {
className?: string
logo?: any
}`}
</code>
</pre>
</div>
<h2>Example</h2>
</div>
<div className="flex gap-6 m-4">
<Header />
</div>
</Content>
)
}
export default header
src/pages-doc/doc/header.tsx 0 → 100644
+ 34
− 0
View file @ dda35a97
import React from 'react'
import { Content } from "@onegeo/gatsby-theme-onegeo";
import { Header } from "@onegeo/gatsby-theme-onegeo";
import { Link } from "gatsby";
const header = () => {
return (
<Content>
<div className="prose">
<Link to="/doc">Retour</Link>
<h1>Header</h1>
<h2>Props</h2>
<div className="mockup-code">
<pre>
<code>
{`interface Iheader {
className?: string
logo?: any
}`}
</code>
</pre>
</div>
<h2>Example</h2>
</div>
<div className="flex gap-6 m-4">
<Header />
</div>
</Content>
)
}
export default header
src/pages-doc/doc/index.tsx
+ 2
− 0
View file @ dda35a97
......@@ -15,6 +15,8 @@ function index(): ReactElement {
<br></br>
<Link to="/doc/feature">Feature</Link>
<br></br>
<Link to="/doc/header">Header</Link>
<br></br>
<Link to="/doc/partners">Partners</Link>
<br></br>
<Link to="/doc/news">News</Link>
......
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