Going back to using Layout Component due to issues with Sidebar

CONTRIBUTING.md

@@ -72,11 +72,11 @@ All app versions maintain consistent file structures, functionalities, and featu
 
 Once an issue has been resolved in one app version, the same implementation must be extended to all other versions, unless a superior alternative is proposed and accepted.
 
-Any new implementation suggestion must be discussed to verify it's suitable for adoption across all app versions. For a good visual representation use the [Issue Tracker](https://anguhashblog.com/issue-tracker)
+Any new implementation suggestion must be discussed to verify it's suitable for adoption across all app versions.
 
 ## Before you start working on an Issue
 
-Before commencing work on any issue, it is essential to confirm that it has not already been addressed. Utilize the [Issue Tracker](https://anguhashblog.com/issue-tracker) tool to check for existing implementations and their corresponding app versions. If the chosen issue has already been resolved in a different app version, consult the [Issue Tracker](https://anguhashblog.com/issue-tracker) to review the existing implementation and replicate it accordingly.
+Before commencing work on any issue, it is essential to confirm that it has not already been addressed. Please check for existing implementations and if the chosen issue has already been resolved in a different app version, review the existing implementation and replicate it accordingly.
 
 Even if the issue is labeled as not implemented, it remains your responsibility to examine the app's codebase and confirm the absence of the issue.
 

angular-primeng-app/src/app/app.component.html → src/app/app.component.html

@@ -1,8 +1,4 @@
-<app-header />
-<div class="content">
-  <router-outlet />
-</div>
-<app-footer />
+<router-outlet />
 
 @if (showScrollButton) {
 <p-button class="scroll-btn" (click)="scrollToTop()" icon="pi pi-angle-up" [rounded]="true" size="small"></p-button>

src/app/app.component.scss

@@ -0,0 +1,6 @@
+.scroll-btn {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+}
+

src/app/app.routes.ts

@@ -0,0 +1,30 @@
+import { Routes } from "@angular/router";
+import { PostDetailsComponent } from "./components/post-details/post-details.component";
+import { PostsComponent } from "./components/posts/posts.component";
+import { SeriesComponent } from "./components/series/series.component";
+import { LayoutComponent } from "./components/layout/layout.component";
+
+export const routes: Routes = [
+	{
+		path: "",
+		component: LayoutComponent,
+		children: [
+			{
+				path: "",
+				component: PostsComponent,
+			},
+      {
+        path: "series/:slug",
+        component: SeriesComponent,
+      },
+		],
+	},
+	{
+		path: "post/:postSlug",
+		component: PostDetailsComponent,
+	},
+	{
+		path: "**",
+		redirectTo: "",
+	},
+];

angular-primeng-app/src/app/components/header/header.component.html → src/app/components/header/header.component.html

@@ -2,28 +2,21 @@
   <div class="toolbar-row first">
     <div class="p-toolbar-group-start">
       <a routerLink="/" class="blog-title">
-        @if (showMainHeader) {
         <img class="logo-image" src="{{blogImage}}" alt="logo" />
-        } @else {
-        <app-sidenav></app-sidenav>
-        }
         <h1>{{blogName}}</h1>
       </a>
     </div>
 
     <div class="p-toolbar-group-end">
       <div class="controls">
-        @if (showMainHeader) {
         <app-search-dialog [blogId]="blogId"></app-search-dialog>
         <app-settings-dialog></app-settings-dialog>
-        }
         <p-inputSwitch [(ngModel)]="checked" (click)="onThemeChange(checked ? 'dark' : 'light')"
           id="theme-switch"></p-inputSwitch>
       </div>
     </div>
   </div>
 
-  @if (showMainHeader) {
   <div class="toolbar-row second">
     <div class="p-toolbar-group-start">
       <div class="social">
@@ -58,6 +51,5 @@ <h1>{{blogName}}</h1>
       }
     </div>
   </div>
-  }
 
 </p-toolbar>

angular-primeng-app/src/app/components/header/header.component.ts → src/app/components/header/header.component.ts

@@ -15,14 +15,12 @@ import { InputSwitchModule } from "primeng/inputswitch";
 import { DialogModule } from "primeng/dialog";
 import { SettingsDialogComponent } from "../../partials/settings-dialog/settings-dialog.component";
 import { FollowDialogComponent } from "../../partials/follow-dialog/follow-dialog.component";
-import { SidenavComponent } from "../sidenav/sidenav.component";
 
 @Component({
 	selector: "app-header",
 	standalone: true,
 	imports: [
 		AsyncPipe,
-    SidenavComponent,
 		SearchDialogComponent,
 		SettingsDialogComponent,
 		FollowDialogComponent,
@@ -38,7 +36,6 @@ import { SidenavComponent } from "../sidenav/sidenav.component";
 	styleUrl: "./header.component.scss",
 })
 export class HeaderComponent implements OnInit, OnDestroy {
-  showMainHeader: boolean = true;
 	blogURL!: string;
 	blogInfo!: BlogInfo;
 	blogId: string = "";
@@ -85,12 +82,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
 		this.blogService.getSeriesList(this.blogURL).subscribe((data) => {
 			this.seriesList = data;
 		});
-		this.router.events.subscribe((event) => {
-			if (event instanceof NavigationEnd) {
-				this.showMainHeader =
-					!this.route.snapshot.firstChild?.paramMap.has("postSlug");
-			}
-		});
 	}
 
 	onThemeChange(theme: string): void {

src/app/components/layout/layout.component.html

@@ -0,0 +1,5 @@
+<app-header />
+<div class="content">
+  <router-outlet />
+</div>
+<app-footer />

angular-primeng-app/src/app/app.component.scss → src/app/components/layout/layout.component.scss

@@ -5,10 +5,3 @@
   min-height: 74vh;
   width: 100%;
 }
-
-.scroll-btn {
-  position: fixed;
-  bottom: 1rem;
-  right: 1rem;
-}
-

src/app/components/layout/layout.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LayoutComponent } from './layout.component';
+
+describe('LayoutComponent', () => {
+  let component: LayoutComponent;
+  let fixture: ComponentFixture<LayoutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LayoutComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/layout/layout.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { HeaderComponent } from '../header/header.component';
+import { FooterComponent } from '../footer/footer.component';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-layout',
+  standalone: true,
+  imports: [HeaderComponent, FooterComponent, RouterOutlet],
+  templateUrl: './layout.component.html',
+  styleUrl: './layout.component.scss'
+})
+export class LayoutComponent {
+
+}

angular-primeng-app/src/app/components/post-details/post-details.component.html → src/app/components/post-details/post-details.component.html

@@ -1,4 +1,18 @@
 <div class="post-details-page">
+  <p-toolbar>
+    <div class="p-toolbar-group-start">
+      <app-sidenav></app-sidenav>
+      <a routerLink="/" class="logo">
+        <h1>{{blogName}}</h1>
+      </a>
+    </div>
+    <div class="p-toolbar-group-end">
+      <app-search-dialog [blogId]="blogId"></app-search-dialog>
+      <p-inputSwitch [(ngModel)]="checked" (click)="onThemeChange(checked ? 'dark' : 'light')"
+        id="theme-switch"></p-inputSwitch>
+    </div>
+  </p-toolbar>
+
   @if (post$ | async; as post) {
     <article>
       <h1 class="title">{{ post.title }}</h1>
@@ -34,4 +48,5 @@ <h1 class="title">{{ post.title }}</h1>
       <div class="content" [innerHTML]="post.content.html | sanitizerHtml" youtubeVideoEmbed></div>
     </article>
   }
+  <app-footer></app-footer>
 </div>

angular-primeng-app/src/app/components/post-details/post-details.component.scss → src/app/components/post-details/post-details.component.scss

@@ -1,4 +1,18 @@
 .post-details-page {
+  p-toolbar {
+    .p-toolbar-group-start {
+      h1 {
+        font-size: 1.3rem;
+        font-weight: 500;
+        margin: 0;
+      }
+    }
+
+    .p-toolbar-group-end {
+      gap: 0.625rem;
+    }
+  }
+
   article {
     margin: 0 auto;
     max-width: 50vw;