All updates
ProductionQAFrontend

Documentation Pages: Sidebar Polish, Footer Cleanup, and Static-Rendering Fix

PR #724pixbox-supportNov 25, 2025 · 12:17 UTC
QANov 15, 2025
ProductionNov 25, 2025

Executive summary

This QA release rolls up a set of refinements to the in-app Documentation (/docs) experience. It improves the sidebar's bottom area with active-page highlighting and smooth expand/collapse animations, removes placeholder social links from the docs footer, and fixes a server-side rendering error that was preventing documentation pages from loading reliably.

Why this was needed

The documentation pages had two gaps. Visually, the sidebar footer and account area lacked clear active-state feedback and felt static, and the docs footer still carried placeholder social media links pointing to generic homepages (x.com, linkedin.com, github.com) rather than real destinations. More importantly, the Strapi-backed documentation routes were hitting Next.js DYNAMIC_SERVER_USAGE errors during static generation because every fetch was forced to no-store, which could cause docs pages to fail to render.

Client / user impact

Users browsing the Help/Documentation section get a more polished navigation experience: the 'Get Help' entry clearly highlights when the docs section is active, the account and settings controls animate cleanly as the sidebar expands or collapses, and the avatar reads clearly across all sidebar themes. The docs footer no longer shows placeholder/dead social links. Most significantly, documentation pages now render reliably without the server-side error, while still showing fresh content on the client.

Technical scope

Wraps feature PR #723 (docs enhancements). Changes are frontend-only:

  • documentation.services.ts: strapiGet is now environment-aware — server requests use Next.js default caching (enabling static generation and avoiding DYNAMIC_SERVER_USAGE from cache: "no-store"), while browser requests keep no-store so React Query owns client caching.
  • SidebarBottom.tsx: adds active-route detection via isPathActive('/docs', pathname) to highlight the Get Help link; introduces framer-motion (AnimatePresence/motion) for username/email and ellipsis transitions on sidebar open/collapse; restyles the initials avatar to use primary theme tokens for contrast across themes.
  • Settings.tsx: adds optional controlled isOpen/onOpenChange props to the personalization sheet and restyles the menu/icon triggers; drops the shared STYLES constant import.
  • DocsFooter.tsx: removes the placeholder SOCIAL_LINKS block and Icon/Link usage; logo now right-aligned.
  • AGENTS.md: adds a contributor note to remove unused imports/variables.

Risk & mitigation

Low risk; changes are scoped to the documentation UI and its data-fetching helper. The main behavioral change is the server/client caching split in strapiGet — the intended fix for the static-rendering error, but it does alter how server-rendered docs content is cached. The sidebar changes are presentational plus a new framer-motion dependency on existing animation tooling. Mitigation: verify docs pages render server-side without errors and that content still refreshes on the client.

QA validation focus

  • Open documentation pages (including /docs/[slug]) and confirm they load without server errors or blank states.
  • Confirm docs content reflects the latest Strapi updates after a refresh/refetch on the client.
  • In the sidebar, verify the 'Get Help' entry shows an active/highlighted state when on the docs section and normal styling elsewhere.
  • Expand and collapse the sidebar and confirm the username/email and account ellipsis animate smoothly without layout jumps.
  • Check the initials avatar is legible across all sidebar themes (Original, Horizon, Lumina, Midnight).
  • Open the personalization Settings sheet from the sidebar and confirm it opens/closes correctly.
  • Confirm the docs footer shows only the logo (right-aligned) with no social media icons/links.