Skip to content

navbar modification #108

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
merged 1 commit into from
Jan 19, 2025
Merged

navbar modification #108

Show file tree
Hide file tree
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
190 changes: 107 additions & 83 deletions components/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,105 +5,129 @@ import Link from "next/link";
import { usePathname } from "next/navigation";
import { Button } from "@/components/ui/button";
import { ThemeToggle } from "@/components/theme-toggle";
import { BookOpen, Menu, X } from "lucide-react";
import { BookOpen, Menu as MenuIcon, X } from "lucide-react";
import { HoveredLink, Menu, MenuItem } from "@/components/ui/navbar-menu";

const navItems = [
{ href: "/", label: "Home" },
// { href: "features", label: "Features" },
{ href: "/learn-more", label: "How it Works" },
{ href: "/FAQ", label: "FAQs" },
// { href: "/blog", label: "Blog" },
{ href: "/blogs", label: "Blogs" },
{ href: "/web-dev", label: "Web Development" },
{ href: "/interface-design", label: "Interface Design" },
{ href: "/seo", label: "Search Engine Optimization" },
{ href: "/branding", label: "Branding" },
{ href: "/hobby", label: "Hobby" },
{ href: "/individual", label: "Individual" },
{ href: "/team", label: "Team" },
{ href: "/enterprise", label: "Enterprise" },
];

const Navbar1 = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const pathname = usePathname();
// Logo Component
const Logo = () => (
<div className="flex items-center space-x-2">
<BookOpen className="h-6 w-6 text-primary mx-2" />
<span className="text-xl font-semibold font-sans">LeetCodeJournal</span>
</div>
);

const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
// Menu Toggle Button
const MenuToggle = ({ isMenuOpen, toggleMenu }: { isMenuOpen: boolean; toggleMenu: () => void }) => (
<div onClick={toggleMenu} className="lg:hidden focus:outline-none" role="button" aria-label={isMenuOpen ? "Close menu" : "Open menu"}>
<div className="flex flex-row justify-center items-center gap-2">
<ThemeToggle />
{isMenuOpen ? <X size={24} /> : <MenuIcon size={24} />}
</div>
</div>
);

// Mobile Menu
const MobileMenu = ({ isMenuOpen, toggleMenu, pathname }: { isMenuOpen: boolean; toggleMenu: () => void; pathname: string }) => {
if (!isMenuOpen) return null;
return (
<header className="sticky top-4 z-50 w-full">
<nav className="mx-auto max-w-[95%] h-16 rounded-xl border border-foreground/50 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/70 flex items-center justify-between px-4 sm:px-6">
<div className="flex items-center space-x-2">
<BookOpen className="h-6 w-6 text-primary mx-2" />
<span className="text-xl font-semibold font-sans">
LeetCodeJournal
</span>
</div>
<div className="hidden lg:flex items-center space-x-6">
{navItems.map((item) => (
<Link
key={item.href}
href={item.href}
className={`text-sm px-2 font-medium transition-colors hover:text-primary ${
pathname === item.href
? "text-primary"
: "text-muted-foreground"
}`}
>
{item.label}
</Link>
))}
</div>
<div className="hidden lg:flex items-center space-x-4">
<Button
asChild
className="bg-transparent hover:bg-transparent hover:text-white hover:border-foreground border border-muted-foreground text-muted-foreground"
<div className="lg:hidden mx-auto max-w-[95%] mt-2">
<nav className="rounded-lg border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/10 flex flex-col space-y-4 py-4 px-4">
{navItems.map((item) => (
<Link
key={item.href}
href={item.href}
className={`text-sm font-medium transition-colors hover:text-primary ${pathname === item.href ? "text-primary" : "text-muted-foreground"}`}
onClick={toggleMenu}
>
{item.label}
</Link>
))}
<div className="flex flex-col space-y-4 pt-4 border-t">
<Button asChild className="bg-primary-foreground text-white">
<Link href="/auth/signin">Login</Link>
</Button>
<Button asChild>
<Button asChild onClick={toggleMenu}>
<Link href="/auth/register">Sign up</Link>
</Button>
<ThemeToggle />
</div>
<div
onClick={toggleMenu}
className="lg:hidden focus:outline-none"
role="button"
aria-label={isMenuOpen ? "Close menu" : "Open menu"}
>
{/* ADDED THEME TOGGLE ALONG WITH MENU */}
<div className="flex flex-row justify-center items-center gap-2">
<ThemeToggle />
{isMenuOpen ? <X size={24} /> : <Menu size={24} />}
</div>
</div>
</nav>
</div>
);
};

