make header sticky and refactor

src/app/header/header.component.html

@@ -1,17 +1,8 @@
-<!-- <header>
-  <span>Raghu Chagarlamudi</span>
-  <span class="spacer"></span>
-  <nav>
-    <button mat-flat-button>Basic</button>
-    <button mat-raised-button>Basic</button>
-  </nav>
-</header> -->
 <header class="header">
   <span class="header__avatar" mat-card-avatar></span>
   <span class="header__logo">Raghu Ch</span>
   <span class="header__spacer"></span>
   <nav class="header__nav">
-    <button class="header__button header__button--flat" mat-flat-button>Basic</button>
+    <mat-icon aria-hidden="false" aria-label="menu icon" fontIcon="menu"></mat-icon>
-    <button class="header__button header__button--raised" mat-raised-button>Basic</button>
   </nav>
 </header>

src/app/header/header.component.scss

@@ -1,21 +1,9 @@
-// :host {
+:host {
-//   color: var(--mat-sys-primary);
+  position: fixed;
-//   background-color: var(--mat-sys-surface);
+  top: 0;
-//   padding: 8px 16px;
+  right: 0;
-//   //   color: var(--mat-sys-on-primary);
+  left: 0;
-//   //   background-color: var(--mat-sys-primary);
+}
-// }
-
-// header {
-//   font-weight: 700;
-//   font-size: 14px;
-//   letter-spacing: 1px;
-//   text-transform: uppercase;
-// }
-
-// .spacer {
-//   flex-grow: 1;
-// }
 
 .header {
   color: var(--mat-sys-on-primary);
@@ -25,7 +13,7 @@
   align-items: center;
 
   &__avatar {
-    background-image: url('../../assests/images/rc-header-logo.jpeg');
+    background-image: url("../../assests/images/rc-header-logo.jpeg");
     background-size: cover;
     height: 40px;
     width: 40px;
@@ -46,7 +34,6 @@
 
   .header__nav {
     .header__button {
-
       &--flat {
         &:hover {
           opacity: 1.8; /* Apply opacity change on hover */

src/app/header/header.component.ts

@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
 
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   standalone: true,
   selector: 'app-header',
-  imports: [MatButtonModule, MatCardModule],
+  imports: [MatButtonModule, MatIconModule],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })