fix: make navbar sticky throughout the page #153
Conversation
|
@codebyNJ is attempting to deploy a commit to the AJEET PRATAP SINGH's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
|
WalkthroughThe changes relocate the Navbar component from the page and layout files to the Hero section, centralizing it within the hero layout. The Navbar component receives significant styling and animation updates, including modified entrance animations with vertical offset, revised background properties, and updated branding and link styling. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25–30 minutes Areas requiring extra attention:
Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/web/src/components/landing-sections/navbar.tsx (1)
15-35: Drop the unused showNavbar state and scroll listener.
Now that the navbar is meant to stay visible,showNavbaris never read and we still wire upuseScroll/useMotionValueEvent, causing unnecessary subscriptions and callbacks on every scroll tick. Please remove the state and listener to avoid the extra overhead.-import { motion, useScroll, useMotionValueEvent } from "framer-motion"; +import { motion } from "framer-motion"; … - const [showNavbar, setShowNavbar] = useState(true); const [isOpen, setIsOpen] = useState(false); … - useMotionValueEvent(scrollYProgress, "change", (latest) => { - if (!isPricingPage) { - // Keep navbar visible, no hiding logic - setShowNavbar(true); - } - });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (4)
apps/web/src/app/(main)/(landing)/layout.tsx(1 hunks)apps/web/src/app/(main)/(landing)/page.tsx(1 hunks)apps/web/src/components/landing-sections/Hero.tsx(1 hunks)apps/web/src/components/landing-sections/navbar.tsx(6 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
apps/web/src/components/landing-sections/navbar.tsx (1)
apps/web/src/lib/utils.ts (1)
cn(4-6)
apps/web/src/components/landing-sections/Hero.tsx (1)
apps/web/src/components/icons/icons.tsx (1)
Terminal(1-5)
| // import Navbar from '@/components/landing-sections/navbar' | ||
| import React from 'react' | ||
|
|
||
| const Layout = ({ children }: { children: React.ReactNode }) => { | ||
| return ( | ||
| <section> | ||
| <Navbar /> | ||
| {/* <Navbar /> */} | ||
| {children} | ||
| </section> |
There was a problem hiding this comment.
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.
| // 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.
1 participant
Description
Fixes the navbar to remain sticky at the top of the page while scrolling.
Changes
absolutetofixedin Hero componentTesting
Summary by CodeRabbit
Release Notes