Vanessa/2885 workspace side notification

apps/prs/angular/src/app/app.component.html

@@ -1,4 +1,4 @@
-<div style="min-height: 100vh; display: flex; flex-direction: column">
+<div *ngIf="!isFullPage" style="min-height: 100vh; display: flex; flex-direction: column">
   <section slot="header" id="top" class="width" role="header" style="flex: 0 0 auto">
     <goab-microsite-header type="alpha" version="UAT" />
     <goab-app-header>
@@ -112,6 +112,7 @@
         <goabx-work-side-menu-item label="2722" url="/features/2722"></goabx-work-side-menu-item>
         <goabx-work-side-menu-item label="2730" url="/features/2730"></goabx-work-side-menu-item>
         <goabx-work-side-menu-item label="2829" url="/features/2829"></goabx-work-side-menu-item>
+        <goabx-work-side-menu-item label="2885 WorkSpace Notification" url="/features/2885"></goabx-work-side-menu-item>
         <goabx-work-side-menu-item label="3102" url="/features/3102"></goabx-work-side-menu-item>
         <goabx-work-side-menu-item label="3229 MenuButton" url="/features/3229"></goabx-work-side-menu-item>
         <goabx-work-side-menu-item label="3137" url="/features/3137"></goabx-work-side-menu-item>
@@ -137,3 +138,5 @@
     <goab-app-footer maxContentWidth="100%" />
   </section>
 </div>
+
+<router-outlet *ngIf="isFullPage"></router-outlet>

