enhancement/1 - add search function

app.js

@@ -1,5 +1,6 @@
 import { MDCTopAppBar } from '@material/top-app-bar/index';
 import { MDCRipple } from '@material/ripple';
+import {MDCTextField} from '@material/textfield';
 
 // Top App Bar
 
@@ -30,4 +31,8 @@ gitRipple.unbounded = true;
 
 // Other Ripples
 
-const polyRipple = new MDCRipple(document.querySelector('.polyconv__media'))
+const polyRipple = new MDCRipple(document.querySelector('.polyconv__media'))
+
+// Text Fields
+
+const searchTextField = new MDCTextField(document.querySelector('.search-text-field--elem'));

app.scss

@@ -15,6 +15,10 @@ $mdc-theme-on-background: #FFFFFF;
 @import "@material/typography/mdc-typography";
 @import "@material/list/mdc-list";
 @import "@material/ripple/mdc-ripple";
+@import "@material/textfield/mdc-text-field";
+@import "@material/notched-outline/mdc-notched-outline";
+@import "@material/shape/mdc-shape";
+@import "@material/shape/mixins";
 
 html {
     --scroll-height: 0%;
@@ -136,7 +140,7 @@ body.no-scroll { overflow: hidden; }
 
 .back-button {
     position: absolute;
-    @include mdc-icon-button-ink-color(on-secondary);
+    @include mdc-icon-button-ink-color(on-primary);
 }
 
 .jakcharvat-logo {
@@ -216,15 +220,15 @@ body.no-scroll { overflow: hidden; }
 }
 
 .polyconv__media {
-    background-image: url(/imgs/polyConv.png);
+    background-image: url(imgs/polyConv.png);
 }
 
 .centreline__media {
-    background-image: url(/imgs/centreline.png);
+    background-image: url(imgs/centreline.png);
 }
 
 .add__media {
-    background-image: url(/imgs/add.png);
+    background-image: url(imgs/add.png);
 }
 
 .mdc-card__media.hovered {
@@ -387,9 +391,21 @@ body.no-scroll { overflow: hidden; }
     border-radius: 10px;
 }
 
-.mdc-list-item {
-    border-radius: 10px;
-    justify-content: center;
-    cursor: pointer;
-    color: $mdc-theme-on-secondary;
-}
+// ... Text Fields ...
+
+.mdc-text-field {
+    position: relative;
+
+    left: 10px;
+    width: calc(100% - 15px);
+    top: 20px;
+
+    @include mdc-text-field-focused-outline-color(on-secondary);
+    @include mdc-text-field-outline-color(on-primary);
+    @include mdc-text-field-hover-outline-color(on-secondary);
+    @include mdc-text-field-ink-color(on-secondary);
+    @include mdc-text-field-label-color(on-secondary);
+    @include mdc-text-field-caret-color(on-secondary);
+}
+
+// ... Shape ... 

index.html

@@ -33,7 +33,8 @@
         <span class="mdc-top-app-bar__title">openScope Tool Hub</span>
       </section>
       <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
-        <a href="https://github.com/jakcharvat" target="_blank" class="mdc-top-app-bar__action-item git-button" aria-label="My Github" alt="My Github">
+        <a href="https://github.com/jakcharvat" target="_blank" class="mdc-top-app-bar__action-item git-button" aria-label="My Github"
+          alt="My Github">
           <img src="imgs/github--black.png" style="width: 100%;">
         </a>
       </section>
@@ -46,20 +47,34 @@
       <div class="jakcharvat-logo">
         <img src="imgs/jakcharvat-logo--black.svg" alt="jakcharvat">
       </div>
+
+      <div class="mdc-text-field mdc-text-field--outlined search-text-field--elem">
+        <input type="text" id="search-text-field" class="mdc-text-field__input">
+        <label for="search-text-field" class="mdc-floating-label">Search...</label>
+        <div class="mdc-notched-outline">
+          <svg>
+            <path class="mdc-notched-outline__path" />
+          </svg>
+        </div>
+        <div class="mdc-notched-outline__idle"></div>
+      </div>
+
       <ul class="mdc-list">
         <a class="mdc-list-item mdc-typography--overline item1" href="https://github.com/jakcharvat/" onclick="toggleMenu()" traget="_blank">
           <p class="item">My Projects on Github</p>
           <i class="material-icons mdc-list-item__meta">open_in_new</i>
         </a>
-        <a class="mdc-list-item mdc-typography--overline item2" href="https://github.com/jakcharvat/centrelineGenerator/" onclick="toggleMenu()" traget="_blank">
+        <a class="mdc-list-item mdc-typography--overline item2" href="https://github.com/jakcharvat/centrelineGenerator/" onclick="toggleMenu()"
+          traget="_blank">
           <p class="item">This Project on Github</p>
           <i class="material-icons mdc-list-item__meta">open_in_new</i>
         </a>
         <a class="mdc-list-item mdc-typography--overline item3" href="https://openscope.co" onclick="toggleMenu()" traget="_blank">
           <p class="item">OpenScope</p>
           <i class="material-icons mdc-list-item__meta">open_in_new</i>
         </a>
-        <a class="mdc-list-item mdc-typography--overline item4" href="https://github.com/openscope/openscope/" onclick="toggleMenu()" traget="_blank">
+        <a class="mdc-list-item mdc-typography--overline item4" href="https://github.com/openscope/openscope/" onclick="toggleMenu()"
+          traget="_blank">
           <p class="item">OpenScope on Github</p>
           <i class="material-icons mdc-list-item__meta">open_in_new</i>
         </a>
@@ -137,7 +152,9 @@
               </p>
               <div class="centreline__description float--right margin-top--10 overflow--auto hide">
                 <div class="mdc-divider"></div>
-                <p class="mdc-card__closed-info mdc-typography--overline padding-top--5 text-align--justif overflow--autoy">Centreline Generator is a tool for generating coordinate for extended centrelines, based on the ends of the runway. The tool calculates the exact magnetic bearing between the two points, and uses that to generate a 25NM dashed centreline with dashes 0.5NM each, and a perpendicular dash every 10 dashes to indicate 5NM.</p>
+                <p class="mdc-card__closed-info mdc-typography--overline padding-top--5 text-align--justif overflow--autoy">Centreline Generator is a tool for generating coordinate for extended centrelines, based on the ends of the
+                  runway. The tool calculates the exact magnetic bearing between the two points, and uses that to generate
+                  a 25NM dashed centreline with dashes 0.5NM each, and a perpendicular dash every 10 dashes to indicate 5NM.</p>
               </div>
             </div>
             <div class="mdc-card__actions centreline__actions">