forked from simrail/simrail.pro
92 lines
4.4 KiB
TypeScript
92 lines
4.4 KiB
TypeScript
/*
|
|
* Copyright (C) 2024 Aleksander <alekswilc> Wilczyński (aleks@alekswilc.dev)
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as published
|
|
* by the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* See LICENSE for more.
|
|
*/
|
|
|
|
import DarkModeSwitcher from "./DarkModeSwitcher.tsx";
|
|
import ReactCountryFlag from "react-country-flag";
|
|
import i18n from "i18next";
|
|
|
|
export const Header = (props: {
|
|
sidebarOpen: string | boolean | undefined;
|
|
setSidebarOpen: (arg0: boolean) => void;
|
|
}) =>
|
|
{
|
|
return (
|
|
<header className="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
|
|
<div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
|
|
<div className="flex items-center gap-2 sm:gap-4 lg:hidden">
|
|
<button
|
|
aria-controls="sidebar"
|
|
onClick={ (e) =>
|
|
{
|
|
e.stopPropagation();
|
|
props.setSidebarOpen(!props.sidebarOpen);
|
|
} }
|
|
className="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
|
|
>
|
|
<span className="relative block h-5.5 w-5.5 cursor-pointer">
|
|
<span className="du-block absolute right-0 h-full w-full">
|
|
<span
|
|
className={ `relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-[0] duration-200 ease-in-out dark:bg-white ${
|
|
!props.sidebarOpen && "!w-full delay-300"
|
|
}` }
|
|
></span>
|
|
<span
|
|
className={ `relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-150 duration-200 ease-in-out dark:bg-white ${
|
|
!props.sidebarOpen && "delay-400 !w-full"
|
|
}` }
|
|
></span>
|
|
<span
|
|
className={ `relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-200 duration-200 ease-in-out dark:bg-white ${
|
|
!props.sidebarOpen && "!w-full delay-500"
|
|
}` }
|
|
></span>
|
|
</span>
|
|
<span className="absolute right-0 h-full w-full rotate-45">
|
|
<span
|
|
className={ `absolute left-2.5 top-0 block h-full w-0.5 rounded-sm bg-black delay-300 duration-200 ease-in-out dark:bg-white ${
|
|
!props.sidebarOpen && "!h-0 !delay-[0]"
|
|
}` }
|
|
></span>
|
|
<span
|
|
className={ `delay-400 absolute left-0 top-2.5 block h-0.5 w-full rounded-sm bg-black duration-200 ease-in-out dark:bg-white ${
|
|
!props.sidebarOpen && "!h-0 !delay-200"
|
|
}` }
|
|
></span>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div className="hidden sm:block"></div>
|
|
|
|
<div className="flex items-center gap-3 2xsm:gap-7">
|
|
<ul className="flex items-center gap-2 2xsm:gap-4">
|
|
<a className="cursor-pointer" onClick={ () => i18n.changeLanguage("pl") }>
|
|
<ReactCountryFlag countryCode={ "PL" } svg/>
|
|
</a>
|
|
<a className="cursor-pointer" onClick={ () => i18n.changeLanguage("en") }>
|
|
<ReactCountryFlag countryCode={ "US" } svg/>
|
|
</a>
|
|
</ul>
|
|
<ul className="flex items-center gap-2 2xsm:gap-4">
|
|
<DarkModeSwitcher/>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}; |