mirror of https://github.com/Chocobozzz/PeerTube
88 lines
3.8 KiB
HTML
88 lines
3.8 KiB
HTML
<ng-template #moreInfoButton>
|
|
<my-button i18n class="mt-2 d-block" theme="secondary" icon="help" i18n-title title="More info" i18n ptRouterLink="/about" ptRouterLinkActive="active">
|
|
@if (!collapsed) {
|
|
More info
|
|
}
|
|
</my-button>
|
|
</ng-template>
|
|
|
|
<div class="menu-container" [ngClass]="{ collapsed: collapsed, 'logged-in': loggedIn }">
|
|
|
|
<div class="main-menu-wrapper">
|
|
<div class="main-menu-scrollbar">
|
|
|
|
<div class="main-menu">
|
|
<div class="mobile-controls">
|
|
<span class="icon-logo"></span>
|
|
|
|
<my-button rounded="true" icon="cross" theme="tertiary" (click)="toggleMenu()"></my-button>
|
|
</div>
|
|
|
|
<div class="toggle-menu-container">
|
|
@if (collapsed) {
|
|
<button type="button" class="button-unstyle toggle-menu" i18n-title title="Display the lateral menu" (click)="toggleMenu()">
|
|
<my-global-icon class="transform-rotate-180" iconName="chevron-left"></my-global-icon>
|
|
</button>
|
|
} @else {
|
|
<button type="button" class="button-unstyle toggle-menu" i18n-title title= "Hide the lateral menu" (click)="toggleMenu()">
|
|
<my-global-icon iconName="chevron-left"></my-global-icon>
|
|
</button>
|
|
}
|
|
</div>
|
|
|
|
<div *ngIf="!loggedIn" class="about about-top">
|
|
<div i18n [ngClass]="{ 'visually-hidden': collapsed }" class="block-title me-2">{{ instanceName }}</div>
|
|
|
|
<div [ngClass]="{ 'visually-hidden': collapsed }" class="description">{{ shortDescription }}</div>
|
|
|
|
<ng-container *ngTemplateOutlet="moreInfoButton"></ng-container>
|
|
</div>
|
|
|
|
<nav>
|
|
<ng-container *ngFor="let menuSection of menuSections" >
|
|
<ul class="ul-unstyle" [ngClass]="[ menuSection.key, 'menu-block' ]">
|
|
<li i18n>
|
|
<div class="block-title ellipsis" [ngClass]="{ 'visually-hidden': collapsed }">{{ menuSection.title }}</div>
|
|
|
|
<ul class="ul-unstyle">
|
|
<li *ngFor="let link of menuSection.links">
|
|
@if (link.isPrimaryButton === true) {
|
|
<my-button class="d-block menu-button" [ngClass]="link.ngClass" theme="primary" [icon]="link.icon" [title]="link.label" [ptRouterLink]="link.path">
|
|
@if (!collapsed) {
|
|
{{ link.label }}
|
|
}
|
|
</my-button>
|
|
} @else {
|
|
<a class="menu-link ellipsis" [routerLink]="link.path" routerLinkActive="active" [ngClass]="link.ngClass" [title]="link.label">
|
|
<my-global-icon *ngIf="link.icon" [iconName]="link.icon" [ngClass]="link.iconClass" aria-hidden="true"></my-global-icon>
|
|
<span [ngClass]="{ 'visually-hidden': collapsed }">{{ link.label }}</span>
|
|
</a>
|
|
}
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</ng-container>
|
|
</nav>
|
|
|
|
<div *ngIf="loggedIn" class="about">
|
|
<div [ngClass]="{ 'visually-hidden': collapsed }" class="block-title">{{ instanceName }}</div>
|
|
|
|
<ng-container *ngTemplateOutlet="moreInfoButton"></ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="!collapsed" class="mt-3 mx-4">
|
|
<div class="fs-8" i18n>
|
|
Platform powered by <a class="" href="https://joinpeertube.org" target="_blank" rel="noopener noreferrer">PeerTube</a>
|
|
</div>
|
|
|
|
<a class="d-block fs-8" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer" i18n>Discover more platforms</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->
|
|
<div class="menu-overlay" [ngClass]="{ 'menu-collapsed': collapsed }" (click)="toggleMenu()"></div>
|