Skip to content

Commit ef1b384

Browse files
momo-shogunmomo-shogun
committed
navbar modification
1 parent 7995c8c commit ef1b384

File tree

3 files changed

+300
-83
lines changed

3 files changed

+300
-83
lines changed

‎components/navbar.tsx‎

Lines changed: 107 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -5,105 +5,129 @@ import Link from "next/link";
55
import { usePathname } from "next/navigation";
66
import { Button } from "@/components/ui/button";
77
import { ThemeToggle } from "@/components/theme-toggle";
8-
import { BookOpen, Menu, X } from "lucide-react";
8+
import { BookOpen, Menu as MenuIcon, X } from "lucide-react";
9+
import { HoveredLink, Menu, MenuItem } from "@/components/ui/navbar-menu";
910

1011
const navItems = [
11-
{ href: "/", label: "Home" },
12-
// { href: "features", label: "Features" },
13-
{ href: "/learn-more", label: "How it Works" },
14-
{ href: "/FAQ", label: "FAQs" },
15-
// { href: "/blog", label: "Blog" },
16-
{ href: "/blogs", label: "Blogs" },
12+
{ href: "/web-dev", label: "Web Development" },
13+
{ href: "/interface-design", label: "Interface Design" },
14+
{ href: "/seo", label: "Search Engine Optimization" },
15+
{ href: "/branding", label: "Branding" },
16+
{ href: "/hobby", label: "Hobby" },
17+
{ href: "/individual", label: "Individual" },
18+
{ href: "/team", label: "Team" },
19+
{ href: "/enterprise", label: "Enterprise" },
1720
];
1821

