Skip to content

Commit 2e799df

Browse files
pavanpaikpavanpaik
committed
Fix: Hardened navigation against rapid-click lockups and optimized hero image preload
1 parent e3ad8fa commit 2e799df

7 files changed

Lines changed: 19 additions & 12 deletions

File tree

‎web/src/app/(main)/page.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Link from 'next/link';
2+
import Image from 'next/image';
23
import { ArrowRight, Youtube, Facebook, Instagram } from 'lucide-react';
34

45
export default function Home() {
@@ -7,11 +8,14 @@ export default function Home() {
78

89
{/* Hero Section */}
910
<div className="space-y-4 max-w-4xl animate-in fade-in slide-in-from-bottom-4 duration-700 w-full px-4">
10-
<div className="rounded-3xl overflow-hidden shadow-2xl border-4 border-white mx-auto max-w-sm md:max-w-none">
11-
<img
11+
<div className="rounded-3xl overflow-hidden shadow-2xl border-4 border-white mx-auto max-w-sm md:max-w-none relative aspect-[4/3] md:aspect-auto">
12+
<Image
1213
src="/hero-main.jpg"
1314
alt="Sai Baba - Meri Bhi Suno"
14-
className="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-700"
15+
fill
16+
priority
17+
className="object-cover transform hover:scale-105 transition-transform duration-700"
18+
sizes="(max-width: 768px) 100vw, 1200px"
1519
/>
1620
</div>
1721

‎web/src/app/globals.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,8 @@ body {
3434
padding: 0;
3535
overflow-x: hidden;
3636
overscroll-behavior-y: none;
37-
-webkit-overflow-scrolling: touch;
3837
touch-action: manipulation;
3938
min-height: 100vh;
40-
-webkit-touch-callout: none;
4139
-webkit-tap-highlight-color: transparent;
4240
}
4341

‎web/src/components/admin/AdminBottomNav.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default function AdminBottomNav() {
3535
}, []);
3636

3737
return (
38-
<nav className="fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-white/10 z-[100] lg:hidden backdrop-blur-md bg-gray-900/90">
38+
<nav className="fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-white/10 z-[120] lg:hidden backdrop-blur-md bg-gray-900/90">
3939
<div className="flex justify-around items-center h-16 pb-safe">
4040
{ADMIN_NAV_ITEMS.map((item) => {
4141
const Icon = item.icon;
@@ -47,6 +47,7 @@ export default function AdminBottomNav() {
4747
<Link
4848
key={item.href}
4949
href={item.href}
50+
prefetch={false}
5051
className={`flex flex-col items-center justify-center w-full h-full space-y-1 relative transition-colors touch-auto select-none ${isActive ? 'text-ochre' : 'text-gray-500'
5152
}`}
5253
style={{ touchAction: 'manipulation' }}

‎web/src/components/layout/BottomNav.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default function BottomNav() {
1818
const { unreadCount } = useInquiry();
1919

2020
return (
21-
<nav className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-xl border-t border-gray-100 z-50 md:hidden">
21+
<nav className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-xl border-t border-gray-100 z-[120] md:hidden">
2222
<div className="flex justify-around items-center h-16 pb-safe">
2323
{NAV_ITEMS.map((item) => {
2424
const Icon = item.icon;
@@ -29,6 +29,7 @@ export default function BottomNav() {
2929
<Link
3030
key={item.href}
3131
href={item.href}
32+
prefetch={false}
3233
className={`flex flex-col items-center justify-center w-full h-full space-y-1 relative transition-colors select-none ${isActive ? 'text-ochre' : 'text-gray-400'
3334
}`}
3435
style={{ touchAction: 'manipulation' }}

‎web/src/components/layout/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import UtilityMenu from '@/components/layout/UtilityMenu';
44

55
export default function Header() {
66
return (
7-
<header className="fixed top-0 left-0 right-0 h-16 bg-white border-b border-gray-100 z-50 flex items-center justify-center px-4 shadow-sm md:fixed md:top-4 md:right-4 md:left-auto md:w-auto md:h-auto md:bg-transparent md:border-none md:shadow-none md:justify-end md:px-0 pointer-events-none">
7+
<header className="fixed top-0 left-0 right-0 h-16 bg-white border-b border-gray-100 z-[120] flex items-center justify-center px-4 shadow-sm md:fixed md:top-4 md:right-4 md:left-auto md:w-auto md:h-auto md:bg-transparent md:border-none md:shadow-none md:justify-end md:px-0 pointer-events-none">
88
<div className="max-w-7xl w-full flex items-center justify-between md:justify-end pointer-events-auto">
99
<Link href="/" className="flex items-center gap-3 md:hidden min-w-0 flex-shrink">
1010
<Image

‎web/src/components/layout/Sidebar.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export default function Sidebar() {
4444
<Link
4545
key={item.href}
4646
href={item.href}
47+
prefetch={false}
4748
className={`flex items-center justify-between px-4 py-3 rounded-lg transition-colors ${isActive
4849
? 'bg-orange-50 text-ochre font-bold'
4950
: 'text-gray-600 hover:bg-gray-50'
@@ -67,6 +68,7 @@ export default function Sidebar() {
6768
<p className="px-4 text-[10px] font-black text-gray-500 uppercase tracking-[0.2em] mb-3">Resources</p>
6869
<Link
6970
href="/glossary"
71+
prefetch={false}
7072
className={`flex items-center gap-3 px-3 py-3 rounded-2xl transition-all group mx-1 ${pathname === '/glossary'
7173
? 'bg-ochre/5 border border-ochre/10'
7274
: 'hover:bg-gray-50 border border-transparent'

‎web/src/components/layout/UtilityMenu.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export default function UtilityMenu() {
3838
{isAdmin && (
3939
<Link
4040
href="/admin"
41+
prefetch={false}
4142
className="hidden md:flex items-center gap-2 bg-gray-900 text-white pl-3 pr-5 py-2 rounded-full shadow-lg border border-white/10 hover:bg-black transition-all group active:scale-95 whitespace-nowrap"
4243
>
4344
<div className="w-5 h-5 bg-ochre rounded-full flex items-center justify-center flex-none">
@@ -133,7 +134,7 @@ export default function UtilityMenu() {
133134
{/* Navigation Actions - Standardized Premium Style */}
134135
<nav className="space-y-2 flex-1">
135136
{isAdmin && (
136-
<Link href="/admin" onClick={() => setIsOpen(false)} className="flex items-center justify-between p-3.5 hover:bg-gray-900 rounded-[1.25rem] transition-all group bg-gray-50/50 border border-gray-100/50 hover:border-gray-900">
137+
<Link href="/admin" prefetch={false} onClick={() => setIsOpen(false)} className="flex items-center justify-between p-3.5 hover:bg-gray-900 rounded-[1.25rem] transition-all group bg-gray-50/50 border border-gray-100/50 hover:border-gray-900">
137138
<div className="flex items-center gap-4 text-gray-700 group-hover:text-white">
138139
<div className="w-10 h-10 bg-white rounded-2xl flex items-center justify-center text-ochre shadow-sm group-hover:bg-ochre group-hover:text-white transition-all flex-none">
139140
<LayoutDashboard className="w-5 h-5" />
@@ -147,7 +148,7 @@ export default function UtilityMenu() {
147148
</Link>
148149
)}
149150

150-
<Link href="/ask" onClick={() => setIsOpen(false)} className="flex items-center justify-between p-3.5 hover:bg-ochre/5 rounded-[1.25rem] transition-all group border border-transparent hover:border-ochre/10">
151+
<Link href="/ask" prefetch={false} onClick={() => setIsOpen(false)} className="flex items-center justify-between p-3.5 hover:bg-ochre/5 rounded-[1.25rem] transition-all group border border-transparent hover:border-ochre/10">
151152
<div className="flex items-center gap-4 text-gray-700 group-hover:text-ochre">
152153
<div className="w-10 h-10 bg-gray-50 rounded-2xl flex items-center justify-center text-gray-400 group-hover:bg-ochre/10 group-hover:text-ochre transition-all flex-none relative">
153154
<History className="w-5 h-5" />
@@ -165,7 +166,7 @@ export default function UtilityMenu() {
165166
<ArrowRight className="w-3.5 h-3.5 text-gray-300 group-hover:text-ochre transition-transform group-hover:translate-x-1" />
166167
</Link>
167168

168-
<Link href="/glossary" onClick={() => setIsOpen(false)} className="flex items-center justify-between p-3.5 hover:bg-ochre/5 rounded-[1.25rem] transition-all group border border-transparent hover:border-ochre/10">
169+
<Link href="/glossary" prefetch={false} onClick={() => setIsOpen(false)} className="flex items-center justify-between p-3.5 hover:bg-ochre/5 rounded-[1.25rem] transition-all group border border-transparent hover:border-ochre/10">
169170
<div className="flex items-center gap-4 text-gray-700 group-hover:text-ochre">
170171
<div className="w-10 h-10 bg-gray-50 rounded-2xl flex items-center justify-center text-gray-400 group-hover:bg-ochre/10 group-hover:text-ochre transition-all flex-none">
171172
<BookA className="w-5 h-5 flex-none" />
@@ -231,7 +232,7 @@ export default function UtilityMenu() {
231232
</div>
232233

233234
<div className="pt-6 border-t border-gray-100">
234-
<Link href="/glossary" onClick={() => setIsOpen(false)} className="flex items-center space-x-4 p-4 hover:bg-gray-50 rounded-2xl transition-all group">
235+
<Link href="/glossary" prefetch={false} onClick={() => setIsOpen(false)} className="flex items-center space-x-4 p-4 hover:bg-gray-50 rounded-2xl transition-all group">
235236
<BookA className="w-6 h-6 text-gray-400 group-hover:text-ochre transition-colors flex-none" />
236237
<div className="text-left">
237238
<p className="font-bold text-base text-gray-900 tracking-tight group-hover:text-ochre transition-colors">Exhaustive Glossary</p>

0 commit comments

Comments
 (0)