{isMenuOpen && (
<div className="lg:hidden mx-auto max-w-[95%] mt-2">
{/* ADDED X-PADDING TO MAKE IT FIT PROPERLY ON MOBILE SCREENS */}
<nav className="rounded-lg border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/10 flex flex-col space-y-4 py-4 px-4">
{navItems.map((item) => (
<Link
key={item.href}
href={item.href}
className={`text-sm font-medium transition-colors hover:text-primary ${
pathname === item.href
? "text-primary"
: "text-muted-foreground"
}`}
onClick={toggleMenu}
>
{item.label}
</Link>
))}
<div className="flex flex-col space-y-4 pt-4 border-t">
{/* FORMATTED THE LOGIN BUTTON -> LOGIN TEXT IN CENTER AND BACKGROUND ADDED */}
<Button asChild className="bg-primary-foreground text-white">
<Link href="/auth/signin">Login</Link>
</Button>
<Button asChild onClick={toggleMenu}>
<Link href="/auth/register">Sign up</Link>
</Button>
<div className="flex justify-start"></div>
</div>
</nav>
</div>
)}
const Navbar1 = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const pathname = usePathname();
const [active, setActive] = useState<string | null>(null);

const toggleMenu = () => setIsMenuOpen(!isMenuOpen);

return (
<header className="sticky top-4 z-50 w-full">
<div className="relative mx-auto max-w-[95%] rounded-xl">
{/* Gradient Border */}
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 p-[2px] blur-lg"></div>

{/* Navbar */}
<nav className="relative z-10 h-16 rounded-xl border border-transparent bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/70 flex items-center justify-between px-4 sm:px-6">
<Logo />
<div className="hidden lg:flex items-center space-x-6">
<Menu setActive={setActive}>
<MenuItem setActive={setActive} active={active} item="Home">
<div className="flex flex-col space-y-4 text-sm">
<HoveredLink href="/web-dev">Web Development</HoveredLink>
<HoveredLink href="/interface-design">Interface Design</HoveredLink>
<HoveredLink href="/seo">Search Engine Optimization</HoveredLink>
<HoveredLink href="/branding">Branding</HoveredLink>
</div>
</MenuItem>
<MenuItem setActive={setActive} active={active} item="How it Works">
<div className="text-sm grid grid-cols-2 gap-10">
<HoveredLink href="/hobby">Hobby</HoveredLink>
</div>
</MenuItem>
<MenuItem setActive={setActive} active={active} item="FAQs">
<div className="flex flex-col space-y-4 text-sm">
<HoveredLink href="/hobby">Hobby</HoveredLink>
<HoveredLink href="/individual">Individual</HoveredLink>
<HoveredLink href="/team">Team</HoveredLink>
<HoveredLink href="#">Enterprise</HoveredLink>
</div>
</MenuItem>
<MenuItem setActive={setActive} active={active} item="Blogs">
<div className="flex flex-col space-y-4 text-sm">
<HoveredLink href="#">Blogs1</HoveredLink>
<HoveredLink href="#">Blogs2</HoveredLink>
</div>
</MenuItem>
</Menu>
</div>
<div className="hidden lg:flex items-center space-x-4">
<Button asChild className="bg-transparent hover:bg-transparent hover:text-white hover:border-foreground border border-muted-foreground text-muted-foreground">
<Link href="/auth/signin">Login</Link>
</Button>
<Button asChild>
<Link href="/auth/register">Sign up</Link>
</Button>
<ThemeToggle />
</div>
<MenuToggle isMenuOpen={isMenuOpen} toggleMenu={toggleMenu} />
</nav>
</div>
<MobileMenu isMenuOpen={isMenuOpen} toggleMenu={toggleMenu} pathname={pathname} />
</header>

);
};

Expand Down
72 changes: 72 additions & 0 deletions components/ui/background-gradient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import { cn } from "@/lib/utils";
import React from "react";
import { motion } from "framer-motion";

export const BackgroundGradient = ({
children,
className,
containerClassName,
animate = true,
}: {
children?: React.ReactNode;
className?: string;
containerClassName?: string;
animate?: boolean;
}) => {
const variants = {
initial: {
backgroundPosition: "0 50%",
},
animate: {
backgroundPosition: ["0, 50%", "100% 50%", "0 50%"],
},
};
return (
<div className={cn("relative p-[4px] group", containerClassName)}>
<motion.div
variants={animate ? variants : undefined}
initial={animate ? "initial" : undefined}
animate={animate ? "animate" : undefined}
transition={
animate
? {
duration: 5,
repeat: Infinity,
repeatType: "reverse",
}
: undefined
}
style={{
backgroundSize: animate ? "400% 400%" : undefined,
}}
className={cn(
"absolute inset-0 rounded-3xl z-[1] opacity-60 group-hover:opacity-100 blur-xl transition duration-500 will-change-transform",
" bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]"
)}
/>
<motion.div
variants={animate ? variants : undefined}
initial={animate ? "initial" : undefined}
animate={animate ? "animate" : undefined}
transition={
animate
? {
duration: 5,
repeat: Infinity,
repeatType: "reverse",
}
: undefined
}
style={{
backgroundSize: animate ? "400% 400%" : undefined,
}}
className={cn(
"absolute inset-0 rounded-3xl z-[1] will-change-transform",
"bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]"
)}
/>

<div className={cn("relative z-10", className)}>{children}</div>
</div>
);
};
Loading
Loading