implemented header and dark theme.

src/components/MenuBar.jsx

@@ -0,0 +1,59 @@
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
+
+const SubMenu = ({ items }) => {
+  return (
+    <div className="
+      hidden  absolute top-full left-0 border-t-3 border-primary dark:border-primary-dark bg-secondary
+       dark:bg-secondary-dark rounded-2xl shadow-sm shadow-surface-variant-dark dark:shadow-primary group-hover:block z-10"
+    >
+      {items.map((subItem, index) => (
+        <div key={index} className="px-6 py-2 text-nowrap hover:bg-white dark:hover:bg-secondary-variant-dark cursor-pointer first:rounded-t-2xl last:rounded-b-2xl first:pt-4 last:pb-4">
+          <Link to={subItem.path}>{subItem.name}</Link>
+        </div>
+      ))}
+      <svg className="absolute top-0 left-6 mt-[-13px] fill-primary dark:fill-primary-dark" width="16" height="13" viewBox="0 0 16 13"  xmlns="http://www.w3.org/2000/svg">
+        <path d="M6.26795 1C7.03775 -0.333332 8.96225 -0.333334 9.73205 0.999999L14.9282 10C15.698 11.3333 14.7358 13 13.1962 13H2.80385C1.26425 13 0.301996 11.3333 1.0718 10L6.26795 1Z" />
+      </svg>
+    </div>
+  );
+};
+
+function MenuBar({ menuItems }) {
+  return (
+    <div className="flex justify-between text-base pt-5 pb-2 font-body">
+      {menuItems.map((item, index) =>
+        <div key={index} className="group relative pb-3 cursor-pointer">
+          {item.name}
+          {item.submenu.length > 0 && <SubMenu items={item.submenu} />}
+        </div>
+      )}
+    </div>
+  );
+}
+
+MenuBar.propTypes = {
+  menuItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      submenu: PropTypes.arrayOf(
+        PropTypes.shape({
+          name: PropTypes.string.isRequired,
+          path: PropTypes.string.isRequired,
+        })
+      ),
+      path: PropTypes.string
+    })
+  ).isRequired
+};
+
+SubMenu.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      path: PropTypes.string.isRequired
+    })
+  ).isRequired
+};
+
+export default MenuBar;