feat(client): unhidden top banner, hidden al-banner

Author: DamianBrzezinskiHoA

libs/blog/ad-banner/ui/src/lib/top-banner.component.ts

@@ -6,12 +6,14 @@ import { Component } from '@angular/core';
     <a
       class="flex w-full flex-wrap justify-center gap-[5px] px-[10px] py-3 text-[18px] font-medium text-white"
       style="background-image: linear-gradient(0.25turn, #fe5758, #8d52fe)"
-      href="https://www.youtube.com/watch?v=Ygnx8eH4acg"
+      href="https://meetup.angular.love/spring-camp-2025/?utm_source=angular.loveweb&utm_medium=baner&utm_campaign=angularspringcamp25"
     >
+      <span>
+        Free Angular Spring Camp with GDEs - 22nd May at 6 PM (CEST) Online!
+      </span>
       <span class="rounded-[4px] bg-white px-[6px] text-[#b10620]">
-        ANGULAR SPRING CAMP
+        Register now
       </span>
-      <span>&nbsp;- JOIN LIVE TODAY AT 6 PM (CEST)</span>
     </a>
   `,
 })

libs/blog/shell/feature-shell-web/src/lib/root-shell.component.ts

@@ -5,7 +5,6 @@ import { Router, RouterOutlet } from '@angular/router';
 import { TranslocoService } from '@jsverse/transloco';
 import { startWith } from 'rxjs';
 
-import { AdBannerStore } from '@angular-love/blog/ad-banner/data-access';
 import { AlLocalizeService } from '@angular-love/blog/i18n/util';
 import {
   FooterComponent,
@@ -14,14 +13,14 @@ import {
 } from '@angular-love/blog/layouts/ui-layouts';
 import { SearchComponent } from '@angular-love/blog/search/feature-search';
 import {
-  AdImageBanner,
   AlBannerCarouselComponent,
+  TopBannerComponent,
 } from '@angular-love/blog/shared/ad-banner';
 
 @Component({
   selector: 'al-root-shell',
   template: `
-    <!--    <al-top-banner #topBanner />-->
+    <al-top-banner #topBanner />
     <div class="sticky top-0 z-10 w-full">
       <al-header
         class="block w-full"
@@ -32,13 +31,13 @@ import {
       </al-header>
     </div>
     <al-layout class="mt-0" [ngClass]="{ 'mt-20': adBannerVisible() }">
-      @if (slides()?.length && slides(); as slides) {
-        <al-banner-carousel
-          class="mb-4 inline-block"
-          [banners]="slides"
-          [msPerSlide]="msPerSlide()!"
-        />
-      }
+      <!--      @if (slides()?.length && slides(); as slides) {-->
+      <!--        <al-banner-carousel-->
+      <!--          class="mb-4 inline-block"-->
+      <!--          [banners]="slides"-->
+      <!--          [msPerSlide]="msPerSlide()!"-->
+      <!--        />-->
+      <!--      }-->
       <router-outlet />
     </al-layout>
     <al-footer class="mt-auto block" />
@@ -50,24 +49,24 @@ import {
     LayoutComponent,
     SearchComponent,
     NgClass,
-    AlBannerCarouselComponent,
+    TopBannerComponent,
   ],
 })
 export class RootShellComponent {
-  protected readonly sliderStore = inject(AdBannerStore);
-  protected readonly slides = computed<AdImageBanner[] | undefined>(() =>
-    this.sliderStore.slider()?.slides.map((slide) => ({
-      url: slide.url,
-      alt: slide.alt,
-      action: {
-        type: 'url',
-        url: slide.navigateTo,
-      },
-    })),
-  );
-  protected readonly msPerSlide = computed(
-    () => this.sliderStore.slider()?.slideDisplayTimeMs,
-  );
+  // protected readonly sliderStore = inject(AdBannerStore);
+  // protected readonly slides = computed<AdImageBanner[] | undefined>(() =>
+  //   this.sliderStore.slider()?.slides.map((slide) => ({
+  //     url: slide.url,
+  //     alt: slide.alt,
+  //     action: {
+  //       type: 'url',
+  //       url: slide.navigateTo,
+  //     },
+  //   })),
+  // );
+  // protected readonly msPerSlide = computed(
+  //   () => this.sliderStore.slider()?.slideDisplayTimeMs,
+  // );
 
   readonly translocoService = inject(TranslocoService);
 
@@ -99,6 +98,6 @@ export class RootShellComponent {
         ? viewport.setOffset([0, 160])
         : viewport.setOffset([0, 80]);
     });
-    this.sliderStore.getData();
+    // this.sliderStore.getData();
   }
 }