feat: add keyboard control for sidebar size adjustment

This commit is contained in:
cj-do-gta-sander 2024-10-24 11:45:41 -03:00
parent ba7e4c979d
commit e0ec79b105

View File

@ -68,6 +68,22 @@ export function Sidebar() {
sidebarRef.current?.clientWidth || SIDEBAR_INITIAL_WIDTH;
};
const handleKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (
event
) => {
const { key } = event;
if (key === "ArrowRight") {
setSidebarWidth((prevWidth) =>
prevWidth < SIDEBAR_INITIAL_WIDTH ? SIDEBAR_INITIAL_WIDTH : SIDEBAR_MAX_WIDTH
);
} else if (key === "ArrowLeft") {
setSidebarWidth((prevWidth) =>
prevWidth > SIDEBAR_INITIAL_WIDTH ? SIDEBAR_INITIAL_WIDTH : SIDEBAR_MIN_WIDTH
);
}
};
const handleFilter: React.ChangeEventHandler<HTMLInputElement> = (event) => {
setFilteredLibrary(
sortedLibrary.filter((game) =>
@ -246,6 +262,7 @@ export function Sidebar() {
type="button"
className={styles.handle}
onMouseDown={handleMouseDown}
onKeyDown={handleKeyDown}
/>
</aside>
);