Skip to content

GFG | refactor: updated navbar #20

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

Merged
dewank07 merged 2 commits into from
May 31, 2025
Merged

GFG | refactor: updated navbar #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b7a117d
GFG | refactor: updated navbar
vaibhavxtripathi May 31, 2025
ef7530b
GFG | refactor: updated navbar for smaller screen
vaibhavxtripathi May 31, 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
216 changes: 181 additions & 35 deletions components/ui/FloatingNavbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,11 @@ import {
} from "framer-motion";
import Link from "next/link";
import { cn } from "@/lib/utils";
import Image from "next/image";
import { usePathname } from "next/navigation";
import MobileNavModal from "./MobileNavModal";
import { HiMenu } from "react-icons/hi";

// Accept props correctly (function parameter was broken)
interface NavItem {
name: string;
link: string;
Expand All @@ -23,54 +26,197 @@ interface Props {

const FloatingNavbar: React.FC<Props> = ({ navItems, className }) => {
const { scrollYProgress } = useScroll();

// set true for the initial state so that nav bar is visible in the hero section
const [visible, setVisible] = useState(true);
const [isScrolled, setIsScrolled] = useState(false);
const [mobileNavOpen, setMobileNavOpen] = useState(false);

useMotionValueEvent(scrollYProgress, "change", (current) => {
// Check if current is not undefined and is a number
if (typeof current === "number") {
const previous = scrollYProgress.getPrevious();
const direction = current - (previous ?? 0);
let direction = current! - scrollYProgress.getPrevious()!;

if (scrollYProgress.get() < 0.05) {
// also set true for the initial state
setVisible(true);
setIsScrolled(false);
} else {
setVisible(direction < 0);
if (direction < 0) {
setVisible(true);
}
setIsScrolled(true);
}
}
});
const pathname = usePathname();
const isDashboard = pathname?.startsWith("/dashboard");
const isAdminDashboard = pathname === "/dashboard/admin";

return (
<AnimatePresence mode="wait">
<motion.div
initial={{ opacity: 1, y: -100 }}
animate={{
y: visible ? 0 : -100,
opacity: visible ? 1 : 0,
}}
transition={{ duration: 0.2 }}
className={cn(
"flex max-w-fit md:min-w-[70vw] lg:min-w-fit fixed z-[5000] top-10 inset-x-0 mx-auto px-10 py-5 rounded-lg border border-black/10 shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] items-center justify-center space-x-4",
className
)}
style={{
backdropFilter: "blur(16px) saturate(180%)",
backgroundColor: "rgba(17, 25, 40, 0.75)",
borderRadius: "12px",
border: "1px solid rgba(255, 255, 255, 0.125)",
}}
>
{navItems.map((navItem, idx) => (
<Link
key={`nav-link-${idx}`}
href={navItem.link}
className="relative dark:text-neutral-50 flex items-center space-x-1 text-neutral-600 dark:hover:text-neutral-300 hover:text-neutral-500"
<>
<AnimatePresence mode="wait">
<motion.div
initial={{
opacity: 1,
y: -100,
}}
animate={{
y: visible ? 0 : -100,
opacity: visible ? 1 : 0,
}}
transition={{
duration: 0.2,
}}
className={cn(
"flex max-w-fit md:min-w-[70vw] lg:min-w-fit fixed z-[5000] lg:top-10 top-5 inset-x-0 mx-auto px-8 py-5 rounded-lg border-black/.1 shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] items-center justify-between",
className
)}
style={{
...(isScrolled
? {
backdropFilter: "blur(16px) saturate(180%)",
backgroundColor: "rgba(17, 25, 40, 0.75)",
borderRadius: "20px",
border: "1px solid rgba(255, 255, 255, 0.125)",
}
: {}),
willChange: "transform, opacity",
}}
>
{/* Elixir text on the left */}
<motion.div
animate={{
scale: isScrolled ? 0.95 : 1,
x: isScrolled ? 10 : 0,
marginRight: isScrolled ? 48 : 224,
}}
transition={{
duration: 0.22,
ease: [0.420, 0.000, 0.580, 1.000],
}}
className={cn(
"flex items-center gap-2 text-white font-bold text-xl transition-all duration-400",
isScrolled ? "mr-12" : "mr-56"
)}
style={{ willChange: "transform, opacity, margin-right" }}
>
<Image
src="/Elixir-logo.png"
alt="Elixir Logo"
width={28}
height={28}
className="rounded-md mr-2"
style={{ objectFit: "contain" }}
/>
<span>Elixir</span>
</motion.div>
{/* Hamburger icon for mobile */}
<div className="md:hidden flex items-center ml-auto">
<button
aria-label="Open navigation menu"
onClick={() => setMobileNavOpen(true)}
className="p-2 rounded-md text-white hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<HiMenu size={28} />
</button>
</div>
{/* Navigation items in the center (hidden on mobile) */}
<motion.div
animate={{
scale: isScrolled ? 0.98 : 1,
opacity: isScrolled ? 0.9 : 1,
}}
transition={{
duration: 0.22,
ease: [0.420, 0.000, 0.580, 1.000],
}}
className="hidden md:flex items-center space-x-4"
style={{ willChange: "transform, opacity" }}
>
{navItems.map((navItem: any, idx: number) => (
<motion.div
key={`link=${idx}`}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
style={{ willChange: "transform, opacity" }}
>
<Link
href={navItem.link}
className={cn(
"relative dark:text-neutral-50 items-center flex space-x-1 text-neutral-600 dark:hover:text-neutral-300 hover:text-neutral-500"
)}
>
<span className="block sm:hidden">{navItem.icon}</span>
<span className="text-sm !cursor-pointer">
{navItem.name}
</span>
</Link>
</motion.div>
))}
</motion.div>
{/* Login button on the right (hidden on mobile) */}
<motion.button
animate={{
scale: isScrolled ? 0.95 : 1,
x: isScrolled ? -10 : 0,
marginLeft: isScrolled ? 48 : 224,
}}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
transition={{
duration: 0.22,
ease: [0.420, 0.000, 0.580, 1.000],
}}
className={cn(
"hidden md:flex border text-sm font-medium relative border-neutral-200 dark:border-white/[0.2] text-white px-4 py-2 rounded-full hover:bg-white/10 transition-all duration-400",
isScrolled ? "ml-12" : "ml-56"
)}
style={{ willChange: "transform, opacity, margin-left" }}
>
<span className="block sm:hidden">{navItem.icon}</span>
<span className="text-sm !cursor-pointer">{navItem.name}</span>
</Link>
))}
</motion.div>
</AnimatePresence>
<div className="flex items-center gap-4">
{!isDashboard ? (
<>
<Link
href="/dashboard"
className="text-white/80 hover:text-white transition-colors"
>
Login
</Link>
</>
) : isAdminDashboard ? (
<div className="text-white/80 hover:text-white transition-colors cursor-pointer">
Admin
</div>
) : (
<div className="text-white/80 hover:text-white transition-colors cursor-pointer">
User
</div>
)}
</div>

<motion.span
animate={{
scale: isScrolled ? 0.9 : 1,
opacity: isScrolled ? 0.8 : 1,
}}
transition={{
duration: 0.22,
ease: [0.420, 0.000, 0.580, 1.000],
}}
className="absolute inset-x-0 w-1/2 mx-auto -bottom-px bg-gradient-to-r from-transparent via-blue-500 to-transparent h-px"
style={{ willChange: "transform, opacity" }}
/>
</motion.button>
</motion.div>
</AnimatePresence>
{/* Mobile Navigation Modal */}
<MobileNavModal
open={mobileNavOpen}
onClose={() => setMobileNavOpen(false)}
navItems={navItems}
/>
</>
);
};

export default FloatingNavbar;
148 changes: 148 additions & 0 deletions components/ui/MobileNavModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
import React from "react";
import { motion, AnimatePresence } from "framer-motion";
import { cn } from "@/lib/utils";
import Link from "next/link";
import { usePathname } from "next/navigation";
import Image from "next/image";
import { HiX, HiArrowRight } from "react-icons/hi";

interface NavItem {
name: string;
link: string;
icon?: JSX.Element;
}

interface MobileNavModalProps {
open: boolean;
onClose: () => void;
navItems: NavItem[];
}

const overlayVariants = {
hidden: { opacity: 0 },
visible: { opacity: 1 },
};

const modalVariants = {
hidden: { y: "100%", opacity: 0 },
visible: { y: 0, opacity: 1 },
};

const MobileNavModal: React.FC<MobileNavModalProps> = ({
open,
onClose,
navItems,
}) => {
const pathname = usePathname();
const isDashboard = pathname?.startsWith("/dashboard");
const isAdminDashboard = pathname === "/dashboard/admin";

return (
<AnimatePresence>
{open && (
<>
{/* Overlay */}
<motion.div
className="fixed inset-0 z-[9999] bg-black/40 backdrop-blur-[8px]"
initial="hidden"
animate="visible"
exit="hidden"
variants={overlayVariants}
transition={{ duration: 0.18 }}
onClick={onClose}
/>
{/* Modal */}
<motion.div
className="fixed z-[10000] left-0 right-0 bottom-0 mx-auto w-full max-w-md rounded-t-2xl bg-[rgba(28,32,44,0.82)] border border-white/10 backdrop-blur-xl shadow-xl px-5 pt-5 pb-7 flex flex-col items-center"
initial="hidden"
animate="visible"
exit="hidden"
variants={modalVariants}
transition={{ type: "spring", stiffness: 320, damping: 30 }}
style={{
boxShadow: "0 4px 24px 0 rgba(31, 38, 135, 0.10)",
border: "1px solid rgba(255,255,255,0.05)",
}}
>
{/* Logo/brand and close button row */}
<div className="w-full flex items-center justify-between mb-4 mt-1 select-none">
<div className="flex items-center gap-2">
<Image
src="/Elixir-logo.png"
alt="Elixir Logo"
width={28}
height={28}
className="rounded-md"
style={{ objectFit: "contain" }}
/>
<span className="text-white font-semibold text-lg tracking-tight">
Elixir
</span>
</div>
<button
onClick={onClose}
className="p-2 rounded-full bg-white/5 hover:bg-white/10 text-white focus:outline-none focus:ring-2 focus:ring-blue-400 z-10 transition"
aria-label="Close navigation menu"
>
<HiX size={22} />
</button>
</div>
{/* Nav items */}
<nav className="w-full flex flex-col divide-y divide-white/8 mb-7 bg-white/0 rounded-xl overflow-hidden shadow-none">
{navItems.map((item, idx) => (
<Link
key={item.link + idx}
href={item.link}
className={cn(
"flex items-center gap-3 text-base font-medium text-white/90 hover:text-white transition-colors px-4 py-3 w-full bg-transparent hover:bg-white/5 active:scale-[0.99] focus:outline-none focus:ring-1 focus:ring-blue-400",
idx === 0 ? "rounded-t-xl" : "",
idx === navItems.length - 1 ? "rounded-b-xl" : ""
)}
onClick={onClose}
style={{
fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif",
}}
>
{item.icon && (
<span className="text-lg opacity-80">{item.icon}</span>
)}
<span className="flex-1 text-left">{item.name}</span>
</Link>
))}
</nav>
{/* Login/Dashboard button */}
<div className="w-full flex flex-col gap-2">
{!isDashboard ? (
<Link
href="/dashboard"
className="relative w-full py-2.5 rounded-full border border-white/40 bg-transparent text-white/90 text-md flex items-center justify-center transition-all duration-200 text-center focus:outline-none focus:ring-2 focus:ring-blue-300 overflow-hidden"
onClick={onClose}
style={{
fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif",
}}
>
Login
<HiArrowRight size={15} className="ml-1" />
{/* Blue highlight at the bottom center */}
<span className="pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-0 w-1/3 h-[2px] bg-gradient-to-r from-transparent via-blue-400 to-transparent opacity-80" />
</Link>
) : isAdminDashboard ? (
<div className="w-full py-2.5 rounded-full border border-white/15 bg-transparent text-white/90 font-medium text-xl flex items-center justify-center text-center select-none cursor-default relative overflow-hidden">
Admin
<span className="pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-0 w-1/3 h-[2px] bg-gradient-to-r from-transparent via-blue-400 to-transparent opacity-80" />
</div>
) : (
<div className="w-full py-2.5 rounded-full border border-white/15 bg-transparent text-white/90 font-medium text-xl flex items-center justify-center text-center select-none cursor-default relative overflow-hidden">
User
<span className="pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-0 w-1/3 h-[2px] bg-gradient-to-r from-transparent via-blue-400 to-transparent opacity-80" />
</div>
)}
</div>
</motion.div>
</>
)}
</AnimatePresence>
);
};

export default MobileNavModal;