Implement media menu (#284)

* Add in base code and svgs

* Implement css grid

* Adjust heights slider and animation

* Add icon glow button and alternate display

* Add button

* Accomodate button and slider

* Add slider

* Enable slider button for all and add animation

* Add shift values

* Repair div and animation

* Add test text

* Remove px

* Add hamburger component

* Add search image component

* Add user component

* Add media menu icons component

* Adjust search menu and user menu heights

* Adjust media menu images component into media menu component

* Add semicolons

* Delete redundant svgs

topnav/assets/img/hamburger.js

@@ -0,0 +1,20 @@
+import { LitElement, html } from 'lit-element';
+
+class HamBurger extends LitElement {
+
+  static get properties() {
+    return {
+      colour: { type: String }
+    };
+  }
+
+  render() {
+    return html`
+      <svg alt="Main menu" height="40px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+        <path fill="${this.colour}" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"/>
+      </svg>
+    `;
+  }
+}
+
+customElements.define('ham-burger', HamBurger);

topnav/assets/img/search.js

@@ -0,0 +1,18 @@
+import { LitElement, html } from 'lit-element';
+
+class Search extends LitElement {
+
+  static get properties() {
+    return {
+      colour: { type: String }
+    };
+  }
+
+  render() {
+    return html`
+      <svg alt="Search" width="40px" height="40px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="${this.colour}" d="M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z"/></svg>
+    `;
+  }
+}
+
+customElements.define('search-image', Search);

topnav/assets/img/user.js

@@ -0,0 +1,27 @@
+import { LitElement, html } from 'lit-element';
+
+class User extends LitElement {
+
+  static get properties() {
+    return {
+      colour: { type: String }
+    };
+  }
+
+  render() {
+    return html`
+      <svg alt="User menu" width="40px" height="40px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+              <g id="Artboard" transform="translate(-45.000000, -173.000000)" fill="${this.colour}">
+                  <g id="Person-Icon" transform="translate(45.000000, 173.000000)">
+                      <circle id="Oval-3" cx="14" cy="7.89090909" r="7.89090909"></circle>
+                      <path d="M14,27.9305935 C14.1458333,27.9305935 18.9142795,28.0867581 28,27.9305935 C28,22.0644996 21.7319865,17.3090909 14,17.3090909 C6.2680135,17.3090909 2.84217094e-14,22.0644996 2.84217094e-14,27.9305935 C9.95084635,27.9305935 13.8541667,27.9305935 14,27.9305935 Z" id="Oval-3-Copy"></path>
+                  </g>
+              </g>
+          </g>
+      </svg>
+    `;
+  }
+}
+
+customElements.define('user-image', User);

topnav/index.html

@@ -6,7 +6,11 @@
     <title>topnav-element</title>
     <style>
       body {
+        width: 100%;
+        height: 100%;
         margin: 0px;
+        padding: 0px;
+        overflow-x: hidden; 
       }
     </style>
   </head>

topnav/media-menu.js

@@ -0,0 +1,128 @@
+import { LitElement, html, css } from 'lit-element';
+
+import './media-slider';
+import './assets/img/media-menu-images';
+
+class MediaMenu extends LitElement {
+
+  static get properties() {
+    return {
+      mediaMenuOpen: { type: Boolean },
+      mediaMenuAnimate: { type: Boolean },
+      mediaSliderOpen: { type: Boolean },
+      mediaSliderAnimate: { type: Boolean }
+    };
+  }
+
+  constructor() {
+    super();
+    this.mediaSliderOpen = false;
+    this.mediaSliderAnimate = false;
+  }
+
+  mediaSlider() {
+    // Only keep side menu open until menu closed
+    // Shift menu downwards as per button clicked
+    this.mediaSliderAnimate = true;
+    this.mediaSliderOpen = !this.mediaSliderOpen;
+  }
+
+  render() {
+    const mediaMenuClass = this.mediaMenuOpen ? 'media-menu open slide-in' : this.mediaMenuAnimate ? 'media-menu slide-out' : 'media-menu';
+    const mediaMenuHidden = this.mediaMenuOpen ? 'false' : 'true';
+    const mediaMenuExpanded = this.mediaMenuOpen ? 'true' : 'false';
+    return html`
+    <nav
+      class="${mediaMenuClass}"
+      aria-hidden="${mediaMenuHidden}"
+      aria-expanded="${mediaMenuExpanded}"
+    >
+      <!-- Include icon and name inline in a button-->
+      <div class="grid">
+        <button tabindex="-1" @click="${this.mediaSlider}"><div><mediamenu-image type="waybackMachine"></mediamenu-image></div></button>
+        <button><div>Wayback Machine</div></button>
+        <button tabindex="-1" @click="${this.mediaSlider}"><div><mediamenu-image type="texts"></mediamenu-image></button>
+        <button><div>Texts</div></button>
+        <button tabindex="-1" @click="${this.mediaSlider}"><div><mediamenu-image type="video"></mediamenu-image></div></button>
+        <button><div>Video</div></button>
+        <button tabindex="-1" @click="${this.mediaSlider}"><div><mediamenu-image type="audio"></mediamenu-image></div></button>
+        <button><div>Audio</div></button>
+        <button tabindex="-1" @click="${this.mediaSlider}"><div><mediamenu-image type="software"></mediamenu-image></div></button>
+        <button><div>Software</div></button>
+        <button tabindex="-1" @click="${this.mediaSlider}"><div><mediamenu-image type="images"></mediamenu-image></div></button>
+        <button><div>Images</div></button>
+        <button tabindex="-1" @click="${this.mediaSlider}"><div><mediamenu-image type="more"></mediamenu-image></div></button>
+        <button><div>More</div></button>
+      </div>
+    </nav>
+    <media-slider ?mediaSliderOpen="${this.mediaSliderOpen}" ?mediaSliderAnimate="${this.mediaSliderAnimate}"></media-slider>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      .media-menu {
+        width: 100%;
+        height: 500px;
+        background-color: var(--black);
+        color: var(--white);
+        margin: 0;
+        font-size: 20px;
+        font-family: "Helvetica Neue";
+        transform: translate(0, -1000px);
+      }
+      .media-menu button {
+        position: relative;
+        background: none;
+        color: inherit;
+        border: none;
+        font: inherit;
+        cursor: pointer;
+        text-align: left;
+        z-index: 5;
+      }
+      .open {
+        transform: translate(0, 0);
+        z-index: 1;
+      }
+      @keyframes slide-in {
+        0% {
+          transform: translate(0, -1000px);
+        }
+        100% {
+          transform: translate(0, 0);
+        }
+      }
+      @keyframes slide-out {
+        0% {
+          transform: translate(0, 0);
+        }
+        100% {
+          transform: translate(0, -1000px);
+        }
+      }
+      .slide-in {
+        animation: slide-in 0.5s forwards;
+      }
+      .slide-out {
+        animation: slide-out 0.5s forwards;
+      }
+      .grid {
+        padding: 10px;
+        display: grid;
+        grid-template-columns: 50px 300px;
+      }
+      .grid div {
+        height: 40px;
+        padding: 10px;
+      }
+      a {
+        display: inline;
+        color: var(--white);
+        text-decoration: none;
+      }
+     `;
+  }
+}
+
+customElements.define('media-menu', MediaMenu);

topnav/media-slider.js

@@ -0,0 +1,119 @@
+import { LitElement, html, css } from 'lit-element';
+
+class MediaSlider extends LitElement {
+
+  static get properties() {
+    return {
+      mediaSliderOpen: { type: Boolean },
+      mediaSliderAnimate: { type: Boolean }
+    };
+  }
+
+  render() {
+    const mediaSliderInfoClass = this.mediaSliderOpen ? 'information-menu im-slide-in' : this.mediaSliderAnimate ? 'information-menu im-slide-out' : 'information-menu offscreen';
+    const mediaSliderRectClass = this.mediaSliderOpen ? 'rounded-rectangle rr-slide-in' : this.mediaSliderAnimate ? 'rounded-rectangle rr-slide-out' : 'rounded-rectangle offscreen';
+
+    return html`
+      <div class="${mediaSliderInfoClass}">
+        <div class="info-box">
+          <div class="info-box-1">
+            <p>Internet archive audio</p>
+          </div>
+        </div>
+      </div>
+      <div class="${mediaSliderRectClass}"></div>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      .rounded-rectangle {
+        position: relative;
+        background: var(--grey20);
+        border-radius: 10px 0 0 10px;
+        padding: 0;
+        width: 60px;
+        height: 63px;
+        translate(0, -990px); /* 0, 63, 126, 189, 252, 315, 378 */
+        z-index: 4;
+      }
+
+      .information-menu {
+        position: relative;
+        padding: 0;
+        background: var(--grey20);
+        height: 500px;
+        width: 100%;
+        transform: translate(60px, -500px);
+        z-index: 4;
+      }
+
+      .offscreen {
+        transform: translate(2000px, -500px);
+      }
+
+      /* Information box */
+
+      @keyframes im-slide-in {
+        0% {
+          transform: translate(2000px, -500px);
+        }
+        100% {
+          transform: translate(60px, -500px);
+        }
+      }
+      @keyframes im-slide-out {
+        0% {
+          transform: translate(60px, -500px);
+        }
+        100% {
+          transform: translate(2000px, -500px);
+        }
+      }
+      .im-slide-in {
+        animation: im-slide-in 0.5s forwards;
+      }
+      .im-slide-out {
+        animation: im-slide-out 0.5s forwards;
+      }
+
+      /* Rounded rectangle */
+
+      @keyframes rr-slide-in {
+        0% {
+          transform: translate(2000px, -990px);
+        }
+        100% {
+          transform: translate(0, -990px);
+        }
+      }
+      @keyframes rr-slide-out {
+        0% {
+          transform: translate(0, -990px);
+        }
+        100% {
+          transform: translate(2000px, -990px);
+        }
+      }
+      .rr-slide-in {
+        animation: rr-slide-in 0.5s forwards;
+      }
+      .rr-slide-out {
+        animation: rr-slide-out 0.5s forwards;
+      }
+
+      .info-box {
+        padding: 1px 20px;
+      }
+
+      .info-box-1 {
+        font-family: var(--theme-font-family);
+        font-size: 20px;
+        color: var(--white);
+        font-weight: bold;
+      }
+     `;
+  }
+}
+
+customElements.define('media-slider', MediaSlider);

topnav/search-menu.js

@@ -58,32 +58,32 @@ class SearchMenu extends LitElement {
         position: relative;
         display: flex;
         flex-direction: column;
-        margin: 0px;
+        margin: 0;
         width: 100%;
         height: 200px;
         font-size: 20px;
         background-color: var(--grey20);
         padding: 10px;
-        transform: translate(0px, -1000px);
+        transform: translate(0, -1500px);
       }
       .open {
-        transform: translate(0px, 0px);
+        transform: translate(0, -1065px);
         z-index: 3;
       }
       @keyframes slide-in {
         0% {
-          transform: translate(0px, -1000px);
+          transform: translate(0, -1500px);
         }
         100% {
-          transform: translate(0px, 0px);
+          transform: translate(0, -1065px);
         }
       }
       @keyframes slide-out {
         0% {
-          transform: translate(0px, 0px);
+          transform: translate(0, -1065px);
         }
         100% {
-          transform: translate(0px, -1000px);
+          transform: translate(0, -1500px);
         }
       }
       .slide-in {