Mathias/PowerTools
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pressing CTRL + F now focuses the search bar

Browse Source
This commit is contained in:
Mathias Wagner 2023-05-31 02:48:50 +02:00
parent 25c9d62cf2
commit afa721f7f7
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/common/components/Sidebar/components/SidebarContent/SidebarContent.jsx
View File

@ -4,18 +4,31 @@ import "./styles.sass";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faSearch} from "@fortawesome/free-solid-svg-icons";
import {routes} from "@/common/routes";
import {useEffect, useRef} from "react";
export const SidebarContent = () => {
const searchRef = useRef();
useEffect(() => {
const listener = (e) => {
if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) {
e.preventDefault();
searchRef.current.focus();
}
}
document.addEventListener("keydown", listener);
return () => document.removeEventListener("keydown", listener);
}, []);
return (
<div className="sidebar-content">
<div className="search-item">
<FontAwesomeIcon icon={faSearch}/>
<input type="text" placeholder="Tool suchen..."/>
<input type="text" placeholder="Tool suchen..." ref={searchRef}/>
</div>
<div className="power-item-area">
{Object.keys(routes).map((route) => (
<PowerItemGroup name={route} key={route}>
{routes[route].map((route) => (