Skip to content

Commit d093dfa

Browse files
committed
links mobile mode
1 parent 277294c commit d093dfa

File tree

2 files changed

+87
-3
lines changed

2 files changed

+87
-3
lines changed

src/components/Navbar.css

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,8 @@ button, input { font-family: inherit; }
290290
height: var(--screen-closed-height);
291291
display: flex;
292292
align-items: center;
293-
justify-content: space-between;
293+
justify-content: flex-start;
294+
gap: clamp(0.6rem, 1.2vw, 1rem);
294295
padding-bottom: 0;
295296
pointer-events: none;
296297
z-index: 58;
@@ -315,13 +316,47 @@ button, input { font-family: inherit; }
315316
opacity: 0.85;
316317
}
317318

319+
.topbar-link-group {
320+
display: inline-flex;
321+
align-items: center;
322+
gap: clamp(0.78rem, 1.45vw, 1.2rem);
323+
pointer-events: auto;
324+
}
325+
326+
.topbar-text-btn {
327+
border: 0;
328+
background: transparent;
329+
color: var(--text-fade);
330+
font-family: var(--font-body);
331+
font-size: clamp(0.93rem, 1.24vw, 1.06rem);
332+
font-weight: 700;
333+
line-height: 1;
334+
letter-spacing: 0.075em;
335+
text-transform: uppercase;
336+
min-height: 2.3rem;
337+
padding: 0 0.18rem;
338+
display: inline-flex;
339+
align-items: center;
340+
cursor: pointer;
341+
pointer-events: auto;
342+
transition: color 220ms ease, opacity 220ms ease;
343+
}
344+
345+
.topbar-text-btn:hover,
346+
.topbar-text-btn:focus-visible,
347+
.topbar-text-btn.is-active {
348+
color: var(--text);
349+
opacity: 1;
350+
}
351+
318352
.topbar-home-icon {
319353
width: 1.58rem;
320354
height: 1.58rem;
321355
display: block;
322356
}
323357

324358
.topbar-profile-btn {
359+
margin-left: auto;
325360
font-size: 0;
326361
}
327362

@@ -882,7 +917,7 @@ button, input { font-family: inherit; }
882917
.top-menu {
883918
display: flex;
884919
justify-content: center;
885-
gap: 0.5rem;
920+
gap: 0.55rem;
886921
}
887922

888923
.top-menu a {
@@ -1224,6 +1259,18 @@ button, input { font-family: inherit; }
12241259
.topbar-controls {
12251260
left: 0.8rem;
12261261
right: 0.8rem;
1262+
gap: 0.45rem;
1263+
}
1264+
1265+
.topbar-link-group {
1266+
gap: 0.55rem;
1267+
margin-left: 0.15rem;
1268+
}
1269+
1270+
.topbar-text-btn {
1271+
font-size: 1rem;
1272+
letter-spacing: 0.06em;
1273+
min-height: 2rem;
12271274
}
12281275

12291276
.projector-body { top: 0; left: 0.8rem; right: 0.8rem; bottom: 0; }

src/components/Navbar.tsx

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,15 @@ const TOPIC_MORPH_TIME_MS = 820;
2121
const MORPH_BLUR_BASE = 5;
2222
const MORPH_MAX_BLUR_PX = 22;
2323
const MORPH_OPACITY_EXPONENT = 0.1;
24-
const RESERVED_COMING_SOON_ROUTES = new Set(["account"]);
24+
const TOPBAR_TEXT_LINKS = [
25+
{ slug: "mission", label: "Mission" },
26+
{ slug: "contact", label: "Contact" },
27+
{ slug: "donate", label: "Donate" },
28+
];
29+
const RESERVED_COMING_SOON_ROUTES = new Set([
30+
"account",
31+
...TOPBAR_TEXT_LINKS.map((link) => link.slug),
32+
]);
2533

2634
function getPathSegments(pathname) {
2735
return pathname
@@ -365,6 +373,7 @@ function Navbar() {
365373
const activeSection = hoveredSection ?? selectedSection;
366374
const activeTopic = hoveredTopic;
367375
const isAccountRoute = isAccountPath(activePathname);
376+
const activePathSegments = getPathSegments(activePathname);
368377

369378
const syncStateFromPath = (pathname) => {
370379
setActivePathname(pathname);
@@ -397,6 +406,16 @@ function Navbar() {
397406
}
398407
};
399408

409+
const navigateTopRoute = (routePath) => {
410+
if (window.location.pathname !== routePath) {
411+
window.history.pushState({}, "", routePath);
412+
}
413+
syncStateFromPath(routePath);
414+
if (isOpenLikeNow()) {
415+
closeProjectorScreen();
416+
}
417+
};
418+
400419
const navigateAccount = () => {
401420
const nextPath = "/account";
402421
if (window.location.pathname !== nextPath) {
@@ -610,6 +629,24 @@ function Navbar() {
610629
<img src={logoIcon} alt="" aria-hidden="true" className="topbar-home-icon" />
611630
</button>
612631

632+
<div className="topbar-link-group" role="group" aria-label="Primary links">
633+
{TOPBAR_TEXT_LINKS.map(({ slug, label }) => {
634+
const isActive =
635+
activePathSegments.length === 1 && activePathSegments[0] === slug;
636+
return (
637+
<button
638+
key={slug}
639+
type="button"
640+
className={`topbar-text-btn${isActive ? " is-active" : ""}`}
641+
aria-pressed={isActive}
642+
onClick={() => navigateTopRoute(`/${slug}`)}
643+
>
644+
{label}
645+
</button>
646+
);
647+
})}
648+
</div>
649+
613650
<button
614651
type="button"
615652
className={`topbar-icon-btn topbar-profile-btn${isAccountRoute ? " is-active" : ""}`}

0 commit comments

Comments
 (0)