Skip to content

fix(navbar): prevent overflow and clipping on small screen widths (#312) #313

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
nsvoriginals wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix(navbar): prevent overflow and clipping on small screen widths (#312) #313

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a257c9e
fix: improve navbar responsiveness on small devices and logo clickable
nsvoriginals Dec 26, 2025
0880763
fix: correct gap typo and remaining breakpoints
nsvoriginals Dec 26, 2025
4dcccf9
fix: use text-text-tertiary design token instead of hardcoded color
nsvoriginals Dec 26, 2025
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
64 changes: 38 additions & 26 deletions apps/web/src/components/landing-sections/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
"use client";
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import PrimaryButton from "../ui/custom-button";
import { motion, useScroll, useMotionValueEvent } from "framer-motion";
import Image from "next/image";
Expand All @@ -15,6 +15,7 @@ const Navbar = () => {
const isPricingPage = pathname === "/pricing";
const [showNavbar, setShowNavbar] = useState(isPricingPage ? true : false);
const [isOpen, setIsOpen] = useState(false);
const [isMounted, setIsMounted] = useState(false);
const { trackButtonClick, trackLinkClick } = useAnalytics();

const handleGetStartedClick = (location: "navbar" | "mobile_menu") => {
Expand All @@ -30,6 +31,10 @@ const Navbar = () => {
);
};

useEffect(() => {
setIsMounted(true);
}, []);

React.useEffect(() => {
const handleEscape = (e: KeyboardEvent) => {
if (e.key === "Escape" && isOpen) {
Expand Down Expand Up @@ -58,48 +63,55 @@ const Navbar = () => {
{ name: "FAQ", href: "/#faq" },
];

if (!isMounted) {
return null;
}

return (
<motion.nav
initial={{ opacity: 0 }}
animate={showNavbar ? { opacity: 1 } : { opacity: 0, display: "none" }}
animate={{
opacity: showNavbar ? 1 : 0,
pointerEvents: showNavbar ? "auto" : "none"
}}
transition={{ duration: 0.3 }}
className={cn(
" z-40 flex items-center justify-between px-4 py-3 bg-neutral-900/5 backdrop-blur-xl border-white/10",
"z-40 flex items-center justify-between px-4 py-3 bg-neutral-900/5 backdrop-blur-xl border-white/10",
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 w-full top-0 border-b"
: "fixed rounded-3xl top-4 border w-[calc(100%-2rem)] lg:w-[90%] xl:w-[85%] 2xl:w-[80%] max-w-[1600px] mx-auto left-1/2 -translate-x-1/2"
)}
>
<div className="flex items-center gap-3">
<div className="flex items-center gap-2 lg:gap-3">
<button
className="min-[1115px]:hidden text-white"
className="lg:hidden text-white p-2 min-h-[44px] min-w-[44px] flex items-center justify-center -ml-2"
onClick={() => setIsOpen(!isOpen)}
aria-label="Toggle navigation menu"
aria-expanded={isOpen}
>
{isOpen ? <X size={28} /> : <Menu size={28} />}
{isOpen ? <X size={24} /> : <Menu size={24} />}
</button>
<div className="text-xl md:text-2xl font-medium tracking-tighter flex items-center gap-2">
<div className="w-8 md:w-10 aspect-square overflow-hidden relative">
<Link href="/" className="text-lg lg:text-xl xl:text-2xl font-medium tracking-tighter flex items-center gap-2">
<div className="w-8 lg:w-9 xl:w-10 aspect-square overflow-hidden relative flex-shrink-0">
<Image
src="/assets/logo.svg"
alt="background"
alt="Opensox AI logo"
fill
className="object-cover w-full h-full"
className="object-cover"
/>
</div>
<span>Opensox AI</span>
</div>
<span className="whitespace-nowrap">Opensox AI</span>
</Link>
</div>
<div className="hidden min-[1115px]:flex items-center gap-5 max-[1270px]:gap-4 max-[1173px]:gap-3 tracking-tight text-lg max-[1270px]:text-base max-[1173px]:text-sm font-light max-[1173px]:font-normal text-[#d1d1d1]">
<div className="hidden lg:flex items-center gap-2 xl:gap-3 2xl:gap-4 tracking-tight text-sm xl:text-base 2xl:text-lg font-light xl:font-normal text-text-tertiary">
{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 whitespace-nowrap",
isActive && "text-white"
)}
>
Expand All @@ -108,24 +120,24 @@ const Navbar = () => {
);
})}
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-2 lg:gap-3">
<Link
href="https://github.com/apsinghdev/opensox"
target="_blank"
rel="noopener noreferrer"
onClick={() => handleContributeClick("navbar")}
className="hidden min-[1115px]:flex items-center gap-2 px-4 py-2.5 bg-github-bg hover:bg-github-hover transition-colors rounded-lg border border-github-border text-white"
className="hidden lg:flex items-center gap-1.5 xl:gap-2 px-3 xl:px-4 py-2 xl:py-2.5 bg-github-bg hover:bg-github-hover transition-colors rounded-lg border border-github-border text-white"
>
<Github className="w-5 h-5" />
<span className="text-sm font-medium">Contribute</span>
<Github className="w-4 h-4 xl:w-5 xl:h-5 flex-shrink-0" />
<span className="text-xs xl:text-sm font-medium whitespace-nowrap">Contribute</span>
</Link>
<Link
href="/dashboard/home"
className="cursor-pointer z-30"
onClick={() => handleGetStartedClick("navbar")}
>
<PrimaryButton classname="px-3 py-2 text-sm whitespace-nowrap md:px-5 md:py-3 md:text-base">
<Terminal className="w-4 h-4 md:w-5 md:h-5" />
<PrimaryButton classname="px-3 py-2 text-xs lg:text-sm xl:text-base whitespace-nowrap lg:px-4 xl:px-5 lg:py-2.5 xl:py-3">
<Terminal className="w-4 h-4 xl:w-5 xl:h-5 flex-shrink-0" />
<span>Get Started</span>
</PrimaryButton>
</Link>
Expand All @@ -135,14 +147,14 @@ const Navbar = () => {
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.25 }}
className="absolute top-full mt-2 left-0 w-full bg-neutral-900/90 backdrop-blur-xl border border-white/10 min-[1115px]:hidden flex flex-col items-center py-5 space-y-4 z-50 rounded-3xl"
className="absolute top-full mt-2 left-0 w-full max-h-[80vh] overflow-y-auto bg-neutral-900/95 backdrop-blur-xl border border-white/10 lg:hidden flex flex-col items-center py-5 space-y-4 z-50 rounded-3xl shadow-xl"
>
{links.map((link, index) => (
<Link
key={index}
href={link.href}
onClick={() => setIsOpen(false)}
className="text-white hover:text-gray-300 text-lg"
className="text-white hover:text-gray-300 text-base transition-colors"
>
{link.name}
</Link>
Expand All @@ -155,7 +167,7 @@ const Navbar = () => {
setIsOpen(false);
handleContributeClick("mobile_menu");
}}
className="flex items-center gap-2 px-4 py-2 bg-github-bg hover:bg-github-hover rounded-lg border border-github-border text-white transition-colors"
className="flex items-center gap-2 px-4 py-2.5 bg-github-bg hover:bg-github-hover rounded-lg border border-github-border text-white transition-colors"
>
<Github className="w-5 h-5" />
<span className="text-sm font-medium">Contribute</span>
Expand All @@ -166,4 +178,4 @@ const Navbar = () => {
);
};

export default Navbar;
export default Navbar;