first commit

src/app/components/components.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { RouterModule } from "@angular/router";
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+
+import { FooterComponent } from "./footer/footer.component";
+import { NavbarComponent } from "./navbar/navbar.component";
+import { SidebarComponent } from "./sidebar/sidebar.component";
+
+@NgModule({
+  imports: [CommonModule, RouterModule, NgbModule],
+  declarations: [FooterComponent, NavbarComponent, SidebarComponent],
+  exports: [FooterComponent, NavbarComponent, SidebarComponent]
+})
+export class ComponentsModule {}

src/app/components/footer/footer.component.html

@@ -0,0 +1,28 @@
+<footer class="footer">
+  <div class="container-fluid">
+    <ul class="nav">
+      <!-- <li class="nav-item">
+        <a class="nav-link" href="https://www.creative-tim.com?ref=bda-footer">
+          Creative Tim
+        </a>
+      </li> -->
+      <li class="nav-item">
+        <a
+          class="nav-link"
+          href="https://talenttic.com"
+        >
+          About Us
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="https://blog.talenttic.com">
+          Blog
+        </a>
+      </li>
+    </ul>
+    <div class="copyright">
+      &copy; {{ test | date : "yyyy" }} Powered by
+      <a href="https://talenttic.com" target="_blank"> Talenttic Tech Hub</a>
+    </div>
+  </div>
+</footer>

src/app/components/footer/footer.component.spec.ts

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

src/app/components/footer/footer.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-footer",
+  templateUrl: "./footer.component.html",
+  styleUrls: ["./footer.component.css"]
+})
+export class FooterComponent implements OnInit {
+  test: Date = new Date();
+
+  constructor() {}
+
+  ngOnInit() {}
+}

src/app/components/navbar/navbar.component.html

@@ -0,0 +1,137 @@
+<nav class=" navbar navbar-expand-lg navbar-absolute navbar-transparent">
+  <div class=" container-fluid">
+    <div class=" navbar-wrapper">
+      <div class=" navbar-toggle d-inline">
+        <button class=" navbar-toggler" type="button" (click)="sidebarToggle()">
+          <span class=" navbar-toggler-bar bar1"> </span>
+          <span class=" navbar-toggler-bar bar2"> </span>
+          <span class=" navbar-toggler-bar bar3"> </span>
+        </button>
+      </div>
+      <a class=" navbar-brand" href="javascript:void(0)"> {{ getTitle() }} </a>
+    </div>
+    <button
+      aria-label="Toggle navigation"
+      class=" navbar-toggler"
+      (click)="collapse()"
+      [attr.aria-expanded]="!isCollapsed"
+      aria-controls="collapseExample"
+      id="navigation"
+      type="button"
+    >
+      <span class=" navbar-toggler-bar navbar-kebab"> </span>
+      <span class=" navbar-toggler-bar navbar-kebab"> </span>
+      <span class=" navbar-toggler-bar navbar-kebab"> </span>
+    </button>
+    <div class=" navbar-collapse" [ngbCollapse]="isCollapsed" id="navigation">
+      <ul class=" navbar-nav ml-auto">
+        <li class=" search-bar input-group">
+          <button
+            class=" btn btn-link"
+            data-target="#searchModal"
+            data-toggle="modal"
+            (click)="open(content)"
+            id="search-button"
+          >
+            <i class=" tim-icons icon-zoom-split"> </i>
+            <span class=" d-lg-none d-md-block"> Search </span>
+          </button>
+        </li>
+        <li class=" nav-item" ngbDropdown>
+          <a
+            class=" nav-link"
+            data-toggle="dropdown"
+            href="javascript:void(0)"
+            ngbDropdownToggle
+          >
+            <div class=" notification d-none d-lg-block d-xl-block"></div>
+            <i class=" tim-icons icon-sound-wave"> </i>
+            <p class=" d-lg-none">Notifications</p>
+          </a>
+          <ul class=" dropdown-menu-right dropdown-navbar" ngbDropdownMenu>
+            <li class=" nav-link">
+              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
+                Mike John responded to your email
+              </a>
+            </li>
+            <li class=" nav-link">
+              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
+                You have 5 more tasks
+              </a>
+            </li>
+            <li class=" nav-link">
+              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
+                Your friend Michael is in town
+              </a>
+            </li>
+            <li class=" nav-link">
+              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
+                Another notification
+              </a>
+            </li>
+            <li class=" nav-link">
+              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
+                Another one
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class=" nav-item" ngbDropdown>
+          <a
+            class=" nav-link"
+            data-toggle="dropdown"
+            href="javascript:void(0)"
+            ngbDropdownToggle
+          >
+            <div class=" photo">
+              <img alt="Profile Photo" src="assets/img/anime3.png" />
+            </div>
+            <b class=" caret d-none d-lg-block d-xl-block"> </b>
+            <p class=" d-lg-none">Log out</p>
+          </a>
+          <ul class=" dropdown-navbar" ngbDropdownMenu>
+            <li class=" nav-link">
+              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
+                Profile
+              </a>
+            </li>
+            <li class=" nav-link">
+              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
+                Settings
+              </a>
+            </li>
+            <li class=" dropdown-divider"></li>
+            <li class=" nav-link">
+              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
+                Log out
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class=" separator d-lg-none"></li>
+      </ul>
+    </div>
+  </div>
+</nav>
+
+<ng-template #content let-modal>
+  <div class=" modal-header">
+    <input
+      class=" form-control"
+      id="inlineFormInputGroup"
+      placeholder="SEARCH"
+      type="text"
+    />
+
+    <button
+      aria-label="Close"
+      class=" close"
+      data-dismiss="modal"
+      type="button"
+      (click)="modal.dismiss('Cross click')"
+    >
+      <i class=" tim-icons icon-simple-remove"> </i>
+    </button>
+  </div>
+
+</ng-template>

