Header modifications: removed unused imports, animated image on scroll

components/container-header.tsx

@@ -3,19 +3,6 @@ import { useState, useEffect } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Separator } from "@radix-ui/react-separator";
-import { ModeToggle } from "./mode-toggle";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
-import { cn } from "@/lib/utils";
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-} from "@/components/ui/navigation-menu";
 import { MyNavigationMenu } from "./element-navigation-menu";
 import { ThemeSwitcher } from "./theme-switch";
 
@@ -68,9 +55,17 @@ export function Header() {
             width={40}
             height={40}
             // Dynamically apply classes for the fade effect
-            className={`rounded-full transition-opacity duration-500 mr-4 ease-in-out ${
-              isVisible ? "opacity-100" : "opacity-0"
-            }`}
+            className={`
+              rounded-full 
+              transition-all duration-250
+              
+              // Conditional sizing and spacing based on isVisible state
+              ${
+                isVisible
+                  ? "w-10 h-10 opacity-100 mr-4" // Visible state: Full size (w-10 is 40px)
+                  : "w-0 h-0 opacity-0 mr-0" // Hidden state: Zero size, zero margin
+              }
+            `}
             sizes="40px"
             priority
           />