feat : fixed menu

src/components/alert/Alert.tsx

@@ -1,6 +1,6 @@
 import { AlertProps, MessageType } from "../../types/props";
 
-const Alert = ({ children, type = "info", message }: AlertProps) => {
+const Alert = ({ children, type = "info", message , extra }: AlertProps) => {
   const types: Record<
     MessageType,
     {
@@ -57,7 +57,7 @@ const Alert = ({ children, type = "info", message }: AlertProps) => {
 
   return (
     <div
-      className={`w-full h-full flex items-center p-4 mb-4 text-xs md:text-sm ${text} rounded-lg ${bg} ${darkText} ${darkBg}`}
+      className={`w-full h-full flex items-center p-4 mb-4 text-xs md:text-sm ${text} rounded-lg ${bg} ${darkText} ${darkBg} ${extra}`}
       role="alert"
     >
       <svg
@@ -71,7 +71,7 @@ const Alert = ({ children, type = "info", message }: AlertProps) => {
       </svg>
       <span className="sr-only">{children}</span>
       <div>
-        <span className="font-medium">{children}</span> {message && message}
+        {message && message} <span className="font-medium">{children}</span>
       </div>
     </div>
   );

src/components/header/components/navbar/Navbar.tsx

@@ -9,7 +9,7 @@ import { useNavigate } from "react-router-dom";
 import { Route } from "../../../../types/props";
 import { isAuthenticated } from "../../../../utils/auth";
 
-const Navbar = () => {
+const Navbar = ({extra}:{extra?:string}) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const auth = isAuthenticated();
   const [routes] = useState<Route[]>(router);
@@ -29,7 +29,7 @@ const Navbar = () => {
 
   return (
     <div className="relative">
-      <nav className="glass text-white p-4 flex justify-between items-center">
+      <nav className={`glass text-white p-4 flex justify-between items-center ${extra}`}>
         <div className="flex items-center">
           <h1 className="text-xl font-bold">پرشین پینگ</h1>
         </div>

src/components/header/index.tsx

@@ -1,10 +1,26 @@
+import { useEffect, useState } from "react";
 import Navbar from "./components/navbar/Navbar";
-
 const Header = () => {
+  const [isFixed, setIsFixed] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 50) {
+        setIsFixed(true);
+      } else {
+        setIsFixed(false);
+      }
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
   return (
-    <div className="relative w-full p-5 h-[7rem]">
-      <header>
-        <Navbar />
+    <div className="w-full p-5 h-[7rem]">
+      <header className={`w-full transition-all duration-300 ease-in-out ${isFixed ? "fixed max-w-[1400px] h-[6rem] mx-auto z-[1000] inset-0 p-2" : ""}`}>
+        <Navbar extra={`${isFixed && '!bg-gray-800/90'}`}/>
       </header>
     </div>
   );