Navigation Components
Relevant source files
The following files were used as context for generating this wiki page:
The navigation system of the SuperClaude Website provides a structured interface for exploring framework documentation and site-wide pages. It utilizes a combination of a global top navigation bar and a context-aware sidebar specifically designed for documentation deep-linking and categorization.
The system is built on React Router for client-side routing and utilizes a centralized docs-map.json to dynamically generate navigation links based on available markdown files. This ensures that the navigation remains synchronized with the project's documentation structure.
Sources: src/App.js:14-38, src/components/Navbar.js:10-25, src/components/Sidebar.js:10-30
Global Navigation (Navbar)
The Navbar component serves as the primary entry point for site-wide navigation. It remains fixed at the top of the viewport and adaptively adjusts its layout based on the current route and device screen size.
Layout and Adaptive Behavior
The Navbar includes logic to detect if the user is currently on a documentation page. When isDocPage is true, the navbar adds left padding to accommodate the persistent sidebar on large screens. It also conditionally renders a MenuButton to control sidebar visibility on mobile devices.
Sources: src/components/Navbar.js:12-42
Primary Navigation Links
The Navbar defines a set of core routes that facilitate movement between major sections of the application:
| Label | Route | Icon |
|---|---|---|
| Home | / | Home |
| Docs | /docs | FileText |
| Contributors | /contributors | Users |
| About Us | /about | Info |
Sources: src/components/Navbar.js:21-26
Documentation Navigation (Sidebar)
The Sidebar component provides a hierarchical view of the documentation, organized by categories. It is only rendered when the user is within the /docs route path.
Dynamic Content Generation
The sidebar fetches its structure from docs-map.json. It groups individual documentation entries into categories using a reduce function, allowing for a nested navigation experience.
const groupedDocs = docsMap.reduce((acc, doc) => {
if (!acc[doc.category]) {
acc[doc.category] = [];
}
acc[doc.category].push(doc);
return acc;
}, {});
Sources: src/components/Sidebar.js:33-40
Interaction Logic
- Category Toggling: Users can expand or collapse categories. The
openCategoriesstate tracks which sections are visible, utilizing a rotation animation on theChevronDownicon to indicate state. - Mobile Responsiveness: On small screens, the sidebar is hidden by default (
-translate-x-full) and transitions into view when triggered via theSidebarContext. An overlay (backdrop) appears when the sidebar is open on mobile to facilitate closing on click. - Active State: The
NavLinkcomponent fromreact-router-domis used to apply specific styling (text-foreground font-semibold) to the link corresponding to the current URL.
Sources: src/components/Sidebar.js:12-25, src/components/Sidebar.js:45-95
Navigation State Management
Navigation states, particularly for the mobile sidebar and documentation routing, are managed through a combination of React Context and standard Hooks.
Sidebar Context Flow
The SidebarProvider wraps the application, exposing isOpen, openSidebar, and closeSidebar functions to the Navbar and Sidebar components.
Route Configuration
Routes are defined in App.js using react-router-dom. The system supports dynamic parameters for documentation viewing, allowing a single component (DocViewerPage) to handle various categories and files.
| Path | Component | Purpose |
|---|---|---|
/ | HomePage | Landing page |
/docs | DocPage | Documentation index |
/docs/:category/:file | DocViewerPage | Individual doc renderer |
Sources: src/App.js:20-27
Link Resolution and Anchors
To maintain navigation integrity within markdown content, the system employs a custom linkResolver and react-router-hash-link.
- Internal Document Links: The
resolveMarkdownLinkutility translates relative markdown paths (e.g.,../guide.md) into valid application routes. - Hash Scrolling: The
DocViewerPageusesscrollToHashandHashLinkto enable smooth scrolling to specific H1-H6 headers within a document.
Sources: src/pages/DocViewerPage.js:130-155, src/utils/linkResolver.js:24-44
Summary
The navigation components of SuperClaude_Website provide a dual-layered approach to site exploration. The Navbar handles high-level site structure and theme toggling, while the Sidebar offers a detailed, category-based view of the framework documentation. Together, they leverage SidebarContext and dynamic mapping to provide a responsive and synchronized user experience across desktop and mobile platforms.