Layout & Footer
Relevant source files
The following files were used as context for generating this wiki page:
The Layout and Footer system of the SuperClaude Website provides a consistent structural framework for the application. It manages the global positioning of navigational elements, the main content area, and the terminal copyright information across all pages, including specialized handling for documentation views.
This system utilizes a composition of persistent components wrapped around a dynamic routing area, ensuring that users maintain access to navigation and theme controls regardless of their location within the site.
Core Layout Architecture
The application layout is defined in the App component, which establishes the global hierarchy of the user interface. It uses a flexbox-based structure to ensure the footer remains at the bottom of the viewport while allowing the main content to grow as needed.
Component Composition
The layout consists of several key functional areas:
- Navbar: A fixed header containing primary navigation links and theme toggles.
- Sidebar: A conditional, slide-out menu used primarily for documentation navigation.
- Main Content Area: A container that dynamically adjusts its padding based on the current route.
- Footer: A persistent bottom section for legal and copyright information.
The diagram above illustrates the high-level component hierarchy where persistent elements like the Navbar and Sidebar exist outside the primary flex container that houses the main content and Footer. Sources: src/App.js:34-51
Layout Logic and Responsiveness
The layout employs conditional logic to adjust the interface based on the user's current location within the site. Specifically, when a user is within the /docs path, the layout shifts to accommodate the persistent sidebar on larger screens.
Dynamic Spacing
The AppContent component detects if the current URL starts with /docs. If true, it applies a left padding of lg:pl-64 to the main element to prevent content from being obscured by the documentation sidebar.
Sources: src/App.js:19-21
| Property | Default Value | Documentation View Value | Source |
|---|---|---|---|
| Top Padding | pt-24 | pt-24 | src/App.js:21 |
| Bottom Padding | pb-8 | pb-8 | src/App.js:21 |
| Left Padding (Desktop) | 0 | lg:pl-64 | src/App.js:21 |
| Flex Direction | flex-col | flex-col | src/App.js:43 |
Navigation Integration
The Navbar also adjusts its internal layout for documentation pages. On desktop view, it adds a lg:pl-64 class and displays a MenuButton to allow sidebar interaction.
Sources: src/components/Navbar.js:25, src/components/Navbar.js:33-35
Footer Implementation
The Footer is a simplified functional component located at the bottom of the main layout container. It is separated from the main content by a border and a top margin.
Structural Details
The footer is styled using Tailwind CSS utility classes to ensure it spans the full width of the container while centering its content within a maximum width of 7xl.
Sources: src/components/Footer.js:4-13
function Footer() {
return (
<footer className="w-full border-t border-border mt-12">
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<div className="text-center text-sm text-muted-foreground">
<p>© 2025 SuperClaude-Org. All rights reserved.</p>
</div>
</div>
</footer>
);
}
Sources: src/components/Footer.js:4-14
Styling and Theming
The layout relies on CSS variables defined in index.css and mapped in tailwind.config.js. This allows the layout to seamlessly transition between light and dark modes.
Global Layout Styles
The body element is configured to have a minimum height of 100vh and uses the bg-background and text-foreground variables to ensure consistent coloring.
Sources: src/index.css:36-39
Theme Configuration
The layout system utilizes a set of semantic colors for its structural elements:
- --background: Applied to the main page body.
- --border: Used for the header bottom border and footer top border.
- --muted-foreground: Used for the text color in the Footer.
Sources: src/index.css:6-14, src/tailwind.config.js:8-21
The Layout and Footer system provides the foundational structure for the SuperClaude Website, managing the spatial relationships between navigation, content, and branding while responding dynamically to route changes and theme preferences.