Skip to main content

Layout Map

LibreApps Desktop uses a hierarchical, collapsible navigation system and a modular layout structure. This page provides a map of the primary UI objects and their roles.

UI Architecture Overview​

The application layout is divided into several key functional areas:

Primary Layout Components​

Each major part of the layout is handled by a dedicated React component. Click on a component name to view its detailed documentation, usage, and code.

App Sidebar​

The main navigation container. It is collapsible and resizable.

  • Location: src/components/app-sidebar.tsx
  • Role: Houses the team switcher, primary navigation links, and user profile.

The top navigation bar that appears on mobile or as a header in certain layouts.

  • Location: src/components/navbar.tsx
  • Role: Provides breadcrumbs and mobile menu access.

Container​

A structural component that provides consistent horizontal padding and max-width.

  • Location: src/components/layout/container.tsx
  • Role: Ensures content is centered and constrained on large screens.

Grid​

A flexible grid system for organizing page content into columns.

  • Location: src/components/layout/grid.tsx
  • Role: Simplifies the creation of responsive multi-column layouts.

The sidebar follows this logical structure:

  1. Dashboards: High-level data overviews (Analytics, CRM, eCommerce).
  2. Applications: Functional tools (Email, Chat, Calendar).
  3. Pages: Standard application pages (Account, Marketing, Auth).
  4. Design System: Documentation and previews for all UI components.
  5. Development: Tools for developers (API Docs, Icon Library).

For detailed UI elements like buttons and cards, see the Components section.