made header sticky on scroll (#519) (#520)

* made header sticky on scroll (#519)

* cleanup

---------

Co-authored-by: Maze Winther <mazewinther@gmail.com>
This commit is contained in:
Shubhashish Chakraborty
2025-08-15 23:22:34 +02:00
committed by GitHub
co-authored by Maze Winther
parent 7e4cd76762
commit 4621caee19
+8 -2
View File
@@ -9,7 +9,13 @@ import Image from "next/image";
export function Header() { export function Header() {
const leftContent = ( const leftContent = (
<Link href="/" className="flex items-center gap-3"> <Link href="/" className="flex items-center gap-3">
<Image src="/logo.svg" alt="OpenCut Logo" className="invert dark:invert-0" width={32} height={32} /> <Image
src="/logo.svg"
alt="OpenCut Logo"
className="invert dark:invert-0"
width={32}
height={32}
/>
<span className="text-xl font-medium hidden md:block">OpenCut</span> <span className="text-xl font-medium hidden md:block">OpenCut</span>
</Link> </Link>
); );
@@ -38,7 +44,7 @@ export function Header() {
); );
return ( return (
<div className="mx-4 md:mx-0"> <div className="sticky top-4 z-50 mx-4 md:mx-0">
<HeaderBase <HeaderBase
className="bg-background border rounded-2xl max-w-3xl mx-auto mt-4 pl-4 pr-[14px]" className="bg-background border rounded-2xl max-w-3xl mx-auto mt-4 pl-4 pr-[14px]"
leftContent={leftContent} leftContent={leftContent}