apps/prs/angular/src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
-import { Router } from "@angular/router";
+import { Router, NavigationEnd } from "@angular/router";
+import { filter } from "rxjs/operators";
 
 @Component({
   selector: "abgov-root",
@@ -8,7 +9,19 @@ import { Router } from "@angular/router";
   standalone: false,
 })
 export class AppComponent {
-  constructor(private router: Router) {}
+  isFullPage = false;
+
+  private fullPageRoutes = ["/features/2885"];
+
+  constructor(private router: Router) {
+    this.router.events
+      .pipe(filter((event) => event instanceof NavigationEnd))
+      .subscribe((event) => {
+        this.isFullPage = this.fullPageRoutes.includes(
+          (event as NavigationEnd).urlAfterRedirects,
+        );
+      });
+  }
 
   handleNavigate(path: string): void {
     this.router.navigateByUrl(path);

apps/prs/angular/src/app/app.routes.ts

@@ -81,6 +81,8 @@ import { FeatV2IconsComponent } from "../routes/features/featV2Icons/feat-v2-ico
 import { Feat3396Component } from "../routes/features/feat3396/feat3396.component";
 import { FeatV2CheckboxComponent } from "../routes/features/featV2Checkbox/featV2Checkbox.component";
 import { Feat3478Component } from "../routes/features/feat3478/feat3478.component";
+import { Feat2885Component } from "../routes/features/feat2885/feat2885.component";
+import { Feat2885NavigationTabsComponent } from "../routes/features/feat2885-navigation-tabs/feat2885-navigation-tabs.component";
 
 export const appRoutes: Route[] = [
   { path: "everything", component: EverythingComponent },
@@ -150,6 +152,8 @@ export const appRoutes: Route[] = [
   { path: "features/2722", component: Feat2722Component },
   { path: "features/2730", component: Feat2730Component },
   { path: "features/2829", component: Feat2829Component },
+  { path: "features/2885", component: Feat2885Component },
+  { path: "features/2885-navigation-tabs", component: Feat2885NavigationTabsComponent },
   { path: "features/3102", component: Feat3102Component },
   { path: "features/3137", component: Feat3137Component },
   { path: "features/3211", component: Feat3211Component },

apps/prs/angular/src/routes/features/feat2885-navigation-tabs/feat2885-navigation-tabs.component.html

@@ -0,0 +1,69 @@
+<h1>Feature #2885: Tabs navigation prop</h1>
+<p>
+  Showcases the new <code>navigation</code> prop on <code>goabx-tabs</code>.
+  When set to <code>"none"</code>, tabs act as a UI switcher without updating the browser URL hash.
+</p>
+
+<hr style="margin: 24px 0" />
+
+<h2>Test 1: Segmented + navigation="none"</h2>
+<p>Tabs switch content without changing the URL hash. Used inside notification panels.</p>
+<goabx-tabs variant="segmented" navigation="none" (_change)="onTabChange($event)">
+  <goab-tab heading="Unread">
+    <p>Unread notifications content</p>
+  </goab-tab>
+  <goab-tab heading="Urgent">
+    <p>Urgent notifications content</p>
+  </goab-tab>
+  <goab-tab heading="All">
+    <p>All notifications content</p>
+  </goab-tab>
+</goabx-tabs>
+
+<hr style="margin: 24px 0" />
+
+<h2>Test 2: Segmented + navigation="url" (default)</h2>
+<p>Default behavior: tabs update the browser URL hash when switched.</p>
+<goabx-tabs variant="segmented" (_change)="onTabChange($event)">
+  <goab-tab heading="Tab A">
+    <p>Tab A content with URL navigation</p>
+  </goab-tab>
+  <goab-tab heading="Tab B">
+    <p>Tab B content with URL navigation</p>
+  </goab-tab>
+  <goab-tab heading="Tab C">
+    <p>Tab C content with URL navigation</p>
+  </goab-tab>
+</goabx-tabs>
+
+<hr style="margin: 24px 0" />
+
+<h2>Test 3: Default (non-segmented) + navigation="none"</h2>
+<p>Standard tab style with URL navigation disabled.</p>
+<goabx-tabs navigation="none" (_change)="onTabChange($event)">
+  <goab-tab heading="Overview">
+    <p>Overview content</p>
+  </goab-tab>
+  <goab-tab heading="Details">
+    <p>Details content</p>
+  </goab-tab>
+  <goab-tab heading="History">
+    <p>History content</p>
+  </goab-tab>
+</goabx-tabs>
+
+<hr style="margin: 24px 0" />
+
+<h2>Test 4: Default (non-segmented) + navigation="url" (default)</h2>
+<p>Standard tab style with default URL navigation.</p>
+<goabx-tabs (_change)="onTabChange($event)">
+  <goab-tab heading="Section 1">
+    <p>Section 1 content with URL navigation</p>
+  </goab-tab>
+  <goab-tab heading="Section 2">
+    <p>Section 2 content with URL navigation</p>
+  </goab-tab>
+  <goab-tab heading="Section 3">
+    <p>Section 3 content with URL navigation</p>
+  </goab-tab>
+</goabx-tabs>

apps/prs/angular/src/routes/features/feat2885-navigation-tabs/feat2885-navigation-tabs.component.ts

@@ -0,0 +1,16 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
+import { GoabTab, GoabxTabs } from "@abgov/angular-components";
+
+@Component({
+  standalone: true,
+  selector: "abgov-feat2885-navigation-tabs",
+  templateUrl: "./feat2885-navigation-tabs.component.html",
+  imports: [GoabTab, GoabxTabs],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class Feat2885NavigationTabsComponent {
+  onTabChange(event: Event) {
+    const detail = (event as CustomEvent).detail;
+    console.log("Tab changed:", detail);
+  }
+}

apps/prs/angular/src/routes/features/feat2885/feat2885.component.html

@@ -0,0 +1,179 @@
+<div style="display: flex; height: 100vh">
+  <goabx-work-side-menu
+    heading="Workspace Demo"
+    url="/"
+    userName="John Doe"
+    userSecondaryText="john.doe@gov.ab.ca"
+    [open]="menuOpen"
+    (onToggle)="toggleMenu()"
+    [primaryContent]="primaryTpl"
+    [secondaryContent]="secondaryTpl"
+    [accountContent]="accountTpl"
+  />
+
+  <ng-template #primaryTpl>
+    <goabx-work-side-menu-item
+      icon="grid"
+      label="Dashboard"
+      url="/features/2885"
+    />
+    <goabx-work-side-menu-item
+      icon="search"
+      label="Search"
+      url="/features/2885/search"
+    />
+    <goabx-work-side-menu-item
+      icon="list"
+      label="Cases"
+      url="/features/2885/cases"
+      badge="5"
+      type="success"
+    />
+    <goabx-work-side-menu-item
+      icon="document"
+      label="Documents"
+      url="/features/2885/documents"
+      [divider]="true"
+    />
+    <goabx-work-side-menu-item
+      icon="alert-circle"
+      label="Alerts"
+      badge="3"
+      type="emergency"
+      [popoverContent]="alertsTpl"
+    />
+  </ng-template>
+
+  <ng-template #alertsTpl>
+    <div style="padding: 1rem; width: 280px">
+      <h3 style="margin: 0 0 0.5rem 0; font-size: 1rem">
+        Custom Popover Content
+      </h3>
+      <p style="margin: 0 0 1rem 0; color: #666; font-size: 0.875rem">
+        This demonstrates that <code>popoverContent</code> accepts any Angular
+        template, not just
+        <code>GoabxWorkSideNotificationPanel</code>.
+      </p>
+      <ul style="margin: 0; padding-left: 1.25rem; font-size: 0.875rem">
+        <li>Custom alerts</li>
+        <li>Quick actions</li>
+        <li>Mini dashboards</li>
+        <li>Any custom UI</li>
+      </ul>
+      <div style="margin-top: 1rem; text-align: right">
+        <goa-button type="tertiary" size="compact" action="close">
+          Close
+        </goa-button>
+      </div>
+    </div>
+  </ng-template>
+
+  <ng-template #secondaryTpl>
+    <goabx-work-side-menu-item
+      icon="notifications"
+      label="Notifications"
+      badge="12"
+      type="success"
+      [popoverContent]="notificationsTpl"
+    />
+    <goabx-work-side-menu-item
+      icon="help-circle"
+      label="Help"
+      url="/features/2885/help"
+    />
+  </ng-template>
+
+  <ng-template #notificationsTpl>
+    <goabx-work-side-notification-panel
+      heading="Notifications"
+      activeTab="unread"
+      (onMarkAllRead)="handleMarkAllRead()"
+      (onViewAll)="handleViewAll()"
+    >
+      <goabx-work-side-notification-item
+        *ngFor="let notif of notifications; trackBy: trackById"
+        [title]="notif.title"
+        [description]="notif.description"
+        [timestamp]="notif.timestamp"
+        [type]="notif.type"
+        [readStatus]="notif.readStatus"
+        [priority]="notif.priority"
+        (onClick)="handleNotificationClick(notif.id)"
+      />
+    </goabx-work-side-notification-panel>
+  </ng-template>
+
+  <ng-template #accountTpl>
+    <goabx-work-side-menu-item
+      icon="settings"
+      label="Settings"
+      url="/features/2885/settings"
+    />
+    <goabx-work-side-menu-item
+      icon="log-out"
+      label="Log out"
+      url="/logout"
+    />
+  </ng-template>
+
+  <main
+    style="
+      flex: 1;
+      padding: 2rem;
+      background-color: #f3f3f3;
+      overflow: auto;
+    "
+  >
+    <div class="mobile-menu-toggle">
+      <goab-icon-button
+        icon="menu"
+        variant="dark"
+        (onClick)="openMenu()"
+      />
+    </div>
+
+    <h1>Feature #2885: Work Side Menu with Notification Popover</h1>
+    <p>
+      This demonstrates the <code>GoabxWorkSideMenu</code> with the new
+      notification popover feature.
+    </p>
+
+    <h2>New Features</h2>
+    <ul>
+      <li>
+        <strong>Notification Popover</strong> - Click the "Notifications" menu
+        item to see the popover panel
+      </li>
+      <li>
+        <strong>Custom Popover Content</strong> - Click the "Alerts" menu item
+        to see a custom div, demonstrating that <code>popoverContent</code>
+        accepts any Angular template
+      </li>
+      <li>
+        <strong>GoabxWorkSideNotificationPanel</strong> - Panel with tabs
+        (Unread, Urgent, All)
+      </li>
+      <li>
+        <strong>GoabxWorkSideNotificationItem</strong> - Individual notification
+        cards with:
+        <ul>
+          <li>Title and description</li>
+          <li>Smart timestamp formatting (e.g., "5 min ago", "2 h ago")</li>
+          <li>Type badges (info, success, warning, critical)</li>
+          <li>Read/unread status indicator (green dot)</li>
+          <li>Urgent priority styling</li>
+        </ul>
+      </li>
+      <li>
+        <strong>Footer actions</strong> - "View all" and "Mark all as read"
+        buttons
+      </li>
+    </ul>
+
+    <h2>Console Output</h2>
+    <p>
+      Open the browser console to see events when clicking notifications or
+      footer actions.
+    </p>
+  </main>
+</div>