Improve accessibility in the navigation bar; direct child of rendered <ul> element are now only <li> elements.

components/shared/Navbar.tsx

@@ -28,9 +28,12 @@ const Navbar = () => {
 					</NavigationMenuItem>
 
 					{/* Mobile view */}
+					<NavigationMenuItem className="flex md:hidden">
 						<MobileNav />
+					</NavigationMenuItem>
 
 					{/* Desktop Menu */}
+					<NavigationMenuItem className="hidden md:flex">
 						<nav className="hidden md:flex gap-4">
 							{NAVBAR.centerLinks?.map(({ href, label, target }) => (
 								<Link
@@ -47,8 +50,9 @@ const Navbar = () => {
 								</Link>
 							))}
 						</nav>
+					</NavigationMenuItem>
 
-					<div className="hidden md:flex gap-2 items-center">
+					<NavigationMenuItem className="hidden md:flex gap-2 items-center">
 						{NAVBAR.rightLinks?.map(({ href = "", label, target }) => (
 							<Link
 								key={label}
@@ -75,7 +79,7 @@ const Navbar = () => {
 							</Link>
 						))}
 						<ThemeToggle />
-					</div>
+					</NavigationMenuItem>
 				</NavigationMenuList>
 			</NavigationMenu>
 		</header>