diff --git a/fresh.gen.ts b/fresh.gen.ts
index a162a81..c1205e2 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -11,6 +11,8 @@ import * as $post_slug_ from "./routes/post/[slug].tsx";
import * as $posts from "./routes/posts.tsx";
import * as $projects from "./routes/projects.tsx";
import * as $Example from "./islands/Example.tsx";
+import * as $NavigationBar from "./islands/NavigationBar.tsx";
+import * as $ScrollUpButton from "./islands/ScrollUpButton.tsx";
import type { Manifest } from "$fresh/server.ts";
const manifest = {
@@ -26,6 +28,8 @@ const manifest = {
},
islands: {
"./islands/Example.tsx": $Example,
+ "./islands/NavigationBar.tsx": $NavigationBar,
+ "./islands/ScrollUpButton.tsx": $ScrollUpButton,
},
baseUrl: import.meta.url,
} satisfies Manifest;
diff --git a/islands/NavigationBar.tsx b/islands/NavigationBar.tsx
new file mode 100644
index 0000000..9287c1b
--- /dev/null
+++ b/islands/NavigationBar.tsx
@@ -0,0 +1,83 @@
+// islands/NavigationBar.tsx
+import { useComputed, useSignal } from "@preact/signals";
+import { useEffect } from "preact/hooks";
+import { LuCodeXml, LuHouse, LuNotebookPen } from "@preact-icons/lu";
+
+interface NavigationBarProps {
+ currentPath: string;
+}
+
+export default function NavigationBar({ currentPath }: NavigationBarProps) {
+ const isScrolling = useSignal(false);
+ const prevScrollPos = useSignal(0);
+ const isVisible = useComputed(() => {
+ if (prevScrollPos.value < 50) return true;
+
+ const currentPos = typeof window !== "undefined" ? globalThis.scrollY : 0;
+ return prevScrollPos.value > currentPos;
+ });
+
+ const isPostsPath = (path: string) => {
+ return path.startsWith("/posts") || path.startsWith("/post/");
+ };
+
+ useEffect(() => {
+ let scrollTimer: number | undefined;
+
+ const handleScroll = () => {
+ isScrolling.value = true;
+ prevScrollPos.value = globalThis.scrollY;
+
+ if (scrollTimer) clearTimeout(scrollTimer);
+
+ scrollTimer = setTimeout(() => {
+ isScrolling.value = false;
+ }, 200);
+ };
+
+ globalThis.addEventListener("scroll", handleScroll);
+
+ return () => {
+ globalThis.removeEventListener("scroll", handleScroll);
+ if (scrollTimer) clearTimeout(scrollTimer);
+ };
+ }, []);
+
+ return (
+
+ );
+}
diff --git a/islands/ScrollUpButton.tsx b/islands/ScrollUpButton.tsx
new file mode 100644
index 0000000..35a4098
--- /dev/null
+++ b/islands/ScrollUpButton.tsx
@@ -0,0 +1,45 @@
+import { useSignal } from "@preact/signals";
+import { useEffect } from "preact/hooks";
+import { LuArrowUp } from "@preact-icons/lu";
+
+export default function ScrollUpButton() {
+ const isVisible = useSignal(false);
+
+ useEffect(() => {
+ const checkScroll = () => {
+ isVisible.value = globalThis.scrollY > 300;
+ };
+
+ checkScroll();
+
+ globalThis.addEventListener("scroll", checkScroll);
+
+ return () => {
+ globalThis.removeEventListener("scroll", checkScroll);
+ };
+ }, []);
+
+ const scrollToTop = () => {
+ globalThis.scrollTo({
+ top: 0,
+ behavior: "smooth",
+ });
+ };
+
+ return (
+
+ );
+}
diff --git a/routes/_app.tsx b/routes/_app.tsx
index e6ac78d..f04d1f8 100644
--- a/routes/_app.tsx
+++ b/routes/_app.tsx
@@ -7,7 +7,7 @@ export default function App({ Component }: PageProps) {
Atridad Lahiji
-
+
diff --git a/routes/_layout.tsx b/routes/_layout.tsx
index 10a5fda..ba7a3eb 100644
--- a/routes/_layout.tsx
+++ b/routes/_layout.tsx
@@ -1,7 +1,7 @@
-// routes/_layout.tsx
import { PageProps } from "$fresh/server.ts";
import { Head } from "$fresh/runtime.ts";
-import { LuCodeXml, LuHouse, LuNotebookPen } from "@preact-icons/lu";
+import NavigationBar from "../islands/NavigationBar.tsx";
+import ScrollUpButton from "../islands/ScrollUpButton.tsx";
export default function Layout({ Component, url }: PageProps) {
const currentPath = url.pathname;
@@ -19,37 +19,8 @@ export default function Layout({ Component, url }: PageProps) {
-
+
+
);