make header sticky and refactor

src/app/header/header.component.scss

@@ -1,21 +1,9 @@
-// :host {
-//   color: var(--mat-sys-primary);
-//   background-color: var(--mat-sys-surface);
-//   padding: 8px 16px;
-//   //   color: var(--mat-sys-on-primary);
-//   //   background-color: var(--mat-sys-primary);
-// }
-
-// header {
-//   font-weight: 700;
-//   font-size: 14px;
-//   letter-spacing: 1px;
-//   text-transform: uppercase;
-// }
-
-// .spacer {
-//   flex-grow: 1;
-// }
+:host {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+}
 
 .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 */