Skip to content

fix: navbar responsive issue #236

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
M0hitThapa wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: navbar responsive issue #236

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
32 changes: 16 additions & 16 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 @@ -46,45 +46,45 @@ const Navbar = () => {
return (
<motion.nav
initial={{ opacity: 0 }}
animate={showNavbar ? { opacity: 1 } : { opacity: 0, display: 'none' }}
animate={showNavbar ? { opacity: 1 } : { opacity: 0, display: "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-3 sm:px-4 lg:px-6 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"
: "fixed rounded-3xl top-4 border w-[95%] sm:w-[90%] lg:w-[85%] xl:w-[80%] mx-auto left-1/2 -translate-x-1/2"
)}
>
<div className="flex items-center gap-3">
<div className="flex items-center gap-2 sm:gap-3">
<button
className="md:hidden text-white"
className="lg:hidden text-white"
onClick={() => setIsOpen(!isOpen)}
aria-label="Toggle navigation menu"
aria-expanded={isOpen}
>
{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="w-8 md:w-10 aspect-square overflow-hidden relative">
<div className="text-lg sm:text-xl lg:text-2xl sm:rounded-3xl font-medium tracking-tighter flex items-center gap-2 min-w-0">
<div className="w-7 sm:w-8 lg:w-10 aspect-square overflow-hidden relative shrink-0">
<Image
src="/assets/logo.svg"
alt="background"
fill
className="object-cover w-full h-full"
/>
</div>
<span>Opensox AI</span>
<span className="truncate">Opensox AI</span>
</div>
</div>
<div className="hidden md:flex items-center gap-5 tracking-tight text-lg font-light text-text-tertiary">
<div className="hidden lg:flex items-center gap-3 xl:gap-5 tracking-tight text-base xl:text-lg font-light 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 whitespace-nowrap transition-colors",
isActive && "text-white"
)}
>
Expand All @@ -93,19 +93,19 @@ const Navbar = () => {
);
})}
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-2 sm:gap-3">
<Link
href="https://github.com/apsinghdev/opensox"
target="_blank"
rel="noopener noreferrer"
className="hidden lg:flex items-center gap-2 px-4 py-2.5 bg-[#0d1117] hover:bg-[#161b22] transition-colors rounded-lg border border-[#30363d] text-white"
className="hidden xl:flex items-center gap-2 px-3 py-2 bg-[#0d1117] hover:bg-[#161b22] transition-colors rounded-lg border border-[#30363d] text-white"
>
<Github className="w-5 h-5" />
<span className="text-sm font-medium">Contribute</span>
</Link>
<Link href="/dashboard/home" className="cursor-pointer z-30">
<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=" whitespace-nowrap px-2.5 py-2 text-xs sm:text-sm lg:text-base sm:px-4 lg:px-5 sm:py-2.5 lg:py-3">
<Terminal className="w-3.5 h-3.5 sm:w-4 sm:h-4 lg:w-5 lg:h-5" />
<span>Get Started</span>
</PrimaryButton>
</Link>
Expand All @@ -115,14 +115,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 md: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 bg-neutral-900/90 backdrop-blur-xl border border-white/10 lg:hidden flex flex-col items-center py-5 space-y-4 z-50 rounded-3xl"
>
{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 sm:text-lg"
>
{link.name}
</Link>
Expand Down