Skip to content

Commit d0bf7ae

Browse files
sanbuphysanbuphy
committed
Fix mobile navigation visibility
1 parent 78a47b6 commit d0bf7ae

6 files changed

Lines changed: 85 additions & 59 deletions

File tree

‎assets/index-Di78421a.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/index-KU2PSjpx.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

assets/index.dev-BoeAvMV2.js renamed to assets/index.dev-2e6A8E7F.js

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>WalkingLabs</title>
77
<link rel="icon" type="image/svg+xml" href="/homepage/assets/logo-icon-Bahv6qkn.svg" />
8-
<script type="module" crossorigin src="/homepage/assets/index.dev-BoeAvMV2.js"></script>
9-
<link rel="stylesheet" crossorigin href="/homepage/assets/index-KU2PSjpx.css">
8+
<script type="module" crossorigin src="/homepage/assets/index.dev-2e6A8E7F.js"></script>
9+
<link rel="stylesheet" crossorigin href="/homepage/assets/index-Di78421a.css">
1010
</head>
1111
<body>
1212
<div id="root"></div>

‎src/App.tsx‎

Lines changed: 65 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -342,6 +342,13 @@ export default function App() {
342342
}[lang];
343343
const blogPosts = BLOG_POSTS[lang];
344344
const activePost = activePostSlug ? blogPosts.find((post) => post.slug === activePostSlug) : null;
345+
const navItems: Array<{ id: View; label: string }> = [
346+
{ id: "HOME", label: t.nav.home },
347+
{ id: "PROJECTS", label: t.nav.projects },
348+
{ id: "BLOG", label: t.nav.blog },
349+
{ id: "GROUP", label: t.nav.group },
350+
{ id: "CONTACT", label: t.nav.contact }
351+
];
345352