19-
const Navbar1 = () => {
20-
const [isMenuOpen, setIsMenuOpen] = useState(false);
21-
const pathname = usePathname();
22+
// Logo Component
23+
const Logo = () => (
24+
<div className="flex items-center space-x-2">
25+
<BookOpen className="h-6 w-6 text-primary mx-2" />
26+
<span className="text-xl font-semibold font-sans">LeetCodeJournal</span>
27+
</div>
28+
);
2229

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

40+
// Mobile Menu
41+
const MobileMenu = ({ isMenuOpen, toggleMenu, pathname }: { isMenuOpen: boolean; toggleMenu: () => void; pathname: string }) => {
42+
if (!isMenuOpen) return null;
2543
return (
26-
<header className="sticky top-4 z-50 w-full">
27-
<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">
28-
<div className="flex items-center space-x-2">
29-
<BookOpen className="h-6 w-6 text-primary mx-2" />
30-
<span className="text-xl font-semibold font-sans">
31-
LeetCodeJournal
32-
</span>
33-
</div>
34-
<div className="hidden lg:flex items-center space-x-6">
35-
{navItems.map((item) => (
36-
<Link
37-
key={item.href}
38-
href={item.href}
39-
className={`text-sm px-2 font-medium transition-colors hover:text-primary ${
40-
pathname === item.href
41-
? "text-primary"
42-
: "text-muted-foreground"
43-
}`}
44-
>
45-
{item.label}
46-
</Link>
47-
))}
48-
</div>
49-
<div className="hidden lg:flex items-center space-x-4">
50-
<Button
51-
asChild
52-
className="bg-transparent hover:bg-transparent hover:text-white hover:border-foreground border border-muted-foreground text-muted-foreground"
44+
<div className="lg:hidden mx-auto max-w-[95%] mt-2">
45+
<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">
46+
{navItems.map((item) => (
47+
<Link
48+
key={item.href}
49+
href={item.href}
50+
className={`text-sm font-medium transition-colors hover:text-primary ${pathname === item.href ? "text-primary" : "text-muted-foreground"}`}
51+
onClick={toggleMenu}
5352
>
53+
{item.label}
54+
</Link>
55+
))}
56+
<div className="flex flex-col space-y-4 pt-4 border-t">
57+
<Button asChild className="bg-primary-foreground text-white">
5458
<Link href="/auth/signin">Login</Link>
5559
</Button>
56-
<Button asChild>
60+
<Button asChild onClick={toggleMenu}>
5761
<Link href="/auth/register">Sign up</Link>
5862
</Button>
59-
<ThemeToggle />
60-
</div>
61-
<div
62-
onClick={toggleMenu}
63-
className="lg:hidden focus:outline-none"
64-
role="button"
65-
aria-label={isMenuOpen ? "Close menu" : "Open menu"}
66-
>
67-
{/* ADDED THEME TOGGLE ALONG WITH MENU */}
68-
<div className="flex flex-row justify-center items-center gap-2">
69-
<ThemeToggle />
70-
{isMenuOpen ? <X size={24} /> : <Menu size={24} />}
71-
</div>
7263
</div>
7364
</nav>
65+
</div>
66+
);
67+
};
7468

75-
{isMenuOpen && (
76-
<div className="lg:hidden mx-auto max-w-[95%] mt-2">
77-
{/* ADDED X-PADDING TO MAKE IT FIT PROPERLY ON MOBILE SCREENS */}
78-
<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">
79-
{navItems.map((item) => (
80-
<Link
81-
key={item.href}
82-
href={item.href}
83-
className={`text-sm font-medium transition-colors hover:text-primary ${
84-
pathname === item.href
85-
? "text-primary"
86-
: "text-muted-foreground"
87-
}`}
88-
onClick={toggleMenu}
89-
>
90-
{item.label}
91-
</Link>
92-
))}
93-
<div className="flex flex-col space-y-4 pt-4 border-t">
94-
{/* FORMATTED THE LOGIN BUTTON -> LOGIN TEXT IN CENTER AND BACKGROUND ADDED */}
95-
<Button asChild className="bg-primary-foreground text-white">
96-
<Link href="/auth/signin">Login</Link>
97-
</Button>
98-
<Button asChild onClick={toggleMenu}>
99-
<Link href="/auth/register">Sign up</Link>
100-
</Button>
101-
<div className="flex justify-start"></div>
102-
</div>
103-
</nav>
104-
</div>
105-
)}
69+
const Navbar1 = () => {
70+
const [isMenuOpen, setIsMenuOpen] = useState(false);
71+
const pathname = usePathname();
72+
const [active, setActive] = useState<string | null>(null);
73+
74+
const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
75+
76+
return (
77+
<header className="sticky top-4 z-50 w-full">
78+
<div className="relative mx-auto max-w-[95%] rounded-xl">
79+
{/* Gradient Border */}
80+
<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>
81+
82+
{/* Navbar */}
83+
<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">
84+
<Logo />
85+
<div className="hidden lg:flex items-center space-x-6">
86+
<Menu setActive={setActive}>
87+
<MenuItem setActive={setActive} active={active} item="Home">
88+
<div className="flex flex-col space-y-4 text-sm">
89+
<HoveredLink href="/web-dev">Web Development</HoveredLink>
90+
<HoveredLink href="/interface-design">Interface Design</HoveredLink>
91+
<HoveredLink href="/seo">Search Engine Optimization</HoveredLink>
92+
<HoveredLink href="/branding">Branding</HoveredLink>
93+
</div>
94+
</MenuItem>
95+
<MenuItem setActive={setActive} active={active} item="How it Works">
96+
<div className="text-sm grid grid-cols-2 gap-10">
97+
<HoveredLink href="/hobby">Hobby</HoveredLink>
98+
</div>
99+
</MenuItem>
100+
<MenuItem setActive={setActive} active={active} item="FAQs">
101+
<div className="flex flex-col space-y-4 text-sm">
102+
<HoveredLink href="/hobby">Hobby</HoveredLink>
103+
<HoveredLink href="/individual">Individual</HoveredLink>
104+
<HoveredLink href="/team">Team</HoveredLink>
105+
<HoveredLink href="#">Enterprise</HoveredLink>
106+
</div>
107+
</MenuItem>
108+
<MenuItem setActive={setActive} active={active} item="Blogs">
109+
<div className="flex flex-col space-y-4 text-sm">
110+
<HoveredLink href="#">Blogs1</HoveredLink>
111+
<HoveredLink href="#">Blogs2</HoveredLink>
112+
</div>
113+
</MenuItem>
114+
</Menu>
115+
</div>
116+
<div className="hidden lg:flex items-center space-x-4">
117+
<Button asChild className="bg-transparent hover:bg-transparent hover:text-white hover:border-foreground border border-muted-foreground text-muted-foreground">
118+
<Link href="/auth/signin">Login</Link>
119+
</Button>
120+
<Button asChild>
121+
<Link href="/auth/register">Sign up</Link>
122+
</Button>
123+
<ThemeToggle />
124+
</div>
125+
<MenuToggle isMenuOpen={isMenuOpen} toggleMenu={toggleMenu} />
126+
</nav>
127+
</div>
128+
<MobileMenu isMenuOpen={isMenuOpen} toggleMenu={toggleMenu} pathname={pathname} />
106129
</header>
130+
107131
);
108132
};
109133

‎components/ui/background-gradient.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { cn } from "@/lib/utils";
2+
import React from "react";
3+
import { motion } from "framer-motion";
4+
5+
export const BackgroundGradient = ({
6+
children,
7+
className,
8+
containerClassName,
9+
animate = true,
10+
}: {
11+
children?: React.ReactNode;
12+
className?: string;
13+
containerClassName?: string;
14+
animate?: boolean;
15+
}) => {
16+
const variants = {
17+
initial: {
18+
backgroundPosition: "0 50%",
19+
},
20+
animate: {
21+
backgroundPosition: ["0, 50%", "100% 50%", "0 50%"],
22+
},
23+
};
24+
return (
25+
<div className={cn("relative p-[4px] group", containerClassName)}>
26+
<motion.div
27+
variants={animate ? variants : undefined}
28+
initial={animate ? "initial" : undefined}
29+
animate={animate ? "animate" : undefined}
30+
transition={
31+
animate
32+
? {
33+
duration: 5,
34+
repeat: Infinity,
35+
repeatType: "reverse",
36+
}
37+
: undefined
38+
}
39+
style={{
40+
backgroundSize: animate ? "400% 400%" : undefined,
41+
}}
42+
className={cn(
43+
"absolute inset-0 rounded-3xl z-[1] opacity-60 group-hover:opacity-100 blur-xl transition duration-500 will-change-transform",
44+
" 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)]"
45+
)}
46+
/>
47+
<motion.div
48+
variants={animate ? variants : undefined}
49+
initial={animate ? "initial" : undefined}
50+
animate={animate ? "animate" : undefined}
51+
transition={
52+
animate
53+
? {
54+
duration: 5,
55+
repeat: Infinity,
56+
repeatType: "reverse",
57+
}
58+
: undefined
59+
}
60+
style={{
61+
backgroundSize: animate ? "400% 400%" : undefined,
62+
}}
63+
className={cn(
64+
"absolute inset-0 rounded-3xl z-[1] will-change-transform",
65+
"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)]"
66+
)}
67+
/>
68+
69+
<div className={cn("relative z-10", className)}>{children}</div>
70+
</div>
71+
);
72+
};

0 commit comments

Comments
 (0)