1 files changed, 59 insertions, 0 deletions
diff --git a/src/components/layouts/AppBar.js b/src/components/layouts/AppBar.js
new file mode 100644
index 00000000..f9dddf9d
--- /dev/null
+++ b/src/components/layouts/AppBar.js
@@ -0,0 +1,59 @@
+import { ChevronLeftIcon, HeartIcon, HomeIcon } from "@heroicons/react/24/outline";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import Link from "../elements/Link";
+
+const AppBar = ({ title }) => {
+  const router = useRouter();
+
+  const [scrollPosition, setScrollPosition] = useState(0);
+  const handleScrollPosition = () => {
+    const position = window.pageYOffset;
+    setScrollPosition(position);
+  }
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScrollPosition, { passive: true });
+
+    return () => {
+      window.addEventListener('scroll', handleScrollPosition);
+    };
+  }, []);
+
+  const handleBackButtonClick = (event) => {
+    event.currentTarget.disabled = true;
+    router.back();
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{ title } - Indoteknik</title>
+      </Head>
+      <div className={"sticky-header flex justify-between !p-0 !pr-4 idt-transition " + (scrollPosition > 0 && "shadow border-b-transparent" ) }>
+        {/* --- Start Title */}
+        <div className="flex items-center">
+          <button type="button" onClick={handleBackButtonClick} className="text-gray_r-12 px-4 py-5">
+            <ChevronLeftIcon className="w-6 stroke-2"/>
+          </button>
+          <h1 className="text-h-md">{ title }</h1> 
+        </div>
+        {/* --- End Title */}
+
+        {/* --- Start Icons */}
+        <div className="flex gap-x-4 items-center">
+          <Link href="/">
+            <HeartIcon className="w-6 stroke-2 text-gray_r-12"/>
+          </Link>
+          <Link href="/">
+            <HomeIcon className="w-6 stroke-2 text-gray_r-12"/>
+          </Link>
+        </div>
+        {/* --- End Icons */}
+      </div>
+    </>
+  );
+};
+
+export default AppBar;
+\ No newline at end of file