added header

9 달 전 · ce01a52e0f
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -12,6 +12,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NumberOnlyDirective } from './_helper/number-only.directive';
 import { VeriableFormComponent } from './pages/veriable-form/veriable-form.component';
 import { HeaderComponent } from './pages/header/header.component';

@NgModule({
  declarations: [
@@ -20,6 +21,7 @@ import { VeriableFormComponent } from './pages/veriable-form/veriable-form.compo
    LoginComponent,
    NumberOnlyDirective,
    VeriableFormComponent,
    HeaderComponent,

  ],
  imports: [
--- a/src/app/pages/header/header.component.html
+++ b/src/app/pages/header/header.component.html
@@ -0,0 +1,24 @@
 <header class=" bg-light">
    <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="#"> <img src="https://enianalytics.com/images/eni-tech-logo.png" alt="lohi"> </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">form 1 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">form 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">form 3</a>
            </li>

          </ul>
        </div>
      </nav>
    </div>
 </header>
--- a/src/app/pages/header/header.component.sass
+++ b/src/app/pages/header/header.component.sass
@@ -0,0 +1,20 @@
 header
    border-bottom: 1px solid #cccccc3b
    box-shadow: 0 0 8px #c2c2c252

 .bg-light
    background: #fff!important

 nav img
    width: 100px

 ul li a
    font-weight: 600
    font-family: 'Inter', sans-serif
    font-size: 14px
    text-transform: uppercase
    color: #444444

 ul li.active a, ul li:hover  a
    color:#e76b20

--- a/src/app/pages/header/header.component.spec.ts
+++ b/src/app/pages/header/header.component.spec.ts
@@ -0,0 +1,25 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { HeaderComponent } from './header.component';

 describe('HeaderComponent', () => {
  let component: HeaderComponent;
  let fixture: ComponentFixture<HeaderComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ HeaderComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
 });
--- a/src/app/pages/header/header.component.ts
+++ b/src/app/pages/header/header.component.ts
@@ -0,0 +1,15 @@
 import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.sass']
 })
 export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

 }
--- a/src/app/pages/veriable-form/veriable-form.component.html
+++ b/src/app/pages/veriable-form/veriable-form.component.html
@@ -1,3 +1,4 @@
 <app-header></app-header>
 <div class="container">
  <div class="row">
    <div class="col-md-12">
--- a/src/index.html
+++ b/src/index.html
@@ -13,5 +13,7 @@
 </head>
 <body class="mat-typography">
  <app-root></app-root>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>