Skip to content

Commit e251a75

Browse files
Sujal-RajSujal-Raj
committed
Changed some errors for mobile view properly
1 parent d77f8fd commit e251a75

File tree

9 files changed

+345
-477
lines changed

9 files changed

+345
-477
lines changed

‎public/uploads/1738039021681.jpeg‎

-102 KB
Binary file not shown.

‎src/app/components/Navbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ function Navbar() {
1010
};
1111
return (
1212
<nav className="h-[10vh] flex justify-between items-center px-10">
13-
<h1 className="text-2xl/7 font-bold text-white sm:truncate sm:text-3xl sm:tracking-tight">InSights</h1>
13+
<h1 className="text-2xl/7 font-bold text-black dark:text-white sm:truncate sm:text-3xl sm:tracking-tight">InSights</h1>
1414
<button
1515
onClick={LoginPageRedirect}
1616
className="shadow-[0_0_0_3px_#000000_inset] px-6 py-2 bg-transparent border border-black dark:border-white dark:text-white text-black rounded-lg font-bold transform hover:-translate-y-1 transition duration-400">

‎src/app/components/NavbarAfterLogin.jsx‎

Lines changed: 121 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -8,134 +8,157 @@ import {
88
IconHome,
99
IconNewSection,
1010
IconTerminal2,
11+
IconMenu2,
12+
IconX
1113
} from "@tabler/icons-react";
1214
import Image from "next/image";
1315
import Link from "next/link";
1416
import { useRouter } from 'next/navigation';
1517

16-
17-
18-
1918
function NavbarAfterLogin() {
2019
const [loading, setLoading] = useState(false);
20+
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
2121
const router = useRouter();
2222
// const username = localStorage.getItem("username");
2323

24-
const links = [
25-
{
26-
title: "Home",
27-
icon: (
28-
<IconHome className="h-full w-full text-neutral-500 dark:text-neutral-300" />
29-
),
30-
href: "#",
31-
},
32-
33-
{
34-
title: "Products",
35-
icon: (
36-
<IconTerminal2 className="h-full w-full text-neutral-500 dark:text-neutral-300" />
37-
),
38-
href: "#",
39-
},
40-
{
41-
title: "Components",
42-
icon: (
43-
<IconNewSection className="h-full w-full text-neutral-500 dark:text-neutral-300" />
44-
),
45-
href: "#",
46-
},
47-
{
48-
title: "Aceternity UI",
49-
icon: (
50-
<Image
51-
src="https://assets.aceternity.com/logo-dark.png"
52-
width={20}
53-
height={20}
54-
alt="Aceternity Logo"
55-
/>
56-
),
57-
href: "#",
58-
},
59-
{
60-
title: "Changelog",
61-
icon: (
62-
<IconExchange className="h-full w-full text-neutral-500 dark:text-neutral-300" />
63-
),
64-
href: "#",
65-
},
66-
67-
{
68-
title: "Twitter",
69-
icon: (
70-
<IconBrandX className="h-full w-full text-neutral-500 dark:text-neutral-300" />
71-
),
72-
href: "#",
73-
},
74-
{
75-
title: "GitHub",
76-
icon: (
77-
<IconBrandGithub className="h-full w-full text-neutral-500 dark:text-neutral-300" />
78-
),
79-
href: "#",
80-
},
81-
];
24+
const links = [
25+
{
26+
title: "Home",
27+
icon: (
28+
<IconHome className="h-full w-full text-neutral-500 dark:text-neutral-300" />
29+
),
30+
href: "#",
31+
},
32+
{
33+
title: "Products",
34+
icon: (
35+
<IconTerminal2 className="h-full w-full text-neutral-500 dark:text-neutral-300" />
36+
),
37+
href: "#",
38+
},
39+
{
40+
title: "Components",
41+
icon: (
42+
<IconNewSection className="h-full w-full text-neutral-500 dark:text-neutral-300" />
43+
),
44+
href: "#",
45+
},
46+
{
47+
title: "Aceternity UI",
48+
icon: (
49+
<Image
50+
src="https://assets.aceternity.com/logo-dark.png"
51+
width={20}
52+
height={20}
53+
alt="Aceternity Logo"
54+
/>
55+
),
56+
href: "#",
57+
},
58+
{
59+
title: "Changelog",
60+
icon: (
61+
<IconExchange className="h-full w-full text-neutral-500 dark:text-neutral-300" />
62+
),
63+
href: "#",
64+
},
65+
{
66+
title: "Twitter",
67+
icon: (
68+
<IconBrandX className="h-full w-full text-neutral-500 dark:text-neutral-300" />
69+
),
70+
href: "#",
71+
},
72+
{
73+
title: "GitHub",
74+
icon: (
75+
<IconBrandGithub className="h-full w-full text-neutral-500 dark:text-neutral-300" />
76+
),
77+
href: "#",
78+
},
79+
];
8280

81+
const handleLogout = () => {
82+
setLoading(true);
83+
localStorage.clear();
84+
router.push("/");
85+
// setActiveSession("");
86+
// Clear any cookies set by the app
87+
document.cookie = "yourCookieName=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
88+
setLoading(false);
89+
}
8390

84-
const handleLogout = () => {
85-
setLoading(true);
86-
// localStorage.clear();
87-
router.push("/");
88-
// setActiveSession("");
89-
// Clear any cookies set by the app
90-
document.cookie = "yourCookieName=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
91-
setLoading(false);
92-
}
91+
const toggleMobileMenu = () => {
92+
setMobileMenuOpen(!mobileMenuOpen);
93+
}
9394

94-
// const handleNavigation = (path, sessionType) => {
95-
// setActiveSession(sessionType);
96-
// router.push(path);
97-
// }
9895
return (
99-
100-
<>
101-
{/* <nav className='mt-4 flex '>
102-
<FloatingDock
103-
// mobileClassName="translate-y-20" // only for demo, remove for production
104-
items={links}
105-
/>
106-
</nav> */}
107-
<nav className="min-h-[10vh] flex justify-between items-center px-10 fixed top-0 w-full z-10000 bg-[#0a0a0a]">
108-
<h1 className="text-2xl/7 font-bold text-white sm:truncate sm:text-3xl sm:tracking-tight capitalize">
96+
<>
97+
<nav className="min-h-[10vh] flex justify-between items-center px-4 md:px-10 fixed top-0 w-full z-50 bg-[#0a0a0a]">
98+
<h1 className="text-xl/7 font-bold text-white sm:text-3xl sm:tracking-tight capitalize">
10999
Welcome
110100
{/* Welcome,{username} */}
111101
</h1>
112-
<div className="flex items-center gap-4">
113-
<ul className="flex items-center gap-4">
102+
103+
{/* Mobile menu button */}
104+
<button
105+
className="md:hidden text-white p-2"
106+
onClick={toggleMobileMenu}
107+
>
108+
{mobileMenuOpen ? (
109+
<IconX className="h-6 w-6" />
110+
) : (
111+
<IconMenu2 className="h-6 w-6" />
112+
)}
113+
</button>
114+
115+
{/* Desktop menu */}
116+
<div className="hidden md:flex items-center gap-4">
117+
<ul className="flex items-center gap-4 text-white">
114118
<li>
115-
<Link href={"/main"}>All Blogs</Link>
119+
<Link href={"/main"}>All Blogs</Link>
116120
</li>
117121
<li>
118122
<Link href={"/create-a-blog"}>Create a Blog</Link>
119-
120123
</li>
121124
<li>
122125
<Link href={"/my-blogs"}>My Blogs</Link>
123-
124126
</li>
125-
{/* <li>
126-
<Link href={"/profile"}>Profile</Link>
127-
128-
</li> */}
129127
</ul>
130128
<button
131-
onClick={handleLogout}
132-
className="shadow-[0_0_0_3px_#000000_inset] px-6 py-2 bg-transparent border border-black dark:border-white dark:text-white text-black rounded-lg font-bold transform hover:-translate-y-1 transition duration-400">
133-
{loading? "Logging out...": "Log out"}
134-
{/* Log out */}
129+
onClick={handleLogout}
130+
className="shadow-[0_0_0_3px_#000000_inset] px-6 py-2 bg-transparent border border-black dark:border-white dark:text-white text-black rounded-lg font-bold transform hover:-translate-y-1 transition duration-400"
131+
>
132+
{loading ? "Logging out..." : "Log out"}
135133
</button>
136134
</div>
137135
</nav>
138-
</>
136+
137+
{/* Mobile menu overlay */}
138+
{mobileMenuOpen && (
139+
<div className="md:hidden fixed top-[10vh] left-0 right-0 bottom-0 bg-[#0a0a0a] z-40 flex flex-col p-4">
140+
<ul className="flex flex-col space-y-4 text-white text-lg">
141+
<li>
142+
<Link href={"/main"} onClick={() => setMobileMenuOpen(false)}>All Blogs</Link>
143+
</li>
144+
<li>
145+
<Link href={"/create-a-blog"} onClick={() => setMobileMenuOpen(false)}>Create a Blog</Link>
146+
</li>
147+
<li>
148+
<Link href={"/my-blogs"} onClick={() => setMobileMenuOpen(false)}>My Blogs</Link>
149+
</li>
150+
</ul>
151+
<div className="mt-6">
152+
<button
153+
onClick={handleLogout}
154+
className="w-full shadow-[0_0_0_3px_#000000_inset] px-6 py-3 bg-transparent border border-white text-white rounded-lg font-bold transition duration-300"
155+
>
156+
{loading ? "Logging out..." : "Log out"}
157+
</button>
158+
</div>
159+
</div>
160+
)}
161+
</>
139162
)
140163
}
141164

0 commit comments

Comments
 (0)