File size: 1,590 Bytes
9b906ea | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | import { useTranslation } from "react-i18next";
import SettingsIcon from "#/icons/settings-gear.svg?react";
import { Typography } from "#/ui/typography";
import { I18nKey } from "#/i18n/declaration";
interface MobileHeaderProps {
isMobileMenuOpen: boolean;
onToggleMenu: () => void;
}
export function MobileHeader({
isMobileMenuOpen,
onToggleMenu,
}: MobileHeaderProps) {
const { t } = useTranslation("openhands");
return (
<div className="flex items-center justify-between pt-8 mb-4 md:hidden">
<div className="flex items-center gap-2">
<SettingsIcon width={16} height={16} />
<Typography.H2>{t(I18nKey.SETTINGS$TITLE)}</Typography.H2>
</div>
<button
type="button"
onClick={onToggleMenu}
className="p-2 rounded-md bg-tertiary hover:bg-tertiary transition-colors"
aria-label={t(I18nKey.SETTINGS$TOGGLE_SETTINGS_MENU)}
>
<svg
width={20}
height={20}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
>
{isMobileMenuOpen ? (
<>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</>
) : (
<>
<line x1="3" y1="6" x2="21" y2="6" />
<line x1="3" y1="12" x2="21" y2="12" />
<line x1="3" y1="18" x2="21" y2="18" />
</>
)}
</svg>
</button>
</div>
);
}
|