2022-11-28 02:00:28 +00:00
|
|
|
import { ChevronsLeft, ChevronsRight } from 'lucide-react';
|
2022-08-12 01:27:30 +00:00
|
|
|
import clsx from 'clsx';
|
2022-06-28 07:42:42 +00:00
|
|
|
|
2022-11-13 08:10:18 +00:00
|
|
|
import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
|
2022-08-12 01:27:30 +00:00
|
|
|
import smallLogo from '@/assets/ico/logomark.svg';
|
2022-06-23 07:25:56 +00:00
|
|
|
|
|
|
|
import { Link } from '@@/Link';
|
|
|
|
|
2022-08-12 01:27:30 +00:00
|
|
|
import fullLogoBE from './portainer_logo-BE.svg';
|
|
|
|
import fullLogoCE from './portainer_logo-CE.svg';
|
2022-06-23 07:25:56 +00:00
|
|
|
import { useSidebarState } from './useSidebarState';
|
2022-08-12 01:27:30 +00:00
|
|
|
import styles from './Header.module.css';
|
2022-06-23 07:25:56 +00:00
|
|
|
|
|
|
|
interface Props {
|
|
|
|
logo?: string;
|
|
|
|
}
|
|
|
|
|
2022-08-12 01:27:30 +00:00
|
|
|
export function Header({ logo: customLogo }: Props) {
|
2022-06-28 07:42:42 +00:00
|
|
|
const { toggle, isOpen } = useSidebarState();
|
2022-06-23 07:25:56 +00:00
|
|
|
|
|
|
|
return (
|
2022-08-12 01:27:30 +00:00
|
|
|
<div className="flex">
|
|
|
|
<div>
|
|
|
|
<Link
|
|
|
|
to="portainer.home"
|
|
|
|
data-cy="portainerSidebar-homeImage"
|
2023-02-12 21:04:24 +00:00
|
|
|
className="text-2xl text-white no-underline hover:text-white hover:no-underline focus:text-white focus:no-underline focus:outline-none"
|
2022-08-12 01:27:30 +00:00
|
|
|
>
|
|
|
|
<Logo customLogo={customLogo} isOpen={isOpen} />
|
|
|
|
</Link>
|
|
|
|
{isOpen && customLogo && (
|
|
|
|
<div
|
|
|
|
className={clsx(
|
2023-02-12 21:04:24 +00:00
|
|
|
'space-x-1 pt-3 text-[9.4px] uppercase tracking-[.28em]',
|
2022-08-12 01:27:30 +00:00
|
|
|
'text-gray-3',
|
|
|
|
'th-dark:text-gray-warm-6'
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
<span className="font-medium">Powered by</span>
|
|
|
|
<span className="font-semibold">
|
|
|
|
{isBE ? (
|
|
|
|
'portainer business'
|
|
|
|
) : (
|
|
|
|
<a
|
|
|
|
href="https://www.portainer.io/install-BE-now"
|
|
|
|
className={clsx(
|
|
|
|
'hover:underline',
|
|
|
|
'text-blue-6 hover:text-blue-8',
|
|
|
|
'th-dark:text-blue-7 th-dark:hover:text-blue-9'
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
portainer community
|
|
|
|
</a>
|
|
|
|
)}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
2022-06-28 07:42:42 +00:00
|
|
|
|
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
onClick={() => toggle()}
|
2022-08-12 01:27:30 +00:00
|
|
|
className={clsx(
|
2022-09-09 00:47:06 +00:00
|
|
|
styles.collapseBtn,
|
2023-02-12 21:04:24 +00:00
|
|
|
'flex h-6 w-6 items-center justify-center rounded border-0',
|
2022-08-12 01:27:30 +00:00
|
|
|
'transition-all duration-200',
|
2023-02-12 21:04:24 +00:00
|
|
|
'text-sm text-gray-4 hover:text-white be:text-gray-5 be:hover:text-white',
|
2022-09-09 00:47:06 +00:00
|
|
|
'bg-blue-11 be:bg-gray-10',
|
|
|
|
'th-dark:bg-gray-warm-11',
|
2022-08-12 01:27:30 +00:00
|
|
|
'absolute',
|
|
|
|
{ '-right-[10px]': !isOpen, 'right-6': isOpen }
|
|
|
|
)}
|
2022-06-28 07:42:42 +00:00
|
|
|
aria-label="Toggle Sidebar"
|
|
|
|
title="Toggle Sidebar"
|
|
|
|
>
|
|
|
|
{isOpen ? <ChevronsLeft /> : <ChevronsRight />}
|
|
|
|
</button>
|
2022-06-23 07:25:56 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2022-08-12 01:27:30 +00:00
|
|
|
|
|
|
|
function getLogo(isOpen: boolean, customLogo?: string) {
|
|
|
|
if (customLogo) {
|
|
|
|
return customLogo;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!isOpen) {
|
|
|
|
return smallLogo;
|
|
|
|
}
|
|
|
|
|
|
|
|
return isBE ? fullLogoBE : fullLogoCE;
|
|
|
|
}
|
|
|
|
|
|
|
|
function Logo({
|
|
|
|
customLogo,
|
|
|
|
isOpen,
|
|
|
|
}: {
|
|
|
|
customLogo?: string;
|
|
|
|
isOpen: boolean;
|
|
|
|
}) {
|
|
|
|
const logo = getLogo(isOpen, customLogo);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<img
|
|
|
|
src={logo}
|
|
|
|
className={clsx('img-responsive', styles.logo)}
|
|
|
|
alt="Logo"
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|