Viewing File: /home/maglabs/marco/wp-content/plugins/extendify/src/Assist/pages/parts/Header.jsx

import { useState, useLayoutEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import classNames from 'classnames';
import { colord } from 'colord';
import { useRouter } from '@assist/hooks/useRouter';
import { Nav } from '@assist/pages/parts/Nav';
import { Logo } from '@assist/svg';

export const Header = () => {
	const { filteredPages, navigateTo, current } = useRouter();
	const [menuOpen, setMenuOpen] = useState(false);
	const [contrastBg, setContrastBg] = useState();
	const [focusColor, setFocusColor] = useState();

	useLayoutEffect(() => {
		const documentStyles = window.getComputedStyle(document.body);
		const bannerMain = documentStyles.getPropertyValue('--ext-banner-main');
		const b = colord(bannerMain || '#000000');
		const contrast = b.isDark() ? b.lighten(0.1) : b.darken(0.1);
		setContrastBg(contrast.toHex());
		const focus = b.isDark() ? b.lighten(0.3) : b.darken(0.3);
		setFocusColor(focus.toHex());
	}, []);

	return (
		<header className="w-full flex bg-banner-main">
			<div className="max-w-screen-2xl w-full mx-4 md:mx-12 3xl:mx-auto mt-auto flex flex-col">
				<div className="flex flex-wrap justify-between items-center my-6 xl:my-8 gap-x-4 gap-y-2">
					{window.extAssistData?.partnerLogo && (
						<div className="w-40 h-16 flex items-center">
							<a
								href={`${window.extAssistData.adminUrl}admin.php?page=extendify-assist`}>
								<img
									className="h-full w-full"
									src={window.extAssistData.partnerLogo}
									alt={window.extAssistData.partnerName}
								/>
							</a>
						</div>
					)}
					{!window.extAssistData?.partnerLogo && (
						<a
							href={`${window.extAssistData.adminUrl}admin.php?page=extendify-assist`}>
							<Logo className="logo text-banner-text w-32 sm:w-40" />
						</a>
					)}
					<div className="lg:hidden">
						<button
							type="button"
							className={classNames(
								'cursor-pointer bg-transparent hover:bg-white/20 text-banner-text h-8 rounded-sm flex items-center gap-2 text-base',
								{ 'bg-white/20': menuOpen },
							)}
							onClick={() => setMenuOpen((v) => !v)}>
							<span className="dashicons dashicons-menu-alt text-banner-text" />
							{__('Menu', 'extendify-local')}
						</button>
					</div>
					<div
						id="assist-menu-bar"
						className={classNames(
							'lg:flex lg:w-auto flex-wrap gap-4 items-center',
							{
								hidden: !menuOpen,
								block: menuOpen,
								'w-full': menuOpen,
							},
						)}>
						<Nav
							hideMenu={() => setMenuOpen(false)}
							pages={filteredPages}
							activePage={current?.slug}
							setActivePage={navigateTo}
						/>
						<a
							style={{
								borderColor: contrastBg,
								'--tw-ring-color': focusColor,
								'--ext-override': focusColor,
							}}
							className="text-sm text-center bg-design-main text-design-text border cursor-pointer rounded-b-sm lg:rounded-sm py-2 px-3 no-underline block lg:inline-block hover:border-override hover:bg-transparent hover:text-banner-text focus:ring-wp focus:ring-offset-1 focus:ring-offset-banner-main focus:outline-none transition-colors duration-200"
							href={window.extAssistData.home}
							target="_blank"
							rel="noreferrer">
							{__('View site', 'extendify-local')}
						</a>
					</div>
				</div>
			</div>
		</header>
	);
};