Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | 5x 14x 14x 9x 9x 9x 9x 14x | import { Sidebar } from "./Sidebar";
import { Logo } from "./Logo";
import { RxHamburgerMenu } from "react-icons/rx";
import VoiceControlButton from "./VoiceControlButton";
import { useRef } from "react";
const Navbar = ({ title }: { title: string }) => {
const drawerRef = useRef<HTMLInputElement>(null);
const handleMenuToggle = (
event:
| React.KeyboardEvent<HTMLButtonElement>
| React.MouseEvent<HTMLButtonElement>,
) => {
// Allow only Enter or Space for keyboard interaction
if (I
event.type === "keydown" &&
(event as React.KeyboardEvent<HTMLButtonElement>).key !== "Enter" &&
(event as React.KeyboardEvent<HTMLButtonElement>).key !== " "
) {
return;
}
event.preventDefault();
// Toggle the drawer checkbox
if (drawerRef.current) {
drawerRef.current.checked = !drawerRef.current.checked;
}
};
return (
<nav
className="navbar bg-base-100 shadow-md md:px-26 px-10 py-5 border-b-2 border-b-neutral-content"
data-cy="navbar"
aria-label="Main navigation"
>
<div className="flex-1">
<Logo title={title} />
</div>
<div
className="flex items-center gap-4"
role="toolbar"
aria-label="Navigation tools"
>
<VoiceControlButton />
<div className="drawer drawer-end">
{/* Drawer Toggle Checkbox */}
<label htmlFor="menu-drawer" className="sr-only">
Toggle settings menu
</label>
<input
id="menu-drawer"
type="checkbox"
className="drawer-toggle sr-only"
ref={drawerRef}
/>
<div className="drawer-content">
{/* Fixed: Button instead of label */}
<button
type="button"
className="text-3xl text-base-content hover:text-primary hover:cursor-pointer inline-flex items-center justify-center p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
data-cy="sidebar-btn"
aria-label="Open settings menu"
aria-haspopup="menu"
aria-controls="settings-sidebar"
aria-expanded={
drawerRef.current?.checked ? "true" : "false"
}
onKeyDown={handleMenuToggle}
onClick={handleMenuToggle}
>
<RxHamburgerMenu aria-hidden="true" />
<span className="sr-only">Menu</span>
</button>
</div>
<Sidebar />
</div>
</div>
</nav>
);
};
export default Navbar;
|