first commit

src/components/layout/Header.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { FiMenu, FiBell } from "react-icons/fi";
+
+const Header = ({ toggleSidebar, toggleMobileSidebar }) => {
+  return (
+    <header className="flex items-center justify-between bg-white shadow px-4 py-3 sticky top-0 z-20">
+      <div className="flex items-center gap-4">
+        <button
+          className="md:hidden p-2 rounded-md hover:bg-gray-100 transition"
+          onClick={toggleMobileSidebar}
+        >
+          <FiMenu className="text-[#4880FF]" />
+        </button>
+
+        <button
+          className="hidden md:block p-2 rounded-md hover:bg-gray-100 transition"
+          onClick={toggleSidebar}
+        >
+          <FiMenu className="text-[#4880FF]" />
+        </button>
+
+        <h1 className="text-xl font-semibold hidden md:block text-[#4880FF]">
+          Dashboard
+        </h1>
+      </div>
+
+      <div className="flex items-center gap-4">
+        <button className="p-2 rounded-md hover:bg-gray-100 transition">
+          <FiBell className="text-[#4880FF]" />
+        </button>
+        <div className="hidden md:flex items-center gap-2">
+          <span className="text-gray-700">Admin</span>
+          <img
+            src="/avatar.png"
+            alt="avatar"
+            className="w-8 h-8 rounded-full border-2 border-[#4880FF]"
+          />
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;