Header.tsx

import React from "react"

import { graphql, useStaticQuery } from "gatsby"
import { MenuAlt1Icon } from "@heroicons/react/outline"
import { Logo, Menu } from "@onegeo-suite/gatsby-theme-onegeo"
import { UserMenu } from "@onegeo-suite/gatsby-plugin-auth"
// import Profil from "./core/Profil"

interface IHeader {
    className?: string
    logo?: any
}

const Header = (props: IHeader) => {
    // Limit image height + preserve aspect ration gatsbyImageData(height: 52)
    // header is h-16 = 64px (if changed adjust also Layout.tsx)
    const dataDirectus = useStaticQuery(graphql`
        query getLogoHeader {
            directus {
                site {
                    logo {
                        id
                        imageFile {
                            childImageSharp {
                                gatsbyImageData(height: 52)
                            }
                            name
                            publicURL
                        }
                    }
                }
            }
        }
    `)

    const logo = dataDirectus.directus.site.logo?.imageFile

    return (
        <div className="navbar bg-base-100 fixed top-0 z-50 h-16 shadow">
            <div className="navbar-start">
                <div className="dropdown lg:hidden">
                    <label tabIndex={0} className="btn btn-ghost ">
                        <MenuAlt1Icon className="h-5 w-5" />
                    </label>
                    <Menu
                        name="header"
                        className="menu menu-compact dropdown-content bg-base-100 rounded-box z-50 mt-3 w-52 p-2 shadow"
                        userMenu={true}
                    />
                </div>
                <Logo image={logo} url="/" />
            </div>

            <div className="navbar-center hidden lg:flex">
                <Menu name="header" className="menu menu-horizontal p-0" />
            </div>

            <div className="navbar-end hidden lg:flex">
                {/* 
                <div className="form-control hidden sm:block">
                    <input
                        type="text"
                        placeholder="Search"
                        className="input input-bordered"
                    />
                </div>
                */}
                <UserMenu />
            </div>
        </div>
    )
}

export default Header