msgba-web/js-src/components/overlay-controls.tsx

33 lines
1.1 KiB
TypeScript

import * as React from 'react';
import {HOME_BUTTON_IMAGE} from '/constants';
export interface OverlayControlsProps {
firstMenuElement: React.RefObject<HTMLAnchorElement>,
setHiddenMenu: (c: boolean) => void,
};
export default function OverlayControls({firstMenuElement, setHiddenMenu}: OverlayControlsProps) {
function showOverlayMenu() {
setHiddenMenu(false);
setTimeout(() => {
if (firstMenuElement.current == null) {
return;
}
firstMenuElement.current.focus();
}, 100);
}
return (
<div className="overlay">
<div className="vertical-padding">
</div>
<div className="controls">
<a href="#" className="gear control" onClick={showOverlayMenu}>
<img src={HOME_BUTTON_IMAGE} alt="Go to menu. (House icon)"/>
</a>
<a href="#" className="control-a control control-button">A</a>
<a href="#" className="control-b control control-button">B</a>
</div>
</div>
);
}