Customizing the sidebar

The desktop has two sidebars. The main sidebar lists the apps in groups. The second sidebar shows the menu of the app you are in.

The main sidebar

Each enabled app is shown in the group named in its manifest, when the app is permitted for the user and its sidebarOrder is greater than zero:

apps/Deals/manifest.yaml (excerpt)

sidebarGroup: sales

Groups

The groups come from Desktop\Services\Sidebar::getSidebarGroups(). You can replace the list through the configuration value sidebarGroups:

apps/Desktop/Services/Sidebar.php (excerpt)

  public function getSidebarGroups() {
    return $this->config()->getAsArray('sidebarGroups', [
      'crm' => [ 'color' => '#7a23dc', 'title' => $this->translate('CRM'), 'icon' => 'fas fa-id-card-clip' ],
      'marketing' => [ 'color' => '#c6aa39', 'title' => $this->translate('Marketing'), 'icon' => 'fas fa-bullseye' ],
      'sales' => [ 'color' => '#f50ab9', 'title' => $this->translate('Sales'), 'icon' => 'fas fa-users-viewfinder' ],
      'productivity' => [ 'color' => '#20689f', 'title' => $this->translate('Productivity'), 'icon' => 'fas fa-diagram-project' ],
      'human-resources' => [ 'color' => '#759f20', 'title' => $this->translate('Human resources'), 'icon' => 'fas fa-helmet' ],
      'finance' => [ 'color' => '#ce4715ff', 'title' => $this->translate('Finance'), 'icon' => 'fas fa-credit-card' ],
      'custom' => [ 'color' => '#888888', 'title' => $this->translate('Custom'), 'icon' => 'fas fa-puzzle-piece' ],
      'maintenance' => [ 'color' => '#c0c90e', 'title' => $this->translate('Maintenance'), 'icon' => 'fas fa-cog' ],
      'help' => [ 'color' => '#005a16ff', 'title' => $this->translate('Help'), 'icon' => 'fas fa-life-ring' ],
    ]);
  }

Apps of the groups used in the community apps: crm (11 apps), maintenance (6), sales (5), human-resources (5), marketing, help, finance (2 each), productivity and retail (1 each). A custom app uses custom.

Order

The order of an app in the sidebar is the configuration value sidebarOrder of the app. The administrator changes it in Settings → Sidebar. An app with sidebarOrder 0 is not shown. Set the default for your app in init():

public function init(): void
{
  parent::init();

  $this->setConfigAsInteger('sidebarOrder', 0);
}

apps/Settings/Controllers/Sidebar.php (excerpt)

      foreach ($appSidebarSettings as $rootUrlSlug => $sidebarOrder) {
        foreach ($installedApps as $appNamespace => $app) {
          if (($app->manifest['rootUrlSlug'] ?? '') == $rootUrlSlug) {
            $app->saveConfig('sidebarOrder', $sidebarOrder);
            $app->setConfigAsString('sidebarOrder', $sidebarOrder);
          }
        }
      }

The badge

The red number next to the app is the result of getSidebarBadgeNumber() of its Loader. The values are cached per user and invalidated when the home screen is displayed. See Sidebar badges.

The second sidebar

renderSecondSidebar() returns the HTML of the menu. Use the helpers secondSidebarTitle() and secondSidebarButton() — they highlight the button of the current page and translate the title:

apps/Invoices/Loader.php (excerpt)

  public function renderSecondSidebar(): string
  {

  /** @var Counter */
    $counter = $this->getService(Counter::class);

    $preparedItemsCount = $counter->preparedItems();
    $draftInvoicesCount = $counter->draftInvoices();

    return '
      ' . $this->secondSidebarTitle() . '
      <div class="app-sidebar-buttons">
        ' . $this->secondSidebarButton('invoices?filters%5BfDraft%5D=1', 'fas fa-pen-to-square', 'Drafts', $draftInvoicesCount) . '
        ' . $this->secondSidebarButton('invoices/items', 'fas fa-list', 'Items', $preparedItemsCount) . '
        ' . $this->secondSidebarButton('invoices/payments', 'fas fa-euro-sign', 'Payments') . '
        ' . $this->secondSidebarButton('invoices/payment-methods', 'fas fa-wallet', 'Payment methods') . '
        ' . $this->secondSidebarButton('invoices/profiles', 'fas fa-address-card', 'Invoicing profiles') . '
      </div>
    ';
  }

More in Second sidebar.

The app menu

The menu of apps that opens from the logo (the "app menu") is collected from the AppMenu extendible of every enabled app. An app can also add an item directly with AppMenuManager::addItem(), as AiAssistent does:

$appMenu = $this->getService(\Hubleto\App\Community\Desktop\AppMenuManager::class);
$appMenu->addItem($this, 'ai-assistant', $this->translate('AIAssistant'), 'fas fa-robot');