diff --git a/src/app/app.component.html b/src/app/app.component.html index 8499f6e..b963056 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,8 @@ - +@if(!(layout.isMobile | async)) { + +} @else { + +} @defer (when bannerService.banners.length > 0) { } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 73dd495..5e7841c 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -9,13 +9,16 @@ import {AuthenticationService} from "./api/authentication.service"; import {PopupBannerContainerComponent} from "./banners/popup-banner-container.component"; import {BannerService} from "./banners/banner.service"; import {animate, group, query, style, transition, trigger} from "@angular/animations"; +import {LayoutService} from "./services/layout.service"; +import {AsyncPipe} from "@angular/common"; +import {HeaderMobileComponent} from "./components/ui/header/mobile/header-mobile.component"; const fadeLength: string = "100ms"; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet, HeaderComponent, PopupBannerContainerComponent], + imports: [RouterOutlet, HeaderComponent, PopupBannerContainerComponent, AsyncPipe, HeaderMobileComponent], templateUrl: './app.component.html', animations: [ trigger('routeAnimations', [ @@ -38,6 +41,7 @@ export class AppComponent { constructor(private title: TitleService, private embed: EmbedService, private auth: AuthenticationService, + protected layout: LayoutService, protected bannerService: BannerService, library: FaIconLibrary) { library.addIconPacks(fas) diff --git a/src/app/components/ui/header/header-logo.component.ts b/src/app/components/ui/header/header-logo.component.ts new file mode 100644 index 0000000..049c670 --- /dev/null +++ b/src/app/components/ui/header/header-logo.component.ts @@ -0,0 +1,20 @@ +import { Component } from '@angular/core'; +import {NgOptimizedImage} from "@angular/common"; +import {RouterLink} from "@angular/router"; + +@Component({ + selector: 'app-header-logo', + standalone: true, + imports: [ + NgOptimizedImage, + RouterLink + ], + template: ` + + Refresh Logo + + ` +}) +export class HeaderLogoComponent { + +} diff --git a/src/app/components/ui/header/header-me.component.ts b/src/app/components/ui/header/header-me.component.ts index e5ead1f..fd485f3 100644 --- a/src/app/components/ui/header/header-me.component.ts +++ b/src/app/components/ui/header/header-me.component.ts @@ -1,13 +1,12 @@ -import { Component } from '@angular/core'; +import {Component, Input} from '@angular/core'; import {UserAvatarComponent} from "../photos/user-avatar.component"; import {AuthenticationService} from "../../../api/authentication.service"; import {AsyncPipe} from "@angular/common"; -import {faCaretDown, faChevronDown, faSignInAlt} from "@fortawesome/free-solid-svg-icons"; +import {faCaretDown, faSignInAlt} from "@fortawesome/free-solid-svg-icons"; import {NavbarItemComponent} from "./navbar-item.component"; import {UserRouterLinkComponent} from "../text/links/user-router-link.component"; import {FaIconComponent} from "@fortawesome/angular-fontawesome"; import {HeaderMeMenuComponent} from "./header-me-menu.component"; -import {NavItem} from "./navtypes"; @Component({ selector: 'app-header-me', @@ -25,7 +24,9 @@ import {NavItem} from "./navtypes";
- + @if(arrow) { + + }
@if(showMenu) { @@ -40,6 +41,7 @@ import {NavItem} from "./navtypes"; }) export class HeaderMeComponent { protected showMenu: boolean = false; + @Input() arrow: boolean = false; toggleMenu(): void { this.showMenu = !this.showMenu; diff --git a/src/app/components/ui/header/header.component.ts b/src/app/components/ui/header/header.component.ts index c38dfa4..1bc551e 100644 --- a/src/app/components/ui/header/header.component.ts +++ b/src/app/components/ui/header/header.component.ts @@ -2,30 +2,19 @@ import { Component } from '@angular/core'; import { AsyncPipe, NgOptimizedImage } from "@angular/common"; import {NavbarItemComponent} from "./navbar-item.component"; import {Router, RouterLink} from "@angular/router"; -import { - faBookOpen, - faCheckCircle, - faEnvelope, faFire, - faFireAlt, - faImages, - faPlay, faQuestionCircle, faRandom, faSearch, - faShareAlt, - faSignInAlt, faThList, - faTools, faTrophy -} from "@fortawesome/free-solid-svg-icons"; +import {faSignInAlt} from "@fortawesome/free-solid-svg-icons"; import {FormComponent} from "../form/form.component"; -import {FormControl, FormGroup} from "@angular/forms"; import {TextboxComponent} from "../form/textbox.component"; import {SearchBarComponent} from "../form/search-bar.component"; import {LayoutService} from "../../../services/layout.service"; -import {NavCategory} from "./navtypes"; import {NavbarCategoryComponent} from "./navbar-category.component"; import {FaIconComponent} from "@fortawesome/angular-fontawesome"; import {SearchComponent} from "../../../overlays/search.component"; -import {AuthenticationService} from "../../../api/authentication.service"; import {UserLinkComponent} from "../text/links/user-link.component"; import {UserAvatarComponent} from "../photos/user-avatar.component"; import {HeaderMeComponent} from "./header-me.component"; +import {HeaderLogoComponent} from "./header-logo.component"; +import {navTree, rightNavTree} from './navtypes'; @Component({ selector: 'header-vertical-divider', @@ -52,14 +41,13 @@ class VerticalDividerComponent {} SearchComponent, UserLinkComponent, UserAvatarComponent, - HeaderMeComponent + HeaderMeComponent, + HeaderLogoComponent ], template: `
- - Refresh Logo - +