Add code and style for 'hamburger' menu nav

Ref #114 #126

web/themes/custom/geofresco/src/global/_layout.scss

@@ -62,3 +62,21 @@
 .node--type-people.node--view-mode-teaser {
   margin-bottom: 1rem;
 }
+
+// Main navigation, goes to code in page.html.twig
+details .burger-icon {
+  transition: transform 0.1s;
+  display: block;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: .25rem;
+  cursor: pointer;
+}
+
+details[open] .burger-icon {
+  transform: rotate(90deg);
+}
+
+summary {
+  list-style-type: none;
+}

web/themes/custom/geofresco/src/templates/layout/page.html.twig

@@ -24,6 +24,13 @@
   {{ page.navbar_branding }}
   {% endblock navbar_branding %}
   <nav class="navigation column">
+    <details>
+      <summary>
+        <div class="burger-icon"><svg aria-label="Navigation Menu" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0 4h24M0 12h24M0 20h24" stroke="black" stroke-width="2" />
+          </svg></div>
+      </summary>
+
     <div class="columns">
       {% block navbar_social %}
       {% if page.navbar_social %}
@@ -45,6 +52,8 @@
       </div>
       {% endif %}
     </div>
+
+    </details>
   </nav>
 </div>
 {% if is_front %}