feat(header): implementa estrutura básica para componente de header

angular.json

@@ -33,7 +33,9 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -106,6 +108,5 @@
         }
       }
     }
-  },
-  "defaultProject": "starter-angular"
+  }
 }

package.json

@@ -10,23 +10,23 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~13.1.0",
-    "@angular/common": "~13.1.0",
-    "@angular/compiler": "~13.1.0",
-    "@angular/core": "~13.1.0",
-    "@angular/forms": "~13.1.0",
-    "@angular/platform-browser": "~13.1.0",
-    "@angular/platform-browser-dynamic": "~13.1.0",
-    "@angular/router": "~13.1.0",
+    "@angular/animations": "^14.0.1",
+    "@angular/common": "^14.0.1",
+    "@angular/compiler": "^14.0.1",
+    "@angular/core": "^14.0.1",
+    "@angular/forms": "^14.0.1",
+    "@angular/platform-browser": "^14.0.1",
+    "@angular/platform-browser-dynamic": "^14.0.1",
+    "@angular/router": "^14.0.1",
     "bootstrap": "^5.1.3",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.1.4",
-    "@angular/cli": "~13.1.4",
-    "@angular/compiler-cli": "~13.1.0",
+    "@angular-devkit/build-angular": "^14.0.0",
+    "@angular/cli": "^14.0.0",
+    "@angular/compiler-cli": "^14.0.1",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
     "jasmine-core": "~3.10.0",
@@ -35,6 +35,6 @@
     "karma-coverage": "~2.1.0",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "typescript": "~4.5.2"
+    "typescript": "~4.7.3"
   }
 }

src/app/components/header/header.component.html

@@ -1 +1,51 @@
-<p>header works!</p>
+<header class="header">
+  <nav class="navbar navbar-expand-md">
+    <div class="container">
+      <a routerLink="/"
+         class="navbar-brand">
+        <img src="assets/svg/fmd-logo.svg"
+             class="img-fluid"
+             alt="Logo F&MD"
+             title="F&MD"
+             loading="lazy"
+             width="88"
+             height="26">
+      </a>
+      <div class="offcanvas offcanvas-end align-items-md-end"
+           tabindex="-1"
+           id="offcanvasNavbar"
+           aria-labelledby="offcanvasNavbarLabel">
+        <div class="offcanvas-body">
+          <div class="offcanvas-header justify-content-end">
+            <button class="btn-close"
+                    type="button"
+                    title="Menu"
+                    data-bs-dismiss="offcanvas"
+                    aria-label="Fechar">
+              <span class="navbar-toggler-icon"></span>
+            </button>
+          </div>
+          <ul class="navbar-nav">
+            <ng-container *ngFor="let headerLink of headerLinks">
+              <li class="nav-item">
+                <a [routerLink]="headerLink.url"
+                   class="nav-link">
+                  {{ headerLink.description }}
+                </a>
+              </li>
+            </ng-container>
+          </ul>
+        </div>
+      </div>
+      <button class="navbar-toggler"
+              type="button"
+              title="Menu"
+              data-bs-toggle="offcanvas"
+              data-bs-target="#offcanvasNavbar"
+              aria-controls="offcanvasNavbar"
+              aria-label="Menu">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+    </div>
+  </nav>
+</header>

