fix: align navbar width with blog content on scroll

[kunalbatra339]

Fixes: #3429

Updated the FloatingNavbar component to use 'max-w-7xl' in the scrolled state.
This ensures the navbar maintains correct alignment with the main blog content
instead of shrinking to a narrow pill shape.

[amaan-bhati]

Hey @kunalbatra339 Thanks for raising this pr, the idea of simply increasing the width of the navbar is good, it might help align the navbar width to the the hero section like this:

But in cases when the navbar shrinks, it needs to align to the other sections as well, since the navbar remains entact all the time, the ideais to create a good user experience so that they dont need to move their eyes much, hence, when we get to reach these sectios, the navbar needs to shrink to match their width, in this case we can start with the making the navbar have the same width as the hero section as it is right now in case of shrinking, and when we scroll down to other sections, it's width decreses to match their width for an attention to fetail, i have attached the reference images for what i am talking about here for the better understanding of the issue:

[kunalbatra339]

@amaan-bhati I've implemented the two-stage shrink logic as requested! I also added a requestAnimationFrame throttle to the scroll event listener to ensure the animation remains buttery smooth (60fps) even on lower-end devices. Logic:

Hero Stage: Expands to 85% width when scrolling starts (matching the Hero).

Content Stage: Smoothly shrinks to max-w-7xl after passing the Hero section (~750px) to align with the blog content.

[amaan-bhati]

Hey @kunalbatra339 thanks for following up on the review, i tried it again on the local and have a few suggestions:

• the inital state of the navbar looks good and should stay the same till we get past the hero seciton since the alignment of the navbar matches the hero section in the initial state. image for reference:

- The alignment of the navbar when shrinked, instead of getting reduced, it increases and does not matches the width of the other sections and there is a clear gap between the navbar and the sections while scrolling, this gap needs to get removed and the navbar should be aligned in a way that it matches the length of the other sections after scrolling past the hero section, i have attachd the image for reference and better understanding of the issue:

[kunalbatra339]

@amaan-bhati I've updated the logic based on your screenshot! You were right—the intermediate width was causing a gap.

Fixes applied:

Removed the width expansion: The navbar now stays strictly at max-w-7xl in both states to ensure perfect vertical alignment with the blog content cards.

Delayed Transition: As requested, the "initial state" now persists until the user scrolls past the Hero section (~760px). The "Pill" style only activates once we enter the content area, creating a cleaner transition.