fixing header icons (once again)

components/layout/menu-item.tsx

@@ -35,7 +35,7 @@ const MenuItem = ({
         href={href}
         aria-label={text}
         data-current={current || undefined}
-        className="text-foreground/85 hover:border-ring/80 data-current:border-primary/60! inline-flex items-center border-b-3 border-b-transparent hover:no-underline"
+        className="text-foreground/85 hover:border-b-ring/80 data-current:border-b-primary/60 inline-flex items-center hover:no-underline"
       >
         {item}
       </Link>

components/layout/menu.tsx

@@ -37,14 +37,20 @@ const Menu = ({ className, ...rest }: React.ComponentProps<"div">) => {
 
   return (
     <div
-      className={cn("flex max-w-2/3 flex-row justify-between md:max-w-none md:justify-end md:gap-4", className)}
+      className={cn(
+        "flex max-w-2/3 flex-row items-center justify-between md:max-w-none md:justify-end md:gap-4",
+        className
+      )}
       {...rest}
     >
       {menuItems.map((item, index) => {
         const isCurrent = item.href?.split("/")[1] === segment;
 
         return (
-          <div className="mt-[3px] inline-block last:-mr-2.5 max-sm:first:hidden **:[a,button]:p-2.5" key={index}>
+          <div
+            className="inline-flex items-center last:-mr-2.5 max-sm:first:hidden **:[a,button]:border-y-3 **:[a,button]:border-y-transparent **:[a,button]:p-2.5"
+            key={index}
+          >
             <MenuItem {...item} current={isCurrent} />
           </div>
         );

components/layout/theme-toggle.tsx

@@ -12,14 +12,11 @@ const ThemeToggle = ({ className, ...rest }: React.ComponentProps<"button">) =>
     <button
       onClick={() => setTheme(theme === "light" ? "dark" : "light")}
       aria-label="Toggle theme"
-      className={cn(
-        "hover:[&_svg]:stroke-warning block cursor-pointer bg-transparent not-dark:[&_.lucide-moon]:hidden dark:[&_.lucide-sun]:hidden",
-        className
-      )}
+      className={cn("hover:[&_svg]:stroke-warning block cursor-pointer bg-transparent", className)}
       {...rest}
     >
-      <SunIcon />
-      <MoonIcon />
+      <SunIcon className="dark:hidden" />
+      <MoonIcon className="not-dark:hidden" />
       <span className="sr-only">Toggle theme</span>
     </button>
   );