added sidebar contact

src/components/sidebar/sidebar.ts

@@ -3,6 +3,7 @@ import { customElement, query } from 'lit/decorators.js';
 import { debounce } from '@kluntje/js-utils/lib/function-helpers/decorators';
 
 import './sidebarNav.ts';
+import './sidebarContact.ts';
 import './sidebarFooter.ts';
 
 @customElement('sidebar-component')
@@ -38,6 +39,7 @@ export class SidebarComponent extends LitElement {
     return html`
       <div class="inner">
         <sidebar-nav></sidebar-nav>
+        <sidebar-contact></sidebar-contact>
         <sidebar-footer id="footer"></sidebar-footer>
       </div>
       <a href="#sidebar" class="toggle hamburger-icon"><icon-component name="hamburger"></icon-component></a>

src/components/sidebar/sidebarContact.ts

@@ -0,0 +1,65 @@
+import { LitElement, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { fetchData } from '../../utils/fetchData';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+
+interface SidebarContactTemplateArgs {
+  headline: HTMLHeadingElement;
+  text: HTMLParagraphElement;
+  contacts: Contact[];
+}
+
+interface Contact {
+  contactIcon: string;
+  contactMarkup: string;
+}
+
+@customElement('sidebar-contact')
+export class SidebarContact extends LitElement {
+  @state()
+  contactTemplateArgs: SidebarContactTemplateArgs;
+
+  protected createRenderRoot(): HTMLElement | DocumentFragment {
+    return this;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.fetchContactData();
+  }
+
+  async fetchContactData() {
+    const response = await fetchData<string>({ endpoint: 'contact.plain.html' });
+    const responseMarkup = document.createElement('div');
+    responseMarkup.innerHTML = response;
+    // TODO: refactor contactTemplateArgs
+    this.contactTemplateArgs = {
+      headline: responseMarkup.querySelector('h2') as HTMLHeadingElement,
+      text: responseMarkup.querySelector('p') as HTMLParagraphElement,
+      contacts: Array.from(responseMarkup.querySelectorAll('.contact > div:not(:first-child)')).map((item) => {
+        return {
+          contactIcon: item.querySelector('div')?.innerText as string,
+          contactMarkup: item.querySelector('div:last-child')?.innerHTML as string,
+        };
+      }),
+    };
+  }
+
+  render() {
+    const { headline, text, contacts } = this.contactTemplateArgs;
+    return html`
+      <section>
+        <header class="major">${headline}</header>
+        ${text}
+        <ul class="contact">
+          ${contacts.map((item) => {
+            return html` <li class="icon solid">
+              <icon-component name="${item.contactIcon}"></icon-component>
+              ${unsafeHTML(item.contactMarkup)}
+            </li>`;
+          })}
+        </ul>
+      </section>
+    `;
+  }
+}

src/styles/sass/layout/_sidebar.scss

@@ -79,6 +79,18 @@
     }
   }
 
+  .contact icon-component {
+    color: #f56a6a;
+    display: inline-block;
+    font-size: 1.5em;
+    height: 1.125em;
+    left: 0;
+    line-height: 1.125em;
+    position: absolute;
+    text-align: center;
+    width: 29px;
+  }
+
   .toggle {
     @include icon(false, solid);
     @include vendor('transition', 'left 0.5s ease');
@@ -172,6 +184,10 @@
       }
     }
 
+    .contact icon-component {
+      width: 27px;
+    }
+
     .toggle {
       text-indent: 6em;
       width: 6em;
@@ -187,6 +203,10 @@
   }
 
   @include breakpoint('<=small') {
+    .contact icon-component {
+      width: 24px;
+    }
+
     .toggle {
       text-indent: 7.25em;
       width: 7.25em;

types/components/sidebar/sidebar.d.ts

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 import './sidebarNav.ts';
+import './sidebarContact.ts';
 import './sidebarFooter.ts';
 export declare class SidebarComponent extends LitElement {
     toggle: HTMLAnchorElement;

types/components/sidebar/sidebarContact.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+interface SidebarContactTemplateArgs {
+    headline: HTMLHeadingElement;
+    text: HTMLParagraphElement;
+    contacts: Contact[];
+}
+interface Contact {
+    contactIcon: string;
+    contactMarkup: string;
+}
+export declare class SidebarContact extends LitElement {
+    contactTemplateArgs: SidebarContactTemplateArgs;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): void;
+    fetchContactData(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};