Skip to content

fix: make navbar sticky throughout the page #153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: make navbar sticky throughout the page #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/web/src/app/(main)/(landing)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import Navbar from '@/components/landing-sections/navbar'
// import Navbar from '@/components/landing-sections/navbar'
import React from 'react'

const Layout = ({ children }: { children: React.ReactNode }) => {
return (
<section>
<Navbar />
{/* <Navbar /> */}
{children}
</section>
Comment on lines +1 to 9
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Navbar disappears on sibling landing routes.
Commenting out <Navbar /> here means every page that uses this layout (e.g., /pricing) now renders with zero navigation—the navbar only mounts inside Hero, which those pages never render. Users landing on /pricing lose all site navigation, which is a critical regression. Please keep the navbar provided by the layout (and make it sticky there) so every route continues to show it.

-import React from 'react'
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-    return (
-        <section>
-            {/* <Navbar /> */}
-            {children}
-        </section>
-    )
-}
+import React from 'react'
+import Navbar from '@/components/landing-sections/navbar'
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <section className="relative">
+            <div className="fixed top-4 left-1/2 -translate-x-1/2 w-[96%] md:w-[90%] lg:w-[85%] xl:w-[80%] z-50 pointer-events-none">
+                <div className="pointer-events-auto">
+                    <Navbar />
+                </div>
+            </div>
+            <div className="pt-32 sm:pt-36 md:pt-44 lg:pt-36">
+                {children}
+            </div>
+        </section>
+    )
+}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// import Navbar from '@/components/landing-sections/navbar'
import React from 'react'
const Layout = ({ children }: { children: React.ReactNode }) => {
return (
<section>
<Navbar />
{/* <Navbar /> */}
{children}
</section>
import React from 'react'
import Navbar from '@/components/landing-sections/navbar'
const Layout = ({ children }: { children: React.ReactNode }) => {
return (
<section className="relative">
<div className="fixed top-4 left-1/2 -translate-x-1/2 w-[96%] md:w-[90%] lg:w-[85%] xl:w-[80%] z-50 pointer-events-none">
<div className="pointer-events-auto">
<Navbar />
</div>
</div>
<div className="pt-32 sm:pt-36 md:pt-44 lg:pt-36">
{children}
</div>
</section>
)
}
🤖 Prompt for AI Agents 
In apps/web/src/app/(main)/(landing)/layout.tsx around lines 1 to 9, the Navbar
component was commented out causing pages that use this layout (e.g., /pricing)
to render without navigation; restore the Navbar import and JSX so the layout
always mounts it, and add a sticky positioning class or style to the Navbar
container (e.g., position: sticky; top: 0 or the framework-equivalent class) so
it remains visible across sibling landing routes; ensure the import path is
correct and remove any duplicate Navbar instances inside Hero to avoid double
rendering.

)
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/(main)/(landing)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { FaqSection } from '@/components/faq/FaqSection'
const Landing = () => {
return (
<main className='min-h-screen w-full bg-[#101010] text-white font-sans overflow-hidden relative'>
<Navbar />
{/* <Navbar /> */}
<div className="min-h-screen w-full max-w-[2000px] mx-auto border-x border-[#252525] overflow-hidden">
<Hero />
<Bento />
Expand Down
125 changes: 67 additions & 58 deletions apps/web/src/components/landing-sections/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,78 +5,87 @@ import React from "react";
import PrimaryButtom from "../ui/custom-button";
import Link from "next/link";
import { motion } from "framer-motion";
import Navbar from "./navbar";

const Hero = () => {
return (
<div className="w-full min-h-[50dvh] lg:h-[69dvh] relative overflow-hidden z-10 p-4 lg:p-[60px] flex flex-col items-center justify-center gap-6 ">
<Image
src="/assets/bgmain.svg"
alt="background"
fill
className="object-cover max-md:object-top w-full h-full absolute -z-10 opacity-90"
priority
/>
<div className="w-full lg:max-w-3xl space-y-3 text-center">
<motion.div
initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
transition={{ duration: 1, ease: "easeOut", type: "spring" }}
className="flex items-center justify-center gap-2 mb-4"
>
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-black/40 backdrop-blur-sm border border-[#252525]">
<span className="text-[#e1e1e1] text-sm font-medium">Backed by</span>
<div className="flex items-center gap-1.5">
<div className="w-5 h-5 bg-gradient-to-br from-[#FF6154] to-[#FF8C00] rounded flex items-center justify-center">
<span className="text-white text-xs font-bold">U</span>
<>
{/* Fixed Floating Navbar */}
<div className="fixed top-4 left-1/2 -translate-x-1/2 w-[96%] md:w-[90%] lg:w-[85%] xl:w-[80%] z-50">
<Navbar />
</div>

<div className="w-full min-h-[50dvh] lg:h-[69dvh] relative overflow-hidden z-10 px-4 lg:px-[60px] pb-4 lg:pb-[60px] flex flex-col items-center justify-center gap-6 pt-32 sm:pt-36 md:pt-44 lg:pt-36">
<Image
src="/assets/bgmain.svg"
alt="background"
fill
className="object-cover max-md:object-top w-full h-full absolute -z-10 opacity-90"
priority
/>

<div className="w-full lg:max-w-3xl space-y-3 text-center relative z-10 mt-6 sm:mt-8 md:mt-12 lg:mt-0">
<motion.div
initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
transition={{ duration: 1, ease: "easeOut", type: "spring" }}
className="flex items-center justify-center gap-2 mb-4"
>
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-black/40 backdrop-blur-sm border border-[#252525]">
<span className="text-[#e1e1e1] text-sm font-medium">Backed by</span>
<div className="flex items-center gap-1.5">
<div className="w-5 h-5 bg-gradient-to-br from-[#FF6154] to-[#FF8C00] rounded flex items-center justify-center">
<span className="text-white text-xs font-bold">U</span>
</div>
<span className="text-white text-sm font-medium">sers</span>
</div>
<span className="text-white text-sm font-medium">sers</span>
</div>
</div>
</motion.div>
<motion.h1
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
transition={{ duration: 1.2, ease: "easeOut", type: "spring" }}
className="text-5xl text-[2.8rem] lg:text-7xl lg:text-[6rem] font-medium tracking-tighter"
>
Find your perfect Open-Source Repo
</motion.h1>
<motion.p
</motion.div>
<motion.h1
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
transition={{ duration: 1.2, ease: "easeOut", type: "spring" }}
className="text-5xl text-[2.8rem] lg:text-7xl lg:text-[6rem] font-medium tracking-tighter"
>
Find your perfect Open-Source Repo
</motion.h1>
<motion.p
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
transition={{
duration: 1.2,
ease: "easeOut",
type: "spring",
delay: 0.1,
}}
className="w-full lg:text-2xl tracking-tight font-light sm:max-w-lg mx-auto lg:max-w-4xl lg:text-balance text-[#e1e1e1]"
>
Find top open-source repos in seconds. Filter by your language,
framework, or niche. Start contributing in seconds, not hours.
</motion.p>
</div>
<motion.div
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
transition={{
duration: 1.2,
ease: "easeOut",
type: "spring",
delay: 0.1,
delay: 0.2,
}}
className="w-full lg:text-2xl tracking-tight font-light sm:max-w-lg mx-auto lg:max-w-4xl lg:text-balance text-[#e1e1e1]"
className="cursor-pointer relative z-10 mt-4"
>
Find top open-source repos in seconds. Filter by your language,
framework, or niche. Start contributing in seconds, not hours.
</motion.p>
<Link href="/dashboard/home" className="block">
<PrimaryButtom>
<Terminal />
Get Started
</PrimaryButtom>
</Link>
</motion.div>
<div className="absolute h-[50%] w-full bg-gradient-to-t from-[#101010] via-transparent to-transparent bottom-0 left-1/2 -translate-x-1/2"></div>
</div>
<motion.div
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
transition={{
duration: 1.2,
ease: "easeOut",
type: "spring",
delay: 0.2,
}}
className="cursor-pointer z-30"
>
<Link href="/dashboard/home" className="block">
<PrimaryButtom>
<Terminal />
Get Started
</PrimaryButtom>
</Link>
</motion.div>
<div className="absolute h-[50%] w-full bg-gradient-to-t from-[#101010] via-transparent to-transparent bottom-0 left-1/2 -translate-x-1/2"></div>
</div>
</>
);
};

export default Hero;
export default Hero;
25 changes: 13 additions & 12 deletions apps/web/src/components/landing-sections/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Navbar = () => {
const { scrollYProgress } = useScroll();
const pathname = usePathname();
const isPricingPage = pathname === "/pricing";
const [showNavbar, setShowNavbar] = useState(isPricingPage ? true : false);
const [showNavbar, setShowNavbar] = useState(true);
const [isOpen, setIsOpen] = useState(false);

React.useEffect(() => {
Expand All @@ -29,7 +29,8 @@ const Navbar = () => {

useMotionValueEvent(scrollYProgress, "change", (latest) => {
if (!isPricingPage) {
setShowNavbar(latest > 0);
// Keep navbar visible, no hiding logic
setShowNavbar(true);
}
});

Expand All @@ -45,14 +46,14 @@ const Navbar = () => {

return (
<motion.nav
initial={{ opacity: 0 }}
animate={showNavbar ? { opacity: 1 } : { opacity: 0 }}
transition={{ duration: 0.3 }}
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, ease: "easeOut" }}
className={cn(
" z-40 flex items-center justify-between px-4 py-3 bg-neutral-900/5 backdrop-blur-xl border-white/10",
"flex items-center justify-between px-4 py-3 bg-black/20 backdrop-blur-md border border-white/10 rounded-3xl",
isPricingPage
? "relative h-max md:w-full top-0 border-b"
: "fixed rounded-3xl top-4 border w-[94%] md:w-[80%] mx-auto left-1/2 -translate-x-1/2"
? "relative h-max md:w-full border-b"
: "w-full"
)}
>
<div className="flex items-center gap-3">
Expand All @@ -64,7 +65,7 @@ const Navbar = () => {
>
{isOpen ? <X size={28} /> : <Menu size={28} />}
</button>
<div className="text-xl md:text-2xl font-medium tracking-tighter flex items-center gap-2">
<div className="text-xl md:text-2xl font-medium tracking-tighter flex items-center gap-2 text-white">
<div className="w-8 md:w-10 aspect-square overflow-hidden relative">
<Image
src="/assets/logo.svg"
Expand All @@ -76,15 +77,15 @@ const Navbar = () => {
<span>Opensox AI</span>
</div>
</div>
<div className="hidden md:flex items-center gap-5 tracking-tight text-lg font-light text-[#d1d1d1]">
<div className="hidden md:flex items-center gap-5 tracking-tight text-lg font-light text-white/90">
{links.map((link, index) => {
const isActive = pathname === link.href;
return (
<Link
key={index}
href={link.href}
className={cn(
"cursor-pointer hover:text-white",
"cursor-pointer hover:text-white transition-colors",
isActive && "text-white"
)}
>
Expand Down Expand Up @@ -143,4 +144,4 @@ const Navbar = () => {
);
};

export default Navbar;
export default Navbar;
40 changes: 15 additions & 25 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.