Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 15:59:41 +02:00
Code Issues Releases Activity

feat(ui/sidebar): support custom logos [EE-3753] (#7436)

Browse source 
* feat(ui/sidebar): show right logos
This commit is contained in:
Chaim Lev-Ari 2022-08-12 04:27:30 +03:00 • committed by GitHub
parent a750259a2c
commit 92b7e64689
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 469 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

99
app/react/sidebar/Header.tsx
View file

@ -1,37 +1,74 @@
import { ChevronsLeft, ChevronsRight } from 'react-feather';
import clsx from 'clsx';
import defaultLogo from '@/assets/images/logo_small_alt.png';
import { isBE } from '@/portainer/feature-flags/feature-flags.service';
import smallLogo from '@/assets/ico/logomark.svg';
import { Link } from '@@/Link';
import fullLogoBE from './portainer_logo-BE.svg';
import fullLogoCE from './portainer_logo-CE.svg';
import { useSidebarState } from './useSidebarState';
import styles from './Header.module.css';
interface Props {
logo?: string;
}
export function Header({ logo }: Props) {
export function Header({ logo: customLogo }: Props) {
const { toggle, isOpen } = useSidebarState();
return (
<div className="flex justify-between items-center">
<Link
to="portainer.home"
data-cy="portainerSidebar-homeImage"
className="text-2xl text-white no-underline hover:no-underline hover:text-white focus:no-underline focus:text-white focus:outline-none"
>
<img
src={logo || defaultLogo}
className="img-responsive logo"
alt={!logo ? 'portainer.io' : 'Logo'}
/>
{isOpen && 'portainer.io'}
</Link>
<div className="flex">
<div>
<Link
to="portainer.home"
data-cy="portainerSidebar-homeImage"
className="text-2xl text-white no-underline hover:no-underline hover:text-white focus:no-underline focus:text-white focus:outline-none"
>
<Logo customLogo={customLogo} isOpen={isOpen} />
</Link>
{isOpen && customLogo && (
<div
className={clsx(
'uppercase text-[9.4px] space-x-1 tracking-[.28em] pt-3',
'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>
<button
type="button"
onClick={() => toggle()}
className="w-6 h-6 flex justify-center items-center text-gray-4 be:text-gray-5 border-0 rounded text-sm bg-blue-11 hover:bg-blue-10 be:bg-gray-10 be:hover:bg-gray-8 th-dark:bg-gray-warm-11 hover:th-dark:bg-gray-warm-9 transition-colors duration-200 hover:text-white be:hover:text-white"
className={clsx(
'w-6 h-6 flex justify-center items-center border-0 rounded',
'transition-all duration-200',
'text-sm text-gray-4 be:text-gray-5 hover:text-white be:hover:text-white',
'bg-blue-11 hover:bg-blue-10 be:bg-gray-10 be:hover:bg-gray-8',
'th-dark:bg-gray-warm-11 hover:th-dark:bg-gray-warm-9',
'absolute',
{ '-right-[10px]': !isOpen, 'right-6': isOpen }
)}
aria-label="Toggle Sidebar"
title="Toggle Sidebar"
>
@ -40,3 +77,33 @@ export function Header({ logo }: Props) {
</div>
);
}
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"
/>
);
}