Fix accessibility on header

Author: Rikthepixel

src/components/navigation/Header.tsx

@@ -25,10 +25,10 @@ const Header = () => {
         />
         <span>Commit Rocket</span>
       </Link>
-      <Button color="secondary" className="p-2 ml-auto rounded-full md:hidden" onClick={() => setOpen(!open)}>
+      <Button color="secondary" className="p-2 ml-auto rounded-full md:hidden" aria-expanded={open} aria-controls="header-items" onClick={() => setOpen(!open)}>
         <Bars3Icon className="w-6 h-6" />
       </Button>
-      <div aria-expanded={open} className="absolute flex flex-col bg-fill gap-0 p-4 top-full inset-x-4 rounded-md shadow shadow-primary z-10 aria-[expanded='false']:hidden md:aria-[expanded='false']:flex md:flex-row md:items-center md:p-0 md:shadow-none md:static md:bg-transparent md:gap-12">
+      <div id="header-items" className="absolute flex flex-col bg-fill gap-0 p-4 top-full inset-x-4 rounded-md shadow shadow-primary z-10 aria-[expanded='false']:hidden md:aria-[expanded='false']:flex md:flex-row md:items-center md:p-0 md:shadow-none md:static md:bg-transparent md:gap-12">
         <NavLink href="/" currentHref={router.pathname}>
           Home
         </NavLink>