src/app/components/navbar/navbar.component.spec.ts

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

src/app/components/navbar/navbar.component.ts

@@ -0,0 +1,196 @@
+import { Component, OnInit, ElementRef, OnDestroy } from "@angular/core";
+import { ROUTES } from "../sidebar/sidebar.component";
+import { Location } from "@angular/common";
+import { Router } from "@angular/router";
+import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: "app-navbar",
+  templateUrl: "./navbar.component.html",
+  styleUrls: ["./navbar.component.css"]
+})
+export class NavbarComponent implements OnInit, OnDestroy {
+  private listTitles: any[];
+  location: Location;
+  mobile_menu_visible: any = 0;
+  private toggleButton: any;
+  private sidebarVisible: boolean;
+
+  public isCollapsed = true;
+
+  closeResult: string;
+
+  constructor(
+    location: Location,
+    private element: ElementRef,
+    private router: Router,
+    private modalService: NgbModal
+  ) {
+    this.location = location;
+    this.sidebarVisible = false;
+  }
+  // function that adds color white/transparent to the navbar on resize (this is for the collapse)
+   updateColor = () => {
+   var navbar = document.getElementsByClassName('navbar')[0];
+     if (window.innerWidth < 993 && !this.isCollapsed) {
+       navbar.classList.add('bg-white');
+       navbar.classList.remove('navbar-transparent');
+     } else {
+       navbar.classList.remove('bg-white');
+       navbar.classList.add('navbar-transparent');
+     }
+   };
+  ngOnInit() {
+    window.addEventListener("resize", this.updateColor);
+    this.listTitles = ROUTES.filter(listTitle => listTitle);
+    const navbar: HTMLElement = this.element.nativeElement;
+    this.toggleButton = navbar.getElementsByClassName("navbar-toggler")[0];
+    this.router.events.subscribe(event => {
+      this.sidebarClose();
+      var $layer: any = document.getElementsByClassName("close-layer")[0];
+      if ($layer) {
+        $layer.remove();
+        this.mobile_menu_visible = 0;
+      }
+    });
+  }
+
+  collapse() {
+    this.isCollapsed = !this.isCollapsed;
+    const navbar = document.getElementsByTagName("nav")[0];
+    if (!this.isCollapsed) {
+      navbar.classList.remove("navbar-transparent");
+      navbar.classList.add("bg-white");
+    } else {
+      navbar.classList.add("navbar-transparent");
+      navbar.classList.remove("bg-white");
+    }
+  }
+
+  sidebarOpen() {
+    const toggleButton = this.toggleButton;
+    const mainPanel = <HTMLElement>(
+      document.getElementsByClassName("main-panel")[0]
+    );
+    const html = document.getElementsByTagName("html")[0];
+    if (window.innerWidth < 991) {
+      mainPanel.style.position = "fixed";
+    }
+
+    setTimeout(function() {
+      toggleButton.classList.add("toggled");
+    }, 500);
+
+    html.classList.add("nav-open");
+
+    this.sidebarVisible = true;
+  }
+  sidebarClose() {
+    const html = document.getElementsByTagName("html")[0];
+    this.toggleButton.classList.remove("toggled");
+    const mainPanel = <HTMLElement>(
+      document.getElementsByClassName("main-panel")[0]
+    );
+
+    if (window.innerWidth < 991) {
+      setTimeout(function() {
+        mainPanel.style.position = "";
+      }, 500);
+    }
+    this.sidebarVisible = false;
+    html.classList.remove("nav-open");
+  }
+  sidebarToggle() {
+    // const toggleButton = this.toggleButton;
+    // const html = document.getElementsByTagName('html')[0];
+    var $toggle = document.getElementsByClassName("navbar-toggler")[0];
+
+    if (this.sidebarVisible === false) {
+      this.sidebarOpen();
+    } else {
+      this.sidebarClose();
+    }
+    const html = document.getElementsByTagName("html")[0];
+
+    if (this.mobile_menu_visible == 1) {
+      // $('html').removeClass('nav-open');
+      html.classList.remove("nav-open");
+      if ($layer) {
+        $layer.remove();
+      }
+      setTimeout(function() {
+        $toggle.classList.remove("toggled");
+      }, 400);
+
+      this.mobile_menu_visible = 0;
+    } else {
+      setTimeout(function() {
+        $toggle.classList.add("toggled");
+      }, 430);
+
+      var $layer = document.createElement("div");
+      $layer.setAttribute("class", "close-layer");
+
+      if (html.querySelectorAll(".main-panel")) {
+        document.getElementsByClassName("main-panel")[0].appendChild($layer);
+      } else if (html.classList.contains("off-canvas-sidebar")) {
+        document
+          .getElementsByClassName("wrapper-full-page")[0]
+          .appendChild($layer);
+      }
+
+      setTimeout(function() {
+        $layer.classList.add("visible");
+      }, 100);
+
+      $layer.onclick = function() {
+        //asign a function
+        html.classList.remove("nav-open");
+        this.mobile_menu_visible = 0;
+        $layer.classList.remove("visible");
+        setTimeout(function() {
+          $layer.remove();
+          $toggle.classList.remove("toggled");
+        }, 400);
+      }.bind(this);
+
+      html.classList.add("nav-open");
+      this.mobile_menu_visible = 1;
+    }
+  }
+
+  getTitle() {
+    var title = this.location.prepareExternalUrl(this.location.path());
+    if (title.charAt(0) === "#") {
+      title = title.slice(1);
+    }
+
+    for (var item = 0; item < this.listTitles.length; item++) {
+      if (this.listTitles[item].path === title) {
+        return this.listTitles[item].title;
+      }
+    }
+    return "Dashboard";
+  }
+
+  open(content) {
+    this.modalService.open(content, {windowClass: 'modal-search'}).result.then((result) => {
+      this.closeResult = `Closed with: ${result}`;
+    }, (reason) => {
+      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+    });
+  }
+
+  private getDismissReason(reason: any): string {
+    if (reason === ModalDismissReasons.ESC) {
+      return 'by pressing ESC';
+    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
+      return 'by clicking on a backdrop';
+    } else {
+      return  `with: ${reason}`;
+    }
+  }
+  ngOnDestroy(){
+     window.removeEventListener("resize", this.updateColor);
+  }
+}

