feat(): add css to search bar

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

src/app/homepage/header/header.component.html

@@ -43,7 +43,8 @@
   <app-social-wrapper></app-social-wrapper>
   <div class="menu-wrapper">
     <div class="search-wrapper">
-        <input id="q" />
+      <i class="fa fa-search search-icon"></i>
+      <input id="search" class="search-input" placeholder="Search..." />
     </div>
     <ul>
       <li>

src/app/homepage/header/header.component.scss

@@ -1,5 +1,5 @@
-@import '../../../scss/variables.scss';
-@import '../../../scss/utils.scss';
+@import "../../../scss/variables.scss";
+@import "../../../scss/utils.scss";
 
 :host {
   background: $black-color;
@@ -94,17 +94,46 @@ header {
   position: relative;
   float: right;
   padding: 14px 25px;
-  margin-right: 80px;
+
+  @media (min-width: 1500px) {
+    margin-right: 80px;
+  }
+
+  @media (max-width: 1499px) {
+    li:first-of-type {
+      display: none;
+    }
+    .search-wrapper {
+      margin-right: 0;
+    }
+  }
+
+  @media (max-width: 1250px) {
+    .search-wrapper {
+      display: none;
+    }
+  }
 
   @include media(large) {
     margin-right: 0;
     padding: 14px 5px;
   }
 
   @include media(normal) {
-    display: none;
+    ul {
+      display: none !important;
+    }
+
+    .search-wrapper {
+      display: inline-block;
+    }
   }
 
+  @include media(small) {
+    .search-wrapper {
+      display: none;
+    }
+  }
   ul {
     display: inline-block;
     vertical-align: middle;
@@ -211,7 +240,7 @@ header {
     }
 
     &::after {
-      content: '';
+      content: "";
       display: block;
       background: #246081;
       height: 2px;
@@ -264,7 +293,7 @@ header {
   span,
   &::after,
   &::before {
-    content: '';
+    content: "";
     background: #fff;
     display: block;
     height: 2px;
@@ -282,8 +311,73 @@ header {
   }
 }
 
-.search-wrapper{
+.search-wrapper {
   margin-right: 2em;
   height: 100%;
   display: inline-block;
-}
+  position: relative;
+}
+
+.search-icon {
+  position: absolute;
+  margin-top: 7px;
+  color: #a5a5a5;
+  font-size: 14px;
+}
+
+.search-input {
+  background: transparent;
+  border: 0;
+  border-bottom: 2px solid #414141;
+  padding: 5px 20px 5px 28px;
+  color: #fff;
+  font-family: "Source Sans Pro", "Helvetica Neue", sans-serif;
+  font-size: 14px;
+  outline: 0 !important;
+  transition: all 90ms ease-in-out;
+  width: 165px;
+
+  &:active,
+  &:focus {
+    border-bottom-color: $red-color;
+    width: 190px;
+  }
+}
+
+.search-input::placeholder {
+  color: #a5a5a5;
+  opacity: 1;
+}
+
+.close-icon {
+  position: absolute;
+  right: 0;
+  width: 15px;
+  height: 15px;
+  top: 10px;
+  cursor: pointer;
+  visibility: hidden;
+  transition: all 90ms ease-in-out;
+
+  &.visible {
+    visibility: visible;
+  }
+
+  &::after,
+  &::before {
+    content: "";
+    background: $red-color;
+    display: block;
+    height: 2px;
+    position: absolute;
+    width: 15px;
+  }
+
+  &::after {
+    transform: rotate(45deg) translateY(3px);
+  }
+
+  &::before {
+    transform: rotate(-45deg) translateY(3px);
+  }
+}

src/app/homepage/header/header.component.ts

@@ -1,4 +1,10 @@
-import { Component, Output, EventEmitter, Input, ChangeDetectionStrategy } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output
+} from '@angular/core';
 
 @Component({
   selector: 'app-header',

src/app/homepage/homepage.component.scss

@@ -1,5 +1,5 @@
-@import '../../scss/utils.scss';
-@import '../../scss/variables.scss';
+@import "../../scss/utils.scss";
+@import "../../scss/variables.scss";
 
 .container-fluid {
   position: relative;
@@ -99,7 +99,7 @@
       @include opacity(1);
     }
     &::before {
-      content: '';
+      content: "";
       display: block;
       position: relative;
       width: 0;
@@ -452,3 +452,47 @@
     display: none;
   }
 }
+
+.algolia-autocomplete .ds-dropdown-menu {
+  width: 460px;
+  min-width: 460px;
+  margin-top: 18px;
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
+  color: #151515;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 16px;
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
+  color: #757575;
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--title {
+  font-weight: 600;
+  color: 151515;
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--text {
+  font-size: 0.8rem;
+  color: gray;
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
+  color: $red-color;
+  background: #fff2f4;
+}
+
+.algolia-autocomplete
+  .ds-dropdown-menu
+  .ds-suggestion.ds-cursor
+  .algolia-docsearch-suggestion.suggestion-layout-simple,
+.algolia-autocomplete
+  .ds-dropdown-menu
+  .ds-suggestion.ds-cursor
+  .algolia-docsearch-suggestion:not(.suggestion-layout-simple)
+  .algolia-docsearch-suggestion--content {
+  background: #fff8f9;
+}

src/app/homepage/homepage.component.ts

@@ -8,19 +8,20 @@ import {
   OnDestroy,
   OnInit,
   Renderer2,
-  ViewEncapsulation,
+  ViewEncapsulation
 } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { fromEvent, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
+import { environment } from '../../environments/environment';
 import { BasePageComponent } from './pages/page/page.component';
 
 @Component({
   selector: 'app-homepage',
   templateUrl: './homepage.component.html',
   styleUrls: ['./homepage.component.scss'],
   encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
   isSidebarOpened = true;
@@ -35,7 +36,7 @@ export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
     private readonly cd: ChangeDetectorRef,
     private readonly router: Router,
     private readonly elementRef: ElementRef,
-    private readonly renderer: Renderer2,
+    private readonly renderer: Renderer2
   ) {}
 
   ngOnInit(): void {
@@ -58,7 +59,7 @@ export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
 
   ngAfterViewInit() {
     this.checkWindowWidth(window.innerWidth);
-    this.contentRef.appendChild(this.createDocSearchScriptTag())
+    this.contentRef.appendChild(this.createDocSearchScriptTag());
   }
 
   ngOnDestroy() {
@@ -87,7 +88,7 @@ export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
     const nativeElement: HTMLElement = this.elementRef.nativeElement;
     const footerRef: HTMLElement = nativeElement.querySelector('app-footer');
     const newsletterRef: HTMLElement = nativeElement.querySelector(
-      '.newsletter-wrapper',
+      '.newsletter-wrapper'
     );
     const carbonRef = nativeElement.querySelector('#carbonads');
     if (!footerRef || !carbonRef) {
@@ -144,18 +145,19 @@ export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   createDocSearchScriptTag(): HTMLScriptElement {
-    const scriptTag = document.createElement("script");
-    scriptTag.type = "text/javascript";
-    scriptTag.src = "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js";
-    scriptTag.async = true
+    const scriptTag = document.createElement('script');
+    scriptTag.type = 'text/javascript';
+    scriptTag.src =
+      'https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js';
+    scriptTag.async = true;
     scriptTag.onload = () => {
       (window as any).docsearch({
-        apiKey: '9ea53de1a6911255834352bbbe4d3417',
+        apiKey: environment.algoliaApiKey,
         indexName: 'nestjs',
-        inputSelector: '#q',
-        debug: false // Set debug to true if you want to inspect the dropdown
-      })
+        inputSelector: '#search',
+        debug: false
+      });
     };
-    return scriptTag
+    return scriptTag;
   }
 }

src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: true,
+  algoliaApiKey: '9ea53de1a6911255834352bbbe4d3417'
 };

src/environments/environment.ts

@@ -1,8 +1,4 @@
-// The file contents for the current environment will overwrite these during build.
-// The build system defaults to the dev environment which uses `environment.ts`, but if you do
-// `ng build --env=prod` then `environment.prod.ts` will be used instead.
-// The list of which env maps to which file can be found in `.angular-cli.json`.
-
 export const environment = {
-  production: false
+  production: false,
+  algoliaApiKey: '9ea53de1a6911255834352bbbe4d3417'
 };