links mobile mode

Author: aryan-cs

src/components/Navbar.css

@@ -290,7 +290,8 @@ button, input { font-family: inherit; }
   height: var(--screen-closed-height);
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: clamp(0.6rem, 1.2vw, 1rem);
   padding-bottom: 0;
   pointer-events: none;
   z-index: 58;
@@ -315,13 +316,47 @@ button, input { font-family: inherit; }
   opacity: 0.85;
 }
 
+.topbar-link-group {
+  display: inline-flex;
+  align-items: center;
+  gap: clamp(0.78rem, 1.45vw, 1.2rem);
+  pointer-events: auto;
+}
+
+.topbar-text-btn {
+  border: 0;
+  background: transparent;
+  color: var(--text-fade);
+  font-family: var(--font-body);
+  font-size: clamp(0.93rem, 1.24vw, 1.06rem);
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: 0.075em;
+  text-transform: uppercase;
+  min-height: 2.3rem;
+  padding: 0 0.18rem;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  pointer-events: auto;
+  transition: color 220ms ease, opacity 220ms ease;
+}
+
+.topbar-text-btn:hover,
+.topbar-text-btn:focus-visible,
+.topbar-text-btn.is-active {
+  color: var(--text);
+  opacity: 1;
+}
+
 .topbar-home-icon {
   width: 1.58rem;
   height: 1.58rem;
   display: block;
 }
 
 .topbar-profile-btn {
+  margin-left: auto;
   font-size: 0;
 }
 
@@ -882,7 +917,7 @@ button, input { font-family: inherit; }
 .top-menu {
   display: flex;
   justify-content: center;
-  gap: 0.5rem;
+  gap: 0.55rem;
 }
 
 .top-menu a {
@@ -1224,6 +1259,18 @@ button, input { font-family: inherit; }
   .topbar-controls {
     left: 0.8rem;
     right: 0.8rem;
+    gap: 0.45rem;
+  }
+
+  .topbar-link-group {
+    gap: 0.55rem;
+    margin-left: 0.15rem;
+  }
+
+  .topbar-text-btn {
+    font-size: 1rem;
+    letter-spacing: 0.06em;
+    min-height: 2rem;
   }
 
   .projector-body { top: 0; left: 0.8rem; right: 0.8rem; bottom: 0; }

src/components/Navbar.tsx

@@ -21,7 +21,15 @@ const TOPIC_MORPH_TIME_MS = 820;
 const MORPH_BLUR_BASE = 5;
 const MORPH_MAX_BLUR_PX = 22;
 const MORPH_OPACITY_EXPONENT = 0.1;
-const RESERVED_COMING_SOON_ROUTES = new Set(["account"]);
+const TOPBAR_TEXT_LINKS = [
+  { slug: "mission", label: "Mission" },
+  { slug: "contact", label: "Contact" },
+  { slug: "donate", label: "Donate" },
+];
+const RESERVED_COMING_SOON_ROUTES = new Set([
+  "account",
+  ...TOPBAR_TEXT_LINKS.map((link) => link.slug),
+]);
 
 function getPathSegments(pathname) {
   return pathname
@@ -365,6 +373,7 @@ function Navbar() {
   const activeSection = hoveredSection ?? selectedSection;
   const activeTopic = hoveredTopic;
   const isAccountRoute = isAccountPath(activePathname);
+  const activePathSegments = getPathSegments(activePathname);
 
   const syncStateFromPath = (pathname) => {
     setActivePathname(pathname);
@@ -397,6 +406,16 @@ function Navbar() {
     }
   };
 
+  const navigateTopRoute = (routePath) => {
+    if (window.location.pathname !== routePath) {
+      window.history.pushState({}, "", routePath);
+    }
+    syncStateFromPath(routePath);
+    if (isOpenLikeNow()) {
+      closeProjectorScreen();
+    }
+  };
+
   const navigateAccount = () => {
     const nextPath = "/account";
     if (window.location.pathname !== nextPath) {
@@ -610,6 +629,24 @@ function Navbar() {
             <img src={logoIcon} alt="" aria-hidden="true" className="topbar-home-icon" />
           </button>
 
+          <div className="topbar-link-group" role="group" aria-label="Primary links">
+            {TOPBAR_TEXT_LINKS.map(({ slug, label }) => {
+              const isActive =
+                activePathSegments.length === 1 && activePathSegments[0] === slug;
+              return (
+                <button
+                  key={slug}
+                  type="button"
+                  className={`topbar-text-btn${isActive ? " is-active" : ""}`}
+                  aria-pressed={isActive}
+                  onClick={() => navigateTopRoute(`/${slug}`)}
+                >
+                  {label}
+                </button>
+              );
+            })}
+          </div>
+
           <button
             type="button"
             className={`topbar-icon-btn topbar-profile-btn${isAccountRoute ? " is-active" : ""}`}