Layout Components
Relevant source files
The following files were used as context for generating this wiki page:
The layout components form the primary user interface shell for the Adfluens web application. They are responsible for providing a consistent structure, navigation, and visual identity across different views. The core of the layout system is a persistent sidebar and a main content area that renders the application's routes. This system is deeply integrated with the project's design philosophy, "The Digital Prism," which emphasizes minimalism, clarity, and a distinct "Soft Brutalism" aesthetic.
The layout is built using React components and styled with Tailwind CSS, adhering to a strict design system defined in DESIGN.md. It supports both light and dark themes, with theme state managed and persisted to ensure a seamless user experience. While most of the application uses a standard sidebar layout, specific views like authentication pages may implement their own specialized layouts.
Core Layout Architecture
The main application layout is defined by the AppLayout component, which orchestrates the arrangement of the Sidebar and the main content area.
Sources: apps/web/src/shared/components/app-layout.component.tsx
AppLayout Component
The AppLayout component is the root of the standard page structure. It uses a flexbox container to position the Sidebar on the left and a main content area that takes up the remaining space. Child routes, defined in the application's router, are rendered within the main element via the <Outlet /> component from react-router-dom.
The component structure is as follows:
This diagram shows the component hierarchy of the main application layout.
Sources: apps/web/src/shared/components/app-layout.component.tsx:11-19
Specialized Layouts
Not all views use the AppLayout. For example, the SignUpView implements its own two-column layout to provide a distinct user experience for authentication. This layout consists of a branded content panel on the left (hidden on smaller screens) and the authentication form on the right. This demonstrates that while a primary layout exists, the architecture is flexible enough to accommodate full-page views with unique structures.
Sources: apps/web/src/features/auth/views/sign-up.view.tsx:68-124
Sidebar Component
The Sidebar is the primary navigation and context hub of the application. It is a sticky, full-height component with a consistent structure.
Sources: apps/web/src/shared/components/sidebar.component.tsx
Structure and Sections
The sidebar is vertically organized into several distinct functional sections, separated by borders.
This diagram illustrates the vertical block structure of the Sidebar component.
Sources: apps/web/src/shared/components/sidebar.component.tsx:49-140
| Section | Description | Key Components/Elements | Source Lines |
|---|---|---|---|
| Logo / Brand | Displays the application name and logo. | h1, p, Youtube icon | [sidebar.component.tsx:51-63](https://github.com/Monsoft-Solutions/adfluens-app/blob/HEAD/sidebar.component.tsx#L51-L63) |
| Navigation | Contains primary navigation links. | nav, NavItem | [sidebar.component.tsx:66-75](https://github.com/Monsoft-Solutions/adfluens-app/blob/HEAD/sidebar.component.tsx#L66-L75) |
| User Section | Manages user session display and actions. | useSession, Button, Skeleton | [sidebar.component.tsx:78-127](https://github.com/Monsoft-Solutions/adfluens-app/blob/HEAD/sidebar.component.tsx#L78-L127) |
| Theme Toggle | Allows the user to change the UI theme. | Separator, ThemeToggleIcon | [sidebar.component.tsx:130-133](https://github.com/Monsoft-Solutions/adfluens-app/blob/HEAD/sidebar.component.tsx#L130-L133) |
| Footer | Displays copyright information. | p | [sidebar.component.tsx:136-140](https://github.com/Monsoft-Solutions/adfluens-app/blob/HEAD/sidebar.component.tsx#L136-L140) |
Navigation
Navigation is handled by the NavItem sub-component, which wraps react-router-dom's NavLink. This allows for automatic active-state styling. When a NavLink is active, it receives specific classes (bg-primary/10, text-primary) to visually distinguish it from other links.
Sources: apps/web/src/shared/components/sidebar.component.tsx:17-31
User Session Management
The "User Section" is dynamic and reflects the current authentication state using the useSession hook from @repo/auth/client.
- Loading: While the session is being fetched (
isPending), it displaysSkeletonplaceholders. - Authenticated: If a user session exists, it displays the user's name, email, and a "Sign out" button.
- Unauthenticated: If no session exists, it displays a "Sign in" button.
Sources: apps/web/src/shared/components/sidebar.component.tsx:80-127
Theming and Styling
The layout components are styled according to the "Soft Brutalism" principles outlined in the design system. This includes the use of 1px solid borders, tight border radii, and a high-contrast color palette without drop shadows.
Sources: DESIGN.md:81-90
Color and Font Variables
Styling is driven by CSS variables defined in shared-styles.css, which are derived from the design system's color palette. Key variables used in the layout include:
--background: The main page background color.--card: The background color for surfaces like the sidebar.--border: The color for all structural borders.--primary: The primary accent color, used for active navigation items.--font-sansand--font-display: The primary fonts used throughout the UI.
These variables are defined for both light ("Paper & Ink") and dark ("Obsidian & Neon") modes.
Sources: packages/tailwind-config/shared-styles.css:175-241, DESIGN.md:37-64
Theme Switching
Theme management is handled by a combination of a React context (useTheme), localStorage, and a script in index.html. The Sidebar uses the ThemeToggleIcon component to allow users to cycle through "light", "dark", and "system" themes.
The theme switching flow is as follows:
This diagram shows the sequence of events when a user changes the theme.
To prevent a "flash of unstyled content" (FOUC) on page load, a blocking script in the <head> of index.html reads the theme from localStorage and applies the correct class (light or dark) to the <html> element before the page is rendered.
Sources: apps/web/index.html:4-16, apps/web/src/shared/components/sidebar.component.tsx:45, 132, packages/ui/src/components/theme-toggle.tsx