94 lines
3.7 KiB
JavaScript

'use client';
import React, { useEffect, useState } from "react";
import Nav from "./Nav";
import Link from "next/link";
import Image from "next/image";
import LoginButton from "./LoginButton";
import SocialLinks from "../contact/SocialLinks";
import { getSiteSettings } from "@/utlis/siteSettings";
export default function Header15() {
const [siteSettings, setSiteSettings] = useState({});
useEffect(() => {
getSiteSettings().then(setSiteSettings);
}, []);
const siteName = siteSettings.site_name || "Jsite";
const mobile = siteSettings.mobile;
const tel = siteSettings.tel;
const email = siteSettings.email;
return (
<header className="relative w-full !bg-[#fefefe]">
<nav className="navbar navbar-expand-lg transparent navbar-light w-full">
<div className="w-full flex flex-row flex-nowrap items-center px-4">
<div className="navbar-brand">
<Link href={`/`}>
<Image
srcSet="/assets/img/logo-dark@2x.png 2x"
alt="image"
src="/assets/img/logo-dark.png"
width={96}
height={24}
/>
</Link>
</div>
<div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div className="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
<h3 className="!text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
{siteName}
</h3>
<button
type="button"
className="btn-close btn-close-white !mr-[-0.75rem] m-0 p-0 leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out border-0 motion-reduce:transition-none before:text-[1.05rem] before:text-white before:content-['\\ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:!flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(255,255,255,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)]"
data-bs-dismiss="offcanvas"
aria-label="Close"
/>
</div>
<div className="offcanvas-body flex flex-col !h-full">
<Nav color="#22b573" />
{/* /.navbar-nav */}
<div className="offcanvas-footer xl:!hidden lg:!hidden">
<div>
{mobile}
<br />
{tel}
<br />
<a
href={`mailto:${email}`}
className="link-inverse"
>
{email}
</a>
<SocialLinks />
{/* /.social */}
</div>
</div>
{/* /.offcanvas-footer */}
</div>
{/* /.offcanvas-body */}
</div>
{/* /.navbar-collapse */}
<div className="navbar-other w-full !flex !ml-auto">
<ul className="navbar-nav !flex-row !items-center !ml-auto">
<li className="nav-item dropdown language-select uppercase group">
<LoginButton color="#22b573" />
</li>
<li className="nav-item xl:!hidden lg:!hidden">
<button className="hamburger offcanvas-nav-btn">
<span />
</button>
</li>
</ul>
{/* /.navbar-nav */}
</div>
{/* /.navbar-other */}
</div>
{/* /.container */}
</nav>
{/* /.navbar */}
</header>
);
}