Improving header navigation link styles

src/app/app-routing.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { NotFoundComponent } from 'src/app/global/not-found/not-found.component';
 import { ContainerComponent } from './global/components/container/container.component';
 
 const routes: Routes = [
@@ -31,9 +32,10 @@ const routes: Routes = [
           import('./pages/article-detail/article-detail.module').then(
             (m) => m.ArticleDetailModule
           ),
-      }
+      },
     ],
   },
+  { path: '**', component: NotFoundComponent }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -1,17 +1,18 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './global/components/header/header.component';
 import { ContainerComponent } from './global/components/container/container.component';
 import { HttpClientModule } from '@angular/common/http';
+import { NotFoundComponent } from 'src/app/global/not-found/not-found.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
     ContainerComponent,
+    NotFoundComponent
   ],
   imports: [
     BrowserModule,

src/app/constants/app.constants.ts

@@ -0,0 +1 @@
+export const TABS = ['feed', 'week', 'month', 'year', 'infinity', 'latest'];

src/app/global/not-found/not-found.component.html

@@ -0,0 +1,6 @@
+<div class="not-found">
+  <h1>The Page you are looking for was not found</h1>
+  <a class="go-home" routerLink="/">
+    Return to Home Page
+  </a>
+</div>

src/app/global/not-found/not-found.component.scss

@@ -0,0 +1,15 @@
+.not-found {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.btn-primary {
+  background-color: aqua;
+}
+
+.go-home {
+  font-size: 1.5rem;
+}

src/app/global/not-found/not-found.component.spec.ts

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

src/app/global/not-found/not-found.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-not-found',
+  templateUrl: './not-found.component.html',
+  styleUrls: ['./not-found.component.scss'],
+})
+export class NotFoundComponent {
+  constructor() {}
+}

src/app/pages/home/articles/article-header/article-header.component.html

@@ -1,20 +1,18 @@
-<header class="flex justify-between">
-    <h1 class="subtitle">Posts</h1>
 
-    <nav class="flex" aria-label="View posts by">
-        <ul class="tabs-list flex">
-            <li *ngFor="let tab of tabs">
-                <a [class.active]="tab === selectedTab" class="tab-item pointer">{{tab|titlecase}}</a>
-            </li>
-        </ul>
+<header class="header flex justify-between align-center">
+  <div class="title-post">
+    <h1 class="subtitle">Posts</h1>
+  </div>
+  <div class="navbar">
+    <nav class="nav-bar" aria-label="View posts by" role="navigation">
+      <ul class="tabs-list flex" role="list">
+        <li class="tab-list-item" *ngFor="let tab of tabs" role="listitem" [class.active-tab]="tab === selectedTab">
+          <a class="tab-item pointer" role="link">
+            {{ tab | titlecase }}
+          </a>
+        </li>
+        <span class="focus-border"></span>
+      </ul>
     </nav>
-
-    <!-- <select class="crayons-select s:hidden ml-2 s:ml-auto w-auto" id="feed-filter-select" aria-label="feed-filter-select">
-      <option value="/" selected="">Feed</option>
-      <option value="/top/week">Week</option>
-      <option value="/top/month">Month</option>
-      <option value="/top/year">Year</option>
-      <option value="/top/infinity">Infinity</option>
-      <option value="/latest">Latest</option>
-    </select> -->
-</header>
+  </div>
+</header>

src/app/pages/home/articles/article-header/article-header.component.scss

@@ -3,29 +3,20 @@
   padding: 0;
 }
 
-.tab-item {
+.tab-list-item {
   padding: 0.5rem;
-  margin: 0 0.25rem;
-  flex-direction: column;
   font-size: 1rem;
-  transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
-border-radius: 5px;
-   &.active {
-    font-weight: 500;
-    color: #08090a;
-  }
-  &:before{
-    content: attr(data-text);
-    height: 0;
-    visibility: hidden;
-    overflow: hidden;
-    user-select: none;
-    pointer-events: none;
+  border-radius: 5px;
+  margin: 0 0.25rem;
+
+  &:hover {
+    background: #3b49df1a;
+    color: #3b49df;
   }
-  &:after{
-      position: absolute;
-      content: "";
-
 
+  &.active-tab {
+    border-bottom: 3px solid #3b49df;
+    font-weight: 500;
+    color: #08090a;
   }
 }

src/app/pages/home/articles/article-header/article-header.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { TABS } from 'src/app/constants/app.constants';
 
 @Component({
   selector: 'app-article-header',
@@ -7,5 +8,6 @@ import { Component } from '@angular/core';
 })
 export class ArticleHeaderComponent {
   selectedTab = 'feed';
-  tabs = ['feed', 'week', 'month', 'year', 'infinity', 'latest'];
+  tabs = TABS;
+  constructor() {}
 }