Skip to content

Commit cf8a0d3

Browse files
yashksaini-coderyashksaini-coder
committed
fix: Update navbar structure and improve mobile responsiveness
1 parent 211fae5 commit cf8a0d3

File tree

3 files changed

+89
-122
lines changed

3 files changed

+89
-122
lines changed

‎app/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export default function LandingPage() {
9898
<h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-7xl/none">
9999
<div className="relative font-medium text-[3rem] sm:text-[4rem] md:text-[5rem] leading-none text-foreground">
100100
<span className="relative inline-block">
101-
LeetCodeJournal
101+
LeetCode Journal
102102
{/* <Star
103103
style={{
104104
top: "-30px",

‎app/resources/page.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { ResourceCard } from "./component/resource-card";
1+
import { ResourceCard } from "../../components/ui/resource-card";
22
import { Globe, Laptop } from "lucide-react";
3-
import Navbar1 from "@/components/navbar";
4-
import { Ripple } from "./component/ripple";
5-
import SupportSection from "./component/support-section";
3+
import Navbar1 from '@/components/navbar';
4+
import { Ripple } from "../../components/ui/ripple";
5+
import SupportSection from "../../components/ui/support-section";
66
import Footer from "@/components/footer";
77

88
export default function ResourcesPage() {

‎components/navbar.tsx

Lines changed: 84 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,142 +1,109 @@
11
"use client";
22

3-
import { useState } from "react";
4-
import Link from "next/link";
53
import { usePathname } from "next/navigation";
64
import { Button } from "@/components/ui/button";
75
import { ThemeToggle } from "@/components/theme-toggle";
8-
import { BookOpen, Menu as MenuIcon, X } from "lucide-react";
9-
import { HoveredLink, Menu, MenuItem } from "@/components/ui/navbar-menu";
6+
import { BookOpen, Menu, X } from "lucide-react";
7+
import { useState } from "react";
8+
import Link from "next/link";
109

1110
const navItems = [
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" },
11+
{ href: "/", label: "Home" },
12+
{ href: "/learn-more", label: "How it Works" },
13+
{ href: "/FAQ", label: "FAQs" },
14+
{ href: "/blogs", label: "Blogs" },
15+
{ href: "/resources", label: "Resources" },
2016
];
2117

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-
);
18+
const Navbar1 = () => {
19+
const [isMenuOpen, setIsMenuOpen] = useState(false);
20+
const pathname = usePathname();
2921

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-
);
22+
const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
3923

40-
// Mobile Menu
41-
const MobileMenu = ({ isMenuOpen, toggleMenu, pathname }: { isMenuOpen: boolean; toggleMenu: () => void; pathname: string }) => {
42-
if (!isMenuOpen) return null;
4324
return (
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}
25+
<header className="sticky top-4 z-50 w-full">
26+
<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">
27+
<div className="flex items-center space-x-2">
28+
<BookOpen className="h-6 w-6 text-primary mx-2" />
29+
<span className="text-xl font-semibold font-sans">
30+
LeetCode Journal
31+
</span>
32+
</div>
33+
<div className="hidden lg:flex items-center space-x-6">
34+
{navItems.map((item) => (
35+
<Link
36+
key={item.href}
37+
href={item.href}
38+
className={`text-sm px-2 font-medium transition-colors hover:text-primary ${
39+
pathname === item.href
40+
? "text-primary"
41+
: "text-muted-foreground"
42+
}`}
43+
>
44+
{item.label}
45+
</Link>
46+
))}
47+
</div>
48+
<div className="hidden lg:flex items-center space-x-4">
49+
<Button
50+
asChild
51+
className="bg-transparent hover:bg-transparent hover:text-white hover:border-foreground border border-muted-foreground text-muted-foreground"
5252
>
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">
5853
<Link href="/auth/signin">Login</Link>
5954
</Button>
60-
<Button asChild onClick={toggleMenu}>
55+
<Button asChild>
6156
<Link href="/auth/register">Sign up</Link>
6257
</Button>
58+
<ThemeToggle />
59+
</div>
60+
<div
61+
onClick={toggleMenu}
62+
className="lg:hidden focus:outline-none"
63+
role="button"
64+
aria-label={isMenuOpen ? "Close menu" : "Open menu"}
65+
>
66+
{/* ADDED THEME TOGGLE ALONG WITH MENU */}
67+
<div className="flex flex-row justify-center items-center gap-2">
68+
<ThemeToggle />
69+
{isMenuOpen ? <X size={24} /> : <Menu size={24} />}
70+
</div>
6371
</div>
6472
</nav>
65-
</div>
66-
);
67-
};
68-
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);
7573

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-
<Link href="resources">
115-
<MenuItem setActive={setActive} active={active} item="Resources">
116-
<div className="flex flex-col space-y-4 text-sm">
117-
<HoveredLink href="#">Resources1</HoveredLink>
118-
<HoveredLink href="#">Resources2</HoveredLink>
119-
</div>
120-
</MenuItem>
74+
{isMenuOpen && (
75+
<div className="lg:hidden mx-auto max-w-[95%] mt-2">
76+
{/* ADDED X-PADDING TO MAKE IT FIT PROPERLY ON MOBILE SCREENS */}
77+
<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">
78+
{navItems.map((item) => (
79+
<Link
80+
key={item.href}
81+
href={item.href}
82+
className={`text-sm font-medium transition-colors hover:text-primary ${
83+
pathname === item.href
84+
? "text-primary"
85+
: "text-muted-foreground"
86+
}`}
87+
onClick={toggleMenu}
88+
>
89+
{item.label}
12190
</Link>
122-
</Menu>
123-
</div>
124-
<div className="hidden lg:flex items-center space-x-4">
125-
<Button asChild className="bg-transparent hover:bg-primary hover:text-white border border-muted-foreground text-muted-foreground dark:text-muted-foreground dark:border-muted-foreground dark:hover:bg-primary dark:hover:text-black">
126-
<Link href="/auth/signin">Login</Link>
127-
</Button>
128-
<Button asChild className="bg-primary text-white hover:bg-primary-dark dark:bg-primary dark:text-black dark:hover:bg-primary-dark">
129-
<Link href="/auth/register">Sign up</Link>
130-
</Button>
131-
<ThemeToggle />
91+
))}
92+
<div className="flex flex-col space-y-4 pt-4 border-t">
93+
{/* FORMATTED THE LOGIN BUTTON -> LOGIN TEXT IN CENTER AND BACKGROUND ADDED */}
94+
<Button asChild className="bg-primary-foreground text-white">
95+
<Link href="/auth/signin">Login</Link>
96+
</Button>
97+
<Button asChild onClick={toggleMenu}>
98+
<Link href="/auth/register">Sign up</Link>
99+
</Button>
100+
<div className="flex justify-start"></div>
132101
</div>
133-
<MenuToggle isMenuOpen={isMenuOpen} toggleMenu={toggleMenu} />
134-
</nav>
135-
</div>
136-
<MobileMenu isMenuOpen={isMenuOpen} toggleMenu={toggleMenu} pathname={pathname} />
137-
</header>
138-
102+
</nav>
103+
</div>
104+
)}
105+
</header>
139106
);
140107
};
141108

142-
export default Navbar1;
109+
export default Navbar1;

0 commit comments

Comments
 (0)