diff --git a/UI/Web/src/app/_services/nav.service.ts b/UI/Web/src/app/_services/nav.service.ts index 65d9fca17..0aad76ef7 100644 --- a/UI/Web/src/app/_services/nav.service.ts +++ b/UI/Web/src/app/_services/nav.service.ts @@ -9,6 +9,24 @@ import {AccountService} from "./account.service"; import {map} from "rxjs/operators"; import {NavigationEnd, Router} from "@angular/router"; import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; +import {SettingsTabId} from "../sidenav/preference-nav/preference-nav.component"; +import {WikiLink} from "../_models/wiki"; + +/** + * NavItem used to construct the dropdown or NavLinkModal on mobile + * Priority construction + * @param routerLink A link to a page on the web app, takes priority + * @param fragment Optional fragment for routerLink + * @param href A link to an external page, must set noopener noreferrer + * @param click Callback, lowest priority. Should only be used if routerLink and href or not set + */ +interface NavItem { + transLocoKey: string; + href?: string; + fragment?: string; + routerLink?: string; + click?: () => void; +} @Injectable({ providedIn: 'root' @@ -21,6 +39,33 @@ export class NavService { public localStorageSideNavKey = 'kavita--sidenav--expanded'; + public navItems: NavItem[] = [ + { + transLocoKey: 'all-filters', + routerLink: '/all-filters/', + }, + { + transLocoKey: 'browse-genres', + routerLink: '/browse/genres', + }, + { + transLocoKey: 'browse-tags', + routerLink: '/browse/tags', + }, + { + transLocoKey: 'announcements', + routerLink: '/announcements/', + }, + { + transLocoKey: 'help', + href: WikiLink.Guides, + }, + { + transLocoKey: 'logout', + click: () => this.logout(), + } + ] + private navbarVisibleSource = new ReplaySubject(1); /** * If the top Nav bar is rendered or not @@ -127,6 +172,13 @@ export class NavService { }, 10); } + logout() { + this.accountService.logout(); + this.hideNavBar(); + this.hideSideNav(); + this.router.navigateByUrl('/login'); + } + /** * Shows the side nav. When being visible, the side nav will automatically return to previous collapsed state. */ diff --git a/UI/Web/src/app/nav/_components/nav-header/nav-header.component.html b/UI/Web/src/app/nav/_components/nav-header/nav-header.component.html index 089262875..d2e94d906 100644 --- a/UI/Web/src/app/nav/_components/nav-header/nav-header.component.html +++ b/UI/Web/src/app/nav/_components/nav-header/nav-header.component.html @@ -205,12 +205,15 @@ {{user.username | sentenceCase}}
- {{t('all-filters')}} - {{t('browse-genres')}} - {{t('browse-tags')}} - {{t('announcements')}} - {{t('help')}} - {{t('logout')}} + @for (navItem of navService.navItems; track $index) { + @if (navItem.routerLink) { + {{t(navItem.transLocoKey)}} + } @else if (navItem.href) { + {{t(navItem.transLocoKey)}} + } @else if (navItem.click) { + {{t(navItem.transLocoKey)}} + } + }
} diff --git a/UI/Web/src/app/nav/_components/nav-header/nav-header.component.ts b/UI/Web/src/app/nav/_components/nav-header/nav-header.component.ts index fd4af01f0..11b1f3307 100644 --- a/UI/Web/src/app/nav/_components/nav-header/nav-header.component.ts +++ b/UI/Web/src/app/nav/_components/nav-header/nav-header.component.ts @@ -134,13 +134,6 @@ export class NavHeaderComponent implements OnInit { this.cdRef.markForCheck(); } - logout() { - this.accountService.logout(); - this.navService.hideNavBar(); - this.navService.hideSideNav(); - this.router.navigateByUrl('/login'); - } - moveFocus() { this.document.getElementById('content')?.focus(); } @@ -253,7 +246,6 @@ export class NavHeaderComponent implements OnInit { openLinkSelectionMenu() { const ref = this.modalService.open(NavLinkModalComponent, {fullscreen: 'sm'}); - ref.componentInstance.logoutFn = this.logout.bind(this); } } diff --git a/UI/Web/src/app/nav/_components/nav-link-modal/nav-link-modal.component.html b/UI/Web/src/app/nav/_components/nav-link-modal/nav-link-modal.component.html index 6d94f0ed5..48c93f410 100644 --- a/UI/Web/src/app/nav/_components/nav-link-modal/nav-link-modal.component.html +++ b/UI/Web/src/app/nav/_components/nav-link-modal/nav-link-modal.component.html @@ -6,21 +6,22 @@
+
{{t('settings')}}
-
- {{t('all-filters')}} -
-
- {{t('announcements')}} -
-
- {{t('help')}} -
-
- {{t('logout')}} -
+ + @for (navItem of navService.navItems; track $index) { +
+ @if (navItem.routerLink) { + {{t(navItem.transLocoKey)}} + } @else if (navItem.href) { + {{t(navItem.transLocoKey)}} + } @else if (navItem.click) { + {{t(navItem.transLocoKey)}} + } +
+ }
diff --git a/UI/Web/src/app/nav/_components/nav-link-modal/nav-link-modal.component.ts b/UI/Web/src/app/nav/_components/nav-link-modal/nav-link-modal.component.ts index 6632d2256..2f531e24c 100644 --- a/UI/Web/src/app/nav/_components/nav-link-modal/nav-link-modal.component.ts +++ b/UI/Web/src/app/nav/_components/nav-link-modal/nav-link-modal.component.ts @@ -5,6 +5,7 @@ import {Router, RouterLink} from "@angular/router"; import {ReactiveFormsModule} from "@angular/forms"; import {TranslocoDirective} from "@jsverse/transloco"; import {SettingsTabId} from "../../../sidenav/preference-nav/preference-nav.component"; +import {NavService} from "../../../_services/nav.service"; @Component({ selector: 'app-nav-link-modal', @@ -25,17 +26,12 @@ export class NavLinkModalComponent { private readonly cdRef = inject(ChangeDetectorRef); private readonly modal = inject(NgbActiveModal); private readonly router = inject(Router); - - @Input({required: true}) logoutFn!: () => void; + protected readonly navService = inject(NavService); close() { this.modal.close(); } - logout() { - this.logoutFn(); - } - closeIfOnSettings() { setTimeout(() => { const currentUrl = this.router.url;