src/app/components/header/header.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Link } from '../../models/link';
 
 @Component({
   selector: 'app-header',
@@ -7,6 +8,21 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HeaderComponent implements OnInit {
 
+  headerLinks: Link[] = [
+    {
+      url: '',
+      description: 'Quem Somos',
+    },
+    {
+      url: '',
+      description: 'Produtos',
+    },
+    {
+      url: '',
+      description: 'Contato',
+    },
+  ]
+
   constructor() { }
 
   ngOnInit(): void {

src/app/components/header/header.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {HeaderComponent} from "./header.component";
+import { RouterModule } from '@angular/router';
 
 
 
@@ -9,7 +10,8 @@ import {HeaderComponent} from "./header.component";
     HeaderComponent,
   ],
   imports: [
-    CommonModule
+    CommonModule,
+    RouterModule,
   ],
   exports: [
     HeaderComponent,

src/app/models/link.ts

@@ -0,0 +1,5 @@
+export interface Link {
+  url: string;
+  description: string;
+  isTargetLink?: boolean;
+}

src/assets/sass/components/_navbar.scss

@@ -0,0 +1,110 @@
+$navbar-brand-width: 6rem; // Width when header on page top
+$navbar-brand-height: 3.5rem; // Height when header on page top
+$navbar-brand-is-fixed-width: 8.5rem; // Width when header is fixed on screen
+$navbar-brand-is-fixed-height: 2.5rem; // Height when header is fixed on screen
+
+$navbar-toggler-size: 2.5rem;
+$navbar-toggler-bar-width: 1.5rem;
+$navbar-toggler-bar-height: 3px;
+
+.navbar {
+	transition: $transition-base;
+
+	&-brand {
+		position: relative;
+
+		svg,
+		img {
+			max-width: calc(100vw - 6rem);
+			width: $navbar-brand-width;
+			height: $navbar-brand-height;
+			transition: width .25s, height .25s;
+		}
+	}
+
+	&-toggler {
+		width: $navbar-toggler-size;
+		height: $navbar-toggler-size;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin: 0;
+		padding: 0;
+		color: inherit;
+		border: 0 !important;
+		box-shadow: none !important;
+		transition: background .25s;
+
+		&:before,
+		span,
+		&:after {
+			content: '';
+			position: absolute;
+			top: 50%;
+			width: $navbar-toggler-bar-width;
+			height: $navbar-toggler-bar-height;
+			display: block;
+			background: currentColor;
+			border-radius: $border-radius;
+			transition: $transition-base;
+			transform: translate(0, -50%);
+		}
+
+		&:before {
+			margin-top: -0.5rem;
+		}
+
+		&:after {
+			margin-top: 0.5rem;
+		}
+	}
+
+	//.offcanvas {
+	//	&,
+	//	&-backdrop {
+	//		top: var(--header-height);
+	//		height: calc(100vh - var(--header-height));
+	//	}
+	//
+	//	&.show ~ .navbar-toggler {
+	//		&:before {
+	//			margin-top: 0;
+	//			transform: translate(0, -50%) rotate(45deg);
+	//			transform-origin: center;
+	//		}
+	//
+	//		span  {
+	//			transform-origin: center;
+	//			transform: translate(0, -50%) scaleX(0);
+	//		}
+	//
+	//		&:after {
+	//			margin-top: 0;
+	//			transform: translate(0, -50%) rotate(-45deg);
+	//			transform-origin: center;
+	//		}
+	//	}
+	//}
+
+	.dropdown-menu {
+		transition: $transition-base;
+	}
+
+	.fmd-header-is-hidden & {
+		.dropdown-menu {
+			opacity: 0;
+			visibility: hidden;
+		}
+	}
+
+	.fmd-header-is-fixed & {
+		padding-top: $navbar-padding-y * .5;
+		padding-bottom: $navbar-padding-y * .5;
+
+		.navbar-brand svg,
+		.navbar-brand img {
+			width: $navbar-brand-is-fixed-width;
+			height: $navbar-brand-is-fixed-height;
+		}
+	}
+}

src/assets/sass/frontend.scss

@@ -40,17 +40,9 @@
 // 5. Add additional custom code here
 
 // 5.1 Common (global) styles
-@import "frontend/reboot";
-@import "frontend/typography";
-@import "components/animations";
 @import "components/breadcrumb";
-@import "components/card";
 @import "components/floating-labels";
-@import "components/fmd-header";
 @import "components/icons";
 @import "components/images";
-@import "components/modal";
 @import "components/structure";
-@import "components/videos";
-@import "styles";