fix(sidebar layout): going back to using layout component to avoid issues with primeng sidebar

Author: esthersoftwaredev

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

@@ -1,11 +1,3 @@
-.content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 74vh;
-  width: 100%;
-}
-
 .scroll-btn {
   position: fixed;
   bottom: 1rem;

src/app/app.routes.ts

@@ -1,23 +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 { 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: PostsComponent
-  },
-  {
-    path: 'series/:slug',
-    component: SeriesComponent
-  },
-  {
-    path: 'post/:postSlug',
-    component: PostDetailsComponent
-  },
-  {
-    path: '**',
-    redirectTo: ''
-  }
+	{
+		path: "",
+		component: LayoutComponent,
+		children: [
+			{
+				path: "",
+				component: PostsComponent,
+			},
+      {
+        path: "series/:slug",
+        component: SeriesComponent,
+      },
+		],
+	},
+	{
+		path: "post/:postSlug",
+		component: PostDetailsComponent,
+	},
+	{
+		path: "**",
+		redirectTo: "",
+	},
 ];

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>

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 />

src/app/components/layout/layout.component.scss

@@ -0,0 +1,7 @@
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 74vh;
+  width: 100%;
+}

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 {
+
+}

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>

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;