liz-frailey/header.diff

## header.diff
diff --git a/jambo.json b/jambo.json
index 027329d..4b13e40 100644
--- a/jambo.json
+++ b/jambo.json
@@ -11,7 +11,9 @@
       "layouts/footer.hbs",
       "layouts/headincludes.hbs",
       "cards",
-      "static/js/hours/open-status/messagefactory.js"
+      "static/js/hours/open-status/messagefactory.js",
+      "layouts/html.hbs",
+      "static/entry.js"
     ],
     "preservedFiles": []
   }
diff --git a/layouts/footer.hbs b/layouts/footer.hbs
index 58ccf28..72e3971 100644
--- a/layouts/footer.hbs
+++ b/layouts/footer.hbs
@@ -1 +1,43 @@
-{{!-- <footer class="Footer"></footer> --}}
+<footer class="Footer">
+  <div class="Footer-links">
+    <ul>
+      <li>
+        <a href="https://google.com">Footer Link 1</a>
+      </li>
+      <li>
+        <a href="https://google.com">Footer Link 2</a>
+      </li>
+      <li>
+        <a href="https://google.com">Footer Link 3</a>
+      </li>
+      <li>
+        <a href="https://google.com">Footer Link 4</a>
+      </li>
+      <li>
+        <a href="https://google.com">Footer Link 5</a>
+      </li>
+      <li>
+        <a href="https://google.com">Footer Link 6</a>
+      </li>
+      <li>
+        <a href="https://google.com">Footer Link 7</a>
+      </li>
+    </ul>
+  </div>
+  <div class="Footer-social">
+    <a class="Footer-socialLink" href="">
+      <img class="Footer-socialLink-image" src="https://assets.sitescdn.net/landingpages/modules/footer/images/facebook.svg" alt="facebook"/>
+    </a>
+    <a class="Footer-socialLink" href="">
+      <img class="Footer-socialLink-image" src="https://assets.sitescdn.net/landingpages/modules/footer/images/twitter.svg" alt="twitter"/>
+    </a>
+    <a class="Footer-socialLink" href="">
+      <img class="Footer-socialLink-image" src="https://assets.sitescdn.net/landingpages/modules/footer/images/instagram.svg" alt="instagram"/>
+    </a>
+  </div>
+  <div class="Footer-copywright">
+    © 2020 Client Name. All Rights Reserved.
+  </div>
+
+
+</footer>
\ No newline at end of file
diff --git a/layouts/header.hbs b/layouts/header.hbs
index 960fadd..6bd244b 100644
--- a/layouts/header.hbs
+++ b/layouts/header.hbs
@@ -1 +1,40 @@
-{{!-- <div class="Header"></div> --}}
+<div class="Header">
+  <div class="Header-left">
+    <a href="https://turtleheadtacos.com">
+      <!--replace the src with the header logo URL-->
+      <img class="Header-logo" src="https://a.mktgcdn.com/p-sandbox/NK2RQ41S7jhtevg97SgzuY3p7BTHbAYonyc3ETE50GI/100x100.png" alt="Header Logo"/>
+    </a>
+  </div>
+
+  <button class="Header-toggle js-Header-toggle" aria-controls="header-menu" aria-expanded="false" aria-label="Toggle Menu Open or Closed">
+    <div class="Header-toggleBar"></div>
+    <div class="Header-toggleBar"></div>
+    <div class="Header-toggleBar"></div>
+  </button>
+
+  <div class="Header-right" id="header-menu">
+    <ul>
+      <li>
+        <a href="https://google.com">Header Link 1</a>
+      </li>
+      <li>
+        <a href="https://google.com">Header Link 2</a>
+      </li>
+      <li>
+        <a href="https://google.com">Header Link 3</a>
+      </li>
+      <li>
+        <a href="https://google.com">Header Link 4</a>
+      </li>
+      <li>
+        <a href="https://google.com">Header Link 5</a>
+      </li>
+      <li>
+        <a href="https://google.com">Header Link 6</a>
+      </li>
+      <li>
+        <a href="https://google.com">Header Link 7</a>
+      </li>
+    </ul>
+  </div>
+</div>
\ No newline at end of file
diff --git a/layouts/html.hbs b/layouts/html.hbs
new file mode 100644
index 0000000..3837e13
--- /dev/null
+++ b/layouts/html.hbs
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html class="HeaderFooter-doc">
+  <head>
+    {{> layouts/headincludes }}
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
+    <meta name="format-detection" content="telephone=no">
+
+    <!-- dns prefetch -->
+    <link rel="dns-prefetch" href="//www.yext-pixel.com">
+    <link rel="dns-prefetch" href="//a.cdnmktg.com">
+    <link rel="dns-prefetch" href="//a.mktgcdn.com">
+    <link rel="dns-prefetch" href="//dynl.mktgcdn.com">
+    <link rel="dns-prefetch" href="//dynm.mktgcdn.com">
+    <link rel="dns-prefetch" href="//www.google-analytics.com">
+    <script>
+      document.documentElement.lang = {{#if global_config.locale}}"{{global_config.locale}}"{{else}}'en'{{/if}};
+    </script>
+
+    {{#if metaDescription}}
+      <meta name="description" content="{{metaDescription}}">
+    {{/if}}
+    {{#if keywords}}
+      <meta name="keywords" content="{{keywords}}">
+    {{/if}}
+
+    {{#if pageTitle}}
+      <meta property="og:title" content="{{pageTitle}}">
+    {{/if}}
+    {{#if metaDescription}}
+      <meta property="og:description" content="{{metaDescription}}">
+    {{/if}}
+    <meta property="og:type" content="website">
+    {{#if global_config.logo}}
+      <meta property="og:image" content="../{{global_config.logo}}">
+    {{/if}}
+    {{#if canonicalUrl}}
+      <meta property="og:url" content="{{canonicalUrl}}">
+      <link rel="canonical" href="{{canonicalUrl}}" />
+    {{else if env.JAMBO_INJECTED_DATA.pages.domains.prod.domain}}
+      {{#with env.JAMBO_INJECTED_DATA.pages.domains.prod}}
+        <meta property="og:url" content="{{#if isHttps}}https://{{else}}http://{{/if}}{{domain}}">
+        <link rel="canonical" href="{{#if isHttps}}https://{{else}}http://{{/if}}{{domain}}">
+      {{/with}}
+    {{/if}}
+    <meta name="twitter:card" content="summary">
+
+    {{#if pageTitle}}
+      <title>{{pageTitle}}</title>
+    {{/if}}
+
+    {{#if global_config.favicon}}
+      <link rel="shortcut icon" href="../{{global_config.favicon}}">
+    {{/if}}
+    <script src="bundle.js"></script>
+
+    <!-- Stylesheets -->
+    <link rel="stylesheet" type="text/css" href="https://assets.sitescdn.net/answers/v{{global_config.sdkVersion}}/answers.css">
+    <link rel="stylesheet" type="text/css" href="bundle.css">
+    <script src="https://assets.sitescdn.net/answers/v{{global_config.sdkVersion}}/answerstemplates.compiled.min.js"></script>
+
+    {{#if global_config.googleAnalyticsId}}
+      <!-- Global site tag (gtag.js) - Google Analytics -->
+      <script async src="https://www.googletagmanager.com/gtag/js?id={{global_config.googleAnalyticsId}}"></script>
+      <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', '{{global_config.googleAnalyticsId}}');
+      </script>
+    {{/if}}
+
+    {{#if global_config.googleTagManagerId}}
+      <!-- Google Tag Manager -->
+      <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+      })(window,document,'script','{{#if global_config.googleTagManagerName}}{{global_config.googleTagManagerName}}{{else}}dataLayer{{/if}}','{{global_config.googleTagManagerId}}');</script>
+      <!-- End Google Tag Manager -->
+    {{/if}}
+
+    {{#if global_config.conversionTrackingEnabled}}
+      <script src="https://assets.sitescdn.net/ytag/ytag.min.js"></script>
+    {{/if}}
+
+    <script>
+      function iframeGetSearchParams() {
+        let params = new URLSearchParams(window.location.search);
+        let verticalUrl = window.location.pathname.substr(1)
+        if (verticalUrl) {
+          params.set('verticalUrl', verticalUrl);
+        }
+        return params.toString();
+      }
+      window.iFrameResizer = {
+        onReady: function() {
+          window.parentIFrame.sendMessage(iframeGetSearchParams());
+        },
+      };
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.10/iframeResizer.contentWindow.min.js"></script>
+	</head>
+  <body class="HeaderFooter-wrapper">
+    {{#if global_config.googleTagManagerId}}
+      <!-- Google Tag Manager (noscript) -->
+      <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{global_config.googleTagManagerId}}{{#ifeq googleTagManagerId 'dataLayer'}}{{else}}&l={{global_config.googleTagManagerName}}{{/ifeq}}"
+      height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+      <!-- End Google Tag Manager (noscript) -->
+    {{/if}}
+    {{> layouts/header }}
+    <div class="HeaderFooter-content">
+      {{> @partial-block }}
+    </div>
+    {{> layouts/footer }}
+  </body>
+</html>
\ No newline at end of file
diff --git a/static/entry.js b/static/entry.js
new file mode 100644
index 0000000..1588768
--- /dev/null
+++ b/static/entry.js
@@ -0,0 +1,35 @@
+// Import global polyfills
+import 'core-js/stable';
+
+// Import all SCSS
+import Scss from './scss/answers/_default.scss';
+
+// Import all JS assets
+import Formatters from './js/formatters';
+window.Formatter = Formatters;
+
+export { Formatters };
+export { getDefaultMapApiKey } from './js/default-map-api-key';
+export { isStaging } from './js/is-staging';
+export { isMobile }  from 'is-mobile';
+
+// Import Header
+import { Header } from './js/Header.js';
+import onReady from './js/onReady.js';
+
+onReady(() => {
+  const header = new Header();
+});
+
+// Used to transfigure the page for the Overlay
+import Overlay from './js/overlay/answers-frame/overlay';
+window.Overlay = new Overlay();
+
+// Import code used in Collapsible Filters, and give it the alias of window.CollapsibleFilters.
+import CollapsibleFilters from './js/collapsible-filters';
+export { CollapsibleFilters };
+global.CollapsibleFilters = CollapsibleFilters;
+
+// Import custom modules which can be accessed from HitchhikerJS.CustomModules
+import * as CustomModules from './js/custom-modules';
+export { CustomModules };
\ No newline at end of file
diff --git a/static/scss/answers-variables.scss b/static/scss/answers-variables.scss
index 8501338..b0198c3 100644
--- a/static/scss/answers-variables.scss
+++ b/static/scss/answers-variables.scss
@@ -29,6 +29,17 @@
   --hh-universal-section-title-icon: var(--yxt-color-brand-primary);
   --hh-view-results-button-hover-color: #0c5ecb;

+  // header footer variables
+  --hh-header-height: 125px;
+  --hh-header-height-xs: 48px;
+  --hh-header-toggle-color: var(--hh-color-gray-1);
+  --hh-header-logo-width: 250px;
+  --hh-header-text-color: white;
+  --hh-header-background-color: black;
+  --hh-footer-height: 125px;
+  --hh-footer-text-color: white;
+  --hh-footer-background-color: black;
+
   // common border variables
   --yxt-border-default: 1px solid var(--yxt-color-borders);

diff --git a/static/scss/answers.scss b/static/scss/answers.scss
index 421a5f3..9b60e67 100644
--- a/static/scss/answers.scss
+++ b/static/scss/answers.scss
@@ -14,3 +14,203 @@
   font-weight: bold;
 }
 }
+
+
+.HeaderFooter
+{
+  &-doc,
+  &-wrapper
+  {
+    min-height: 100%;
+  }
+
+  &-wrapper
+  {
+    display : flex;
+    flex-direction : column;
+  }
+
+  &-content
+  {
+    flex-grow: 1;
+  }
+}
+
+
+.Header
+{
+  display: flex;
+  background-color: var(--hh-header-background-color);
+  color: var(--hh-header-text-color);
+
+  &-logo
+  {
+    max-height: 100%;
+    max-width: var(--hh-header-logo-width);
+  }
+
+  &-toggleBar
+  {
+    display: inline-block;
+    height: 0.1rem;
+    width: 2rem;
+    background-color: var(--hh-header-toggle-color);
+  }
+
+  &-toggle
+  {
+    width: 2rem;
+    height: 100%;
+    display: flex;
+    padding: 4px;
+    justify-content: space-around;
+    flex-direction: column;
+    margin-left: auto;
+  }
+
+  @media (max-width: 992px) {
+    &-right {
+      font-size: var(--yxt-font-size-md);
+    }
+    &-logo {
+      max-width: 8rem;
+    }
+  }
+
+  @media (max-width: 767px) {
+    height: var(--hh-header-height-xs);
+    padding-left: var(--yxt-base-spacing);
+    padding-right: var(--yxt-base-spacing);
+    padding-top: calc(var(--yxt-base-spacing) / 2);
+    padding-bottom: calc(var(--yxt-base-spacing) / 2);
+    position: relative;
+    z-index: 100;
+
+    &-right {
+      max-height: 0;
+      overflow: hidden;
+      position: absolute;
+      width: 100%;
+      top: var(--hh-header-height-xs);
+      left: 0;
+      right: 0;
+      background-color: var(--hh-header-background-color);
+      padding-left: var(--yxt-base-spacing);
+      padding-right: var(--yxt-base-spacing);
+      transition: max-height 200ms ease, padding 200ms ease;
+
+      [aria-expanded='true'] + &
+      {
+        max-height: calc(100vh - var(--hh-header-height-xs));
+        overflow-y: auto;
+        padding-top: calc(var(--yxt-base-spacing) / 2);
+        padding-bottom: calc(var(--yxt-base-spacing) / 2);
+      }
+
+      li
+      {
+        margin-bottom: 1rem;
+      }
+    }
+  }
+
+  @media (min-width: 768px) {
+    justify-content: space-between;
+    height: var(--hh-header-height);
+    font-size: var(--yxt-font-size-lg);
+
+    &-toggle
+    {
+      display : none;
+    }
+
+    &-left
+    {
+      height: 100%;
+      align-items: center;
+      display: flex;
+      margin-left: 1rem;
+    }
+
+    &-right
+    {
+      ul
+      {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: center;
+        height: 100%;
+      }
+
+      li {
+        margin: 1rem;
+
+        &:hover {
+          cursor: pointer;
+          border-bottom: 3px solid var(--yxt-color-brand-primary);
+        }
+      }
+    }
+  }
+}
+
+.Footer
+{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--hh-footer-text-color);
+  background-color: var(--hh-footer-background-color);
+  font-size: var(--yxt-font-size-md);
+
+  @media (min-width: 768px) {
+    height: var(--hh-footer-height);
+    justify-content: space-evenly;
+    align-items: flex-start;
+  }
+
+  &-links
+  {
+    ul
+    {
+      @media (min-width: 768px) {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        justify-content: flex-start;
+        height: 100%;
+      }
+    }
+
+    li {
+      margin: 1rem;
+      text-decoration: underline;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  &-copywright,
+  &-social
+  {
+    margin-left: 1rem;
+
+    @media (max-width: 768px)
+    {
+      margin-left: 0;
+    }
+  }
+
+
+  &-socialLink
+  {
+   &-image
+    {
+      filter: invert(1);
+    }
+  }
+}
+
diff --git a/themes/answers-hitchhiker-theme/static/js/Header.js b/themes/answers-hitchhiker-theme/static/js/Header.js
new file mode 100644
index 0000000..d277196
--- /dev/null
+++ b/themes/answers-hitchhiker-theme/static/js/Header.js
@@ -0,0 +1,32 @@
+export const defaultHeaderToggleSelector = '.js-Header-toggle';
+
+export class Header {
+  constructor(toggleSelector = defaultHeaderToggleSelector, dom = document) {
+    this.dom = dom;
+    this.toggleEl = this.dom.querySelector(toggleSelector);
+    if (!this.toggleEl) {
+      console.error(`found no header toggle element with selector "${toggleSelector}"`);
+      return;
+    }
+
+    this.controlledEl = this.toggleEl.getAttribute('aria-controls');
+    if (!this.controlledEl) {
+      console.error(`found no aria-controls attribute for element:`, this.toggleEl);
+      return;
+    }
+    const ariaExpanded = this.toggleEl.getAttribute('aria-expanded');
+    if (!ariaExpanded) {
+      this.toggleEl.setAttribute('aria-expanded', false);
+    }
+
+    this.toggleEl.addEventListener('click', () => {
+      this.toggle();
+    })
+  }
+
+  toggle() {
+    const ariaExpandedStr = this.toggleEl.getAttribute('aria-expanded');
+    const ariaExpanded = ariaExpandedStr === 'true';
+    this.toggleEl.setAttribute('aria-expanded', `${!ariaExpanded}`);
+  }
+}
\ No newline at end of file
diff --git a/themes/answers-hitchhiker-theme/static/js/onReady.js b/themes/answers-hitchhiker-theme/static/js/onReady.js
new file mode 100644
index 0000000..4653a74
--- /dev/null
+++ b/themes/answers-hitchhiker-theme/static/js/onReady.js
@@ -0,0 +1,9 @@
+export default function onReady(cb) {
+  if (document.readyState === "complete"
+    || document.readyState === "loaded"
+    || document.readyState === "interactive") {
+    cb.bind(this)();
+  } else {
+    document.addEventListener('DOMContentLoaded', cb.bind(this));
+  }
+}
\ No newline at end of file