Move settings to popover

frontend/src/app/components/Header/Header.js

@@ -1,26 +1,34 @@
 import styles from "./Header.module.css";
 import SettingsIcon from '@mui/icons-material/Settings';
 import Image from "next/image";
-import Link from "next/link";
+import Popover from "@/app/components/Popover/Popover";
+import Settings from "@/app/components/Settings/Settings";
 
 export default function Header({title}) {
   const pbDimenstions = 30
 
   return (
-    <header className={styles.header}>
-      <Link href="/settings">
-        <div className={styles.profile}>
-          <Image
-            className={styles.profile__img}
-            src="/images/sloth-profile.svg"
-            width={pbDimenstions}
-            height={pbDimenstions}
-            alt="Profile Pic"
-            />
-          <SettingsIcon className="fcolor--purple" />
-        </div>
-      </Link>
-      <h1 className={styles.title}>{title}</h1>
-    </header>
+    <>
+      <header className={styles.header}>
+        <Popover trigger={
+          <div 
+            className={styles.profile}
+          >
+            <Image
+              className={styles.profile__img}
+              src="/images/sloth-profile.svg"
+              width={pbDimenstions}
+              height={pbDimenstions}
+              alt="Profile Pic"
+              />
+            <SettingsIcon className="fcolor--purple" />
+          </div>
+        }>
+          <Settings />
+        </Popover>
+
+        <h1 className={styles.title}>{title}</h1>
+      </header>
+    </>
   );
 }