77 lines
2.7 KiB
HTML
77 lines
2.7 KiB
HTML
<aside class="sidebar">
|
|
|
|
<div class="sidebar-header">
|
|
<div class="logo">
|
|
<span class="logo-icon">✦</span>
|
|
<span class="logo-text">LoreMind</span>
|
|
</div>
|
|
<p class="logo-subtitle">{{ 'sidebar.subtitle' | translate }}</p>
|
|
</div>
|
|
|
|
<div class="nav-toggle">
|
|
<button class="toggle-btn" [class.active]="currentRoute.startsWith('/lore')" (click)="navigateTo('/lore')">
|
|
{{ 'sidebar.tabLore' | translate }}
|
|
</button>
|
|
<button class="toggle-btn" [class.active]="currentRoute.startsWith('/campaigns')" (click)="navigateTo('/campaigns')">
|
|
{{ 'sidebar.tabCampaign' | translate }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mode contextuel : liste des lores ou campagnes -->
|
|
@if (layoutConfig$ | async; as config) {
|
|
<div class="context-list">
|
|
@for (item of config.globalItems; track item) {
|
|
<button
|
|
class="context-item"
|
|
[class.active]="isActive(item.route)"
|
|
(click)="navigateTo(item.route)">
|
|
{{ item.name }}
|
|
</button>
|
|
}
|
|
</div>
|
|
<div class="spacer"></div>
|
|
<button class="btn-back-all" (click)="navigateTo(config.globalBackRoute)">
|
|
<lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
|
|
<span>{{ config.globalBackLabel }}</span>
|
|
</button>
|
|
}
|
|
|
|
<!-- Mode normal : spacer + outils -->
|
|
@if (!(layoutConfig$ | async)) {
|
|
<div class="spacer"></div>
|
|
}
|
|
|
|
<div class="tools-section">
|
|
<p class="tools-label">{{ 'sidebar.toolsLabel' | translate }}</p>
|
|
<button class="tool-btn" (click)="openSearch()">
|
|
<lucide-icon [img]="Search" [size]="16"></lucide-icon>
|
|
<span>{{ 'sidebar.globalSearch' | translate }}</span>
|
|
<span class="tool-kbd">Ctrl+K</span>
|
|
</button>
|
|
<button class="tool-btn" [class.active]="currentRoute.startsWith('/game-systems')" (click)="navigateTo('/game-systems')">
|
|
<lucide-icon [img]="Dices" [size]="16"></lucide-icon>
|
|
<span>{{ 'sidebar.gameSystems' | translate }}</span>
|
|
</button>
|
|
@if (!config.demoMode) {
|
|
<button class="tool-btn">
|
|
<lucide-icon [img]="Download" [size]="16"></lucide-icon>
|
|
<span>{{ 'sidebar.vttExport' | translate }}</span>
|
|
</button>
|
|
}
|
|
@if (!config.demoMode) {
|
|
<button class="tool-btn" [class.active]="currentRoute.startsWith('/settings')" (click)="navigateTo('/settings')">
|
|
<lucide-icon [img]="Settings" [size]="16"></lucide-icon>
|
|
<span>{{ 'sidebar.settings' | translate }}</span>
|
|
@if (updateAvailable$ | async) {
|
|
<span class="update-badge" [title]="'sidebar.updateAvailable' | translate">{{ 'sidebar.updateBadge' | translate }}</span>
|
|
}
|
|
</button>
|
|
}
|
|
</div>
|
|
|
|
<div class="sidebar-footer">
|
|
<span class="version">{{ 'sidebar.version' | translate:{ version: appVersion } }}</span>
|
|
</div>
|
|
|
|
</aside>
|