Skip to main content

Navigation Logic

How LibreApps Desktop dynamically generates the sidebar and top navigation.

Overview​

The navigation system in LibreApps Desktop is designed to be highly flexible and responsive to the rebranding configuration. The scripts/rebrand-nav-logic.js script is responsible for updating the navigation structure based on your settings.md choices.

Core Components​

1. Sidebar Configuration​

The sidebar structure is defined in a JSON or TypeScript file (e.g., src/configs/sidebar.ts). This file contains an array of navigation items, each with a label, icon, and route.

2. Rebrand Logic Script​

The rebrand-nav-logic.js script performs the following tasks:

  • Parsing: Reads the Navigation & Pages section of settings.md.
  • Filtering: Removes any navigation items that are marked as disabled ([ ]).
  • Renaming: Updates the labels of navigation items if a Rename: tag is provided.
  • Ordering: (Optional) Reorders navigation items based on their position in the settings.md file.

Configuration Example​

In rebrand/settings.md:

### [ ] Section: Dashboards
- [x] **Analytics** | Rename: [My Stats]
- [x] **CRM**

The resulting sidebar will show:

  1. My Stats (pointing to the analytics route)
  2. CRM (pointing to the CRM route)

Dynamic Routing​

LibreApps Desktop uses Next.js dynamic routing to handle multi-language support ([lang]). The navigation logic ensures that all generated links include the correct language prefix.

Best Practices​

  • ✅ Do this: Use the Rename: feature to tailor the navigation labels to your brand's voice.
  • ✅ Do this: Group related pages into sections to keep the sidebar organized.
  • ❌ Don't do this: Manually edit the sidebar.ts file in the rebranded workspace; your changes will be overwritten by the rebrand engine.