Scale and toggle menu correctly

frontend/templates/base.html

@@ -18,11 +18,10 @@
 
     <script type="text/javascript" src="{{ jquery_home }}"></script>
     <script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
-    <script type="text/javascript" src="/static/js/sitewide1.js"></script>
+    <script type="text/javascript" src="/static/scss/foundation/dist/js/foundation.js"></script>
     <script type="text/javascript" src="/static/js/watermark_init.js"></script>
     <script type="text/javascript" src="/static/js/watermark_change.js"></script>
-    <script type="text/javascript" src="/static/scss/foundation/dist/js/foundation.js"></script>
-    <script defer type="text/javascript" src="/static/js/initialize-foundation.js"></script>
+    <script defer type="text/javascript" src="/static/js/sitewide1.js"></script>
     {% block extra_js %}
     {% endblock %}
 	{% if show_langs %}
@@ -103,9 +102,14 @@
             {% endblock %}
         </div>
         <div id="header-menu">
+            <label for="menu-drilldown-box" toggle-header-menu>
                 <i class="fa fa-bars"></i>
-            <ul class="vertical menu drilldown" data-drilldown>
-              <li><a href="#">One</a></li>
+            </label>
+            <div class="top-menu" style="visibility: hidden;">
+                <ul class="vertical menu drilldown" data-drilldown >
+                    <label for="menu-drilldown-box">
+                        <li toggle-header-menu><a href="#">Back</a></li>
+                    </label>
                 <li>
                     <a href="#">Two</a>
                     <ul class="menu vertical nested">
@@ -120,6 +124,7 @@
                 </ul>
             </div>
         </div>
+    </div>
 
 {% block news %}
 {% endblock %}

static/js/initialize-foundation.js

@@ -1,5 +0,0 @@
-'use strict';
-
-document.querySelectorAll('[data-drilldown]').forEach(element => {
-    new Foundation.Drilldown($j(element), {});
-});

static/js/sitewide1.js

@@ -82,4 +82,21 @@ $j(document).ready(function() {
     $j('#i_haz_notifications_badge').click(function() {
         event.stopPropagation();
     });
+
+    $j('[toggle-header-menu]').click(function () {toggleVisibility('.top-menu')})
+
+    function toggleVisibility(selector) {
+        var element = document.querySelector(selector);
+        element.style.visibility = element.style.visibility === 'hidden' ? 'visible' : 'hidden';
+    }
+
+    // Initialize foundation
+    document.querySelectorAll('[data-drilldown]').forEach(element => {
+        new Foundation.Drilldown($j(element), {});
+    });
+
+    document.querySelectorAll('[data-dropdown-menu]').forEach(element => {
+        new Foundation.DropdownMenu($j(element), {});
+    });
+
 });

static/scss/global.scss

@@ -1,5 +1,6 @@
 @import 'settings/settings';
 @import 'foundation';
+@import 'variables';
 @include foundation-everything;
 
 @include breakpoint(small only) {
@@ -7,3 +8,26 @@
         display: none;
     }
 }
+
+.top-menu {
+    position: absolute;
+    background-color: $background-body;
+    box-sizing: border-box;
+}
+
+@include breakpoint (small down) {
+    .top-menu {
+        height: 100vh;
+        width: 100vw;
+        top: 0;
+        left: 0;
+    }
+}
+
+@include breakpoint (medium) {
+    .top-menu {
+        width: 143px;
+        margin-left: -106px;
+        border: 1px solid $gray;
+    }
+}