diff options
| author | Shubhashish Chakraborty <164302071+Shubhashish-Chakraborty@users.noreply.github.com> | 2025-08-16 02:52:34 +0530 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-08-15 23:22:34 +0200 |
| commit | 4621caee192a94cab23f161d725a9f548a61c3b6 (patch) | |
| tree | 6afb9ab1a633d4e79955cee486b3137841ce3a61 /apps/web/src/components/header.tsx | |
| parent | 7e4cd767622e3e1a09e76770ce800f4a541cf0e8 (diff) | |
| download | opencut-4621caee192a94cab23f161d725a9f548a61c3b6.tar.gz | |
made header sticky on scroll (#519) (#520)
* made header sticky on scroll (#519)
* cleanup
---------
Co-authored-by: Maze Winther <mazewinther@gmail.com>
Diffstat (limited to 'apps/web/src/components/header.tsx')
| -rw-r--r-- | apps/web/src/components/header.tsx | 10 |
1 files changed, 8 insertions, 2 deletions
diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx index bed04a27..4d68efb2 100644 --- a/apps/web/src/components/header.tsx +++ b/apps/web/src/components/header.tsx @@ -9,7 +9,13 @@ import Image from "next/image"; export function Header() { const leftContent = ( <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> </Link> ); @@ -38,7 +44,7 @@ export function Header() { ); return ( - <div className="mx-4 md:mx-0"> + <div className="sticky top-4 z-50 mx-4 md:mx-0"> <HeaderBase className="bg-background border rounded-2xl max-w-3xl mx-auto mt-4 pl-4 pr-[14px]" leftContent={leftContent} |