src/app/components/sidebar/sidebar.component.html

@@ -0,0 +1,25 @@
+<div class="logo">
+  <a routerLink="dashboard" class="simple-text logo-mini">
+    <div class="logo-img">
+      <img src="../../../assets/img/logo.png" />
+    </div>
+  </a>
+
+  <a routerLink="company-information" class="simple-text logo-normal">
+    Talenttic Tech Hub CRM
+  </a>
+</div>
+<div class="sidebar-wrapper">
+  <ul class="nav">
+    <li
+      routerLinkActive="active"
+      *ngFor="let menuItem of menuItems"
+      class="{{ menuItem.class }} nav-item"
+    >
+      <a [routerLink]="[menuItem.path]">
+        <i class="bi {{ menuItem.icon }}"></i>
+        <p>{{ menuItem.title }}</p>
+      </a>
+    </li>
+  </ul>
+</div>

src/app/components/sidebar/sidebar.component.spec.ts

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

src/app/components/sidebar/sidebar.component.ts

@@ -0,0 +1,68 @@
+import { Component, OnInit } from "@angular/core";
+
+declare interface RouteInfo {
+  path: string;
+  title: string;
+  icon: string;
+  class: string;
+}
+export const ROUTES: RouteInfo[] = [
+  // {
+  //   path: "/dashboard",
+  //   title: "Dashboard",
+  //   icon: "bi-speedometer",
+  //   class: "",
+  // },
+  {
+    path: "/company-information",
+    title: "Company Information",
+    icon: "bi-person-vcard",
+    class: "",
+  },
+  {
+    path: "/notifications",
+    title: "Notifications",
+    icon: "bi-bell",
+    class: "",
+  },
+
+  {
+    path: "/company-profile",
+    title: "Company Profile",
+    icon: "bi-person-lines-fill",
+    class: "",
+  },
+  {
+    path: "/invoices",
+    title: "Invoices",
+    icon: "bi-receipt-cutoff",
+    class: "",
+  },
+  {
+    path: "/payments",
+    title: "Payments",
+    icon: "bi-credit-card",
+    class: "",
+  },
+];
+
+@Component({
+  selector: "app-sidebar",
+  templateUrl: "./sidebar.component.html",
+  styleUrls: ["./sidebar.component.css"],
+})
+export class SidebarComponent implements OnInit {
+  menuItems: any[];
+
+  constructor() {}
+
+  ngOnInit() {
+    this.menuItems = ROUTES.filter((menuItem) => menuItem);
+  }
+  isMobileMenu() {
+    if (window.innerWidth > 991) {
+      return false;
+    }
+    return true;
+  }
+}