diff --git a/docs/CreatorProfileAnchorLinks.md b/docs/CreatorProfileAnchorLinks.md new file mode 100644 index 0000000..bea4a57 --- /dev/null +++ b/docs/CreatorProfileAnchorLinks.md @@ -0,0 +1,54 @@ +# Creator Profile Anchor Links + +> Issue #159 — Adds URL hash navigation for main creator profile sections. + +## Overview + +Each creator profile tab (`overview`, `creations`, `collectors`, `activity`) is now addressable via a URL hash fragment. This enables: + +- **Direct deep-linking** — share or bookmark a URL like `/#creations` and land on the correct tab. +- **Browser back/forward navigation** — pressing back after switching tabs returns to the previous section. +- **Preserved layout** — the visual appearance and existing component structure are unchanged. + +## How it works + +### `ProfileTabPillGroup` (`src/components/common/ProfileTabPill.tsx`) + +The `enableHashRouting` prop has been activated and the implementation improved: + +| Behaviour | Detail | +| ---------------------- | ------------------------------------------------------------------------------------------------ | +| **On mount** | Reads `window.location.hash` and calls `onTabChange` if the hash matches a tab value. | +| **Tab click** | Calls `onTabChange` _and_ sets `window.location.hash` to the tab value. | +| **`hashchange` event** | Listens for browser-level hash changes (e.g. back/forward) and syncs the active tab. | +| **ARIA attributes** | Each ` @@ -507,6 +528,7 @@ function LandingPage() { ]} activeTab={activeProfileTab} onTabChange={setActiveProfileTab} + enableHashRouting className="mb-4" /> @@ -514,10 +536,23 @@ function LandingPage() { repeated creator facts into one responsive grid that stays tidy on mobile and desktop. -
- - - +
+
+ + + +
@@ -534,9 +569,7 @@ function LandingPage() { label="Creator Share Supply" value={`${formatCompactNumber(250)} shares available`} /> - {isNetworkMismatch && ( - - )} + {isNetworkMismatch && }
- +