346353
useEffect(() => {
347354
const body = jellyBodyRef.current;
@@ -375,64 +382,74 @@ export default function App() {
375382
<div className="min-h-screen selection:bg-brand-blue/20">
376383
{/* Navigation */}
377384
<nav className="fixed top-4 sm:top-6 lg:top-8 left-0 right-0 z-50 page-shell">
378-
<div className="max-w-7xl mx-auto bg-white/80 backdrop-blur-2xl rounded-[2rem] sm:rounded-full px-3 sm:px-5 py-2.5 sm:py-3 flex items-center justify-between gap-3 shadow-2xl shadow-black/[0.04] border border-white/60">
379-
<div className="flex min-w-0 items-center gap-3 lg:gap-8 pl-1 sm:pl-4">
380-
<button
381-
onClick={() => setView("HOME")}
382-
className="flex min-w-0 shrink items-center gap-3 text-black hover:opacity-70 transition-opacity"
383-
aria-label={t.name}
384-
>
385-
<img
386-
src={logoUrl}
387-
alt={t.name}
388-
className="h-6 w-auto max-w-[46vw] sm:h-7 sm:max-w-[260px] md:max-w-[320px] block"
389-
draggable={false}
390-
/>
391-
</button>
392-
<div className="hidden xl:flex items-center gap-1">
393-
{[
394-
{ id: "HOME", label: t.nav.home },
395-
{ id: "PROJECTS", label: t.nav.projects },
396-
{ id: "BLOG", label: t.nav.blog },
397-
{ id: "GROUP", label: t.nav.group },
398-
{ id: "CONTACT", label: t.nav.contact }
399-
].map((item) => (
400-
<button
401-
key={item.id}
402-
onClick={() => setView(item.id as any)}
403-
className={`px-6 py-2.5 rounded-full text-[15px] font-medium transition-all ${
404-
view === item.id ? "text-violet-600 bg-violet-600/5 shadow-sm" : "text-zinc-500 hover:text-black"
405-
}`}
406-
>
407-
{item.label}
408-
</button>
409-
))}
385+
<div className="max-w-7xl mx-auto bg-white/85 backdrop-blur-2xl rounded-[1.65rem] xl:rounded-full px-3 sm:px-5 py-2.5 sm:py-3 shadow-2xl shadow-black/[0.04] border border-white/60">
386+
<div className="flex w-full items-center justify-between gap-3">
387+
<div className="flex min-w-0 items-center gap-3 lg:gap-8 pl-1 sm:pl-4">
388+
<button
389+
onClick={() => setView("HOME")}
390+
className="flex min-w-0 shrink items-center gap-3 text-black hover:opacity-70 transition-opacity"
391+
aria-label={t.name}
392+
>
393+
<img
394+
src={logoUrl}
395+
alt={t.name}
396+
className="h-6 w-auto max-w-[46vw] sm:h-7 sm:max-w-[260px] md:max-w-[320px] block"
397+
draggable={false}
398+
/>
399+
</button>
400+
<div className="hidden xl:flex items-center gap-1">
401+
{navItems.map((item) => (
402+
<button
403+
key={item.id}
404+
onClick={() => setView(item.id)}
405+
className={`px-6 py-2.5 rounded-full text-[15px] font-medium transition-all ${
406+
view === item.id ? "text-violet-600 bg-violet-600/5 shadow-sm" : "text-zinc-500 hover:text-black"
407+
}`}
408+
>
409+
{item.label}
410+
</button>
411+
))}
412+
</div>
413+
</div>
414+
415+
<div className="flex shrink-0 items-center gap-1 sm:gap-3 lg:gap-4">
416+
<button
417+
onClick={() => setLang(lang === "EN" ? "ZH" : "EN")}
418+
className="p-2 sm:px-4 sm:py-2 text-zinc-500 hover:text-black transition-colors flex items-center gap-2 text-sm font-semibold uppercase tracking-wider"
419+
aria-label={lang === "EN" ? "Switch to Chinese" : "Switch to English"}
420+
>
421+
<Globe className="w-4 h-4" />
422+
<span className="hidden sm:inline">{lang}</span>
423+
</button>
424+
<a href="https://github.com/walkinglabs" target="_blank" rel="noreferrer" className="hidden min-[380px]:flex p-2 sm:p-2.5 text-zinc-500 hover:text-black transition-colors" aria-label="GitHub">
425+
<Github className="w-5 h-5 sm:w-6 sm:h-6" />
426+
</a>
427+
<button onClick={() => setView("PROJECTS")} className="bg-black text-white px-4 sm:px-6 lg:px-8 py-2.5 sm:py-3.5 rounded-full text-xs sm:text-sm font-bold uppercase tracking-tight whitespace-nowrap hover:bg-zinc-800 transition-all sm:ml-1 lg:ml-2 scale-100 hover:scale-[1.02] active:scale-[0.98]">
428+
{lang === "EN" ? "Start" : "开始"}
429+
</button>
410430
</div>
411431
</div>
412432

413-
<div className="flex shrink-0 items-center gap-1 sm:gap-3 lg:gap-4">
414-
<button
415-
onClick={() => setLang(lang === "EN" ? "ZH" : "EN")}
416-
className="p-2 sm:px-4 sm:py-2 text-zinc-500 hover:text-black transition-colors flex items-center gap-2 text-sm font-semibold uppercase tracking-wider"
417-
aria-label={lang === "EN" ? "Switch to Chinese" : "Switch to English"}
418-
>
419-
<Globe className="w-4 h-4" />
420-
<span className="hidden sm:inline">{lang}</span>
421-
</button>
422-
<a href="https://github.com/walkinglabs" target="_blank" rel="noreferrer" className="hidden min-[380px]:flex p-2 sm:p-2.5 text-zinc-500 hover:text-black transition-colors" aria-label="GitHub">
423-
<Github className="w-5 h-5 sm:w-6 sm:h-6" />
424-
</a>
425-
<button onClick={() => setView("PROJECTS")} className="bg-black text-white px-4 sm:px-6 lg:px-8 py-2.5 sm:py-3.5 rounded-full text-xs sm:text-sm font-bold uppercase tracking-tight whitespace-nowrap hover:bg-zinc-800 transition-all sm:ml-1 lg:ml-2 scale-100 hover:scale-[1.02] active:scale-[0.98]">
426-
{lang === "EN" ? "Start" : "开始"}
427-
</button>
433+
<div className="mobile-nav-scroll mt-2 flex gap-1 overflow-x-auto border-t border-black/5 pt-2 xl:hidden">
434+
{navItems.map((item) => (
435+
<button
436+
key={item.id}
437+
onClick={() => setView(item.id)}
438+
className={`shrink-0 rounded-full px-4 py-2 text-[13px] font-semibold transition-colors ${
439+
view === item.id ? "bg-violet-600/10 text-violet-700" : "text-zinc-500 hover:bg-black/5 hover:text-black"
440+
}`}
441+
>
442+
{item.label}
443+
</button>
444+
))}
428445
</div>
429446
</div>
430447
</nav>
431448

432449
{view === "HOME" && (
433450
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}>
434451
{/* Hero Section */}
435-
<section className="pt-36 sm:pt-44 lg:pt-48 pb-24 sm:pb-32 page-shell overflow-hidden">
452+
<section className="pt-44 sm:pt-48 lg:pt-48 pb-24 sm:pb-32 page-shell overflow-hidden">
436453
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-14 lg:gap-20 items-center">
437454
<motion.div
438455
initial={{ opacity: 0, y: 30 }}

‎src/index.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,15 @@
212212
@apply px-5 py-2 rounded-full bg-white border border-black/5 text-[13px] font-medium transition-all hover:bg-black/5;
213213
}
214214

215+
.mobile-nav-scroll {
216+
scrollbar-width: none;
217+
-webkit-overflow-scrolling: touch;
218+
}
219+
220+
.mobile-nav-scroll::-webkit-scrollbar {
221+
display: none;
222+
}
223+
215224
.btn-primary {
216225
@apply bg-violet-700 text-white px-8 py-4 rounded-full font-medium flex items-center gap-3 transition-all hover:bg-violet-800;
217226
}

0 commit comments

Comments
 (0)