packages/pass/components/Layout/Section/Sidebar.tsx

   1 /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
   2 import type { PropsWithChildren } from 'react';
   3 import { type FC } from 'react';
   4
   5 import { Logo, PassForBusinessLogo } from '@proton/components';
   6 import { useOrganization } from '@proton/pass/components/Organization/OrganizationProvider';
   7 import { getAppName } from '@proton/shared/lib/apps/helper';
   8 import { APPS } from '@proton/shared/lib/constants';
   9
  10 import './Sidebar.scss';
  11
  12 type Props = { expanded: boolean; onToggle: () => void };
  13
  14 export const Sidebar: FC<PropsWithChildren<Props>> = ({ children, expanded = false, onToggle }) => {
  15     const organization = useOrganization();
  16
  17     return (
  18         <>
  19             <div
  20                 id="pass-sidebar"
  21                 className="sidebar flex flex-nowrap flex-column outline-none bg-strong"
  22                 data-expanded={expanded}
  23             >
  24                 <h1 className="sr-only">{getAppName(APPS.PROTONPASS)}</h1>
  25                 <div className="w-full logo-container hidden md:flex shrink-0 justify-space-between items-center flex-nowrap">
  26                     {organization ? <PassForBusinessLogo /> : <Logo appName={APPS.PROTONPASS} />}
  27                 </div>
  28
  29                 <div className="mt-1 md:mt-0" aria-hidden="true" />
  30                 <div className="flex-1 flex-nowrap flex flex-column overflow-overlay pb-2 md:mt-2" tabIndex={-1}>
  31                     {children}
  32                 </div>
  33             </div>
  34
  35             {expanded && <div className="sidebar-backdrop" onClick={onToggle} /> /* FIXME: a11y for backdrop */}
  36         </>
  37     );
  38 };