Rework the mobile navigation.

It should now work on browsers with javascript disabled.
We're using a nifty checkbox hack.

user/themes/textbook/css/custom.css

@@ -41,7 +41,8 @@ details summary {
 /****/
 
 /* Hotfix for https://github.com/getgrav/grav-theme-quark/issues/9 */
-/* Must be below 3 or mobile will glitch */
+/* Must be below 3 or mobile will glitch
+ */
 section#header { z-index: 2; }
 
 /* Little patch for the language selector, to center it vertically. */
@@ -84,18 +85,89 @@ iframe.geogebra {
     border: 1px dotted #a6a6a6;
 }
 
-/** Fix Mobile Navigation **/
+/** Fix Mobile Navigation -- OLD **/
 
-.mobile-container ul.treemenu-root li span.toggler {
-    line-height: 2.22rem;
-    font-size: 2.22rem;
-    padding: 0.92rem 0.1rem;
-    margin: 0;
+/*.mobile-container ul.treemenu-root li span.toggler {*/
+/*    line-height: 2.22rem;*/
+/*    font-size: 2.22rem;*/
+/*    padding: 0.92rem 0.1rem;*/
+/*    margin: 0;*/
+/*}*/
+
+/*.mobile-container ul.treemenu-root li a {*/
+/*    line-height: 2.22rem;*/
+/*    font-size: 2.22rem;*/
+/*    padding: 0.92rem 1.618rem;*/
+/*    margin: 0;*/
+/*}*/
+
+
+/** Mobile navigation without javascript ******************************************************************************/
+/** We're using the checkbox hack. **/
+
+.mobile-menu .button_container .top,
+.mobile-menu .button_container .middle,
+.mobile-menu .button_container .bottom
+{
+    z-index: 3;
+}
+
+#mobile-navigation-toggle {
+    cursor: pointer;
+    width: 42px;
+    height: 42px;
+    position: absolute;
+    right: 0.8em;
+    top: 0.8em;
+    z-index: 200;
+
+    opacity: 0;
+}
+
+.mobile-menu .button_container:hover { opacity: .95; }
+
+#mobile-navigation-toggle:checked ~ .mobile-menu .button_container { position: fixed; }
+
+#mobile-navigation-toggle:checked ~ .mobile-menu .button_container .top { transform: translateY(8px) translateX(0) rotate(45deg); background: #FFF; }
+
+#mobile-navigation-toggle:checked ~ .mobile-menu .button_container .middle { opacity: 0; background: #FFF; }
+
+#mobile-navigation-toggle:checked ~ .mobile-menu .button_container .bottom { transform: translateY(-8px) translateX(0) rotate(-45deg); background: #FFF; }
+
+#mobile-navigation-toggle:checked ~ .mobile-menu .button_container .overlay {
+    visibility: visible;
+    height: 100%;
+    opacity: .95;
 }
 
-.mobile-container ul.treemenu-root li a {
-    line-height: 2.22rem;
-    font-size: 2.22rem;
-    padding: 0.92rem 1.618rem;
+.mobile-menu details,
+.mobile-menu ul {
+    text-align: left;
+    word-break: break-word;
+
+    line-height: 1.8rem;
+    font-size: 1.8rem;
+
+    padding: 0;
     margin: 0;
 }
+
+.mobile-menu ul ul ul {
+    line-height: 1.4rem;
+    font-size: 1.4rem;
+}
+
+.mobile-menu li summary {
+    padding: .4em 0.05em .4em 0.4em;
+}
+.mobile-menu li > a {
+    padding: 0.2em 0 .2em 1.75em;
+    display: inline-block;
+}
+.mobile-menu ul {
+    padding-left: 0.33em;
+    list-style: none;
+}
+
+/**********************************************************************************************************************/
+

user/themes/textbook/templates/macros/macros-nav-details.html.twig

+{% macro nav_loop_as_details(page) %}
+  {% import _self as macros %}
+  {% for p in page.children.visible %}
+    {% set active_page = (p.active or p.activeChild) ? ' class="active"' : '' %}
+    {% if p.children.visible.count > 0 %}
+      <li>
+      <details>
+        <summary>
+          <a href="{{ p.url }}"{{ active_page }}>
+            {{ p.menu }}
+          </a>
+        </summary>
+        <ul>
+          {{ macros.nav_loop_as_details(p) }}
+        </ul>
+      </details>
+      </li>
+    {% else %}
+      <li>
+        <a href="{{ p.url }}"{{ active_page }}>
+          {{ p.menu }}
+        </a>
+      </li>
+    {% endif %}
+  {% endfor %}
+{% endmacro %}
+

user/themes/textbook/templates/partials/base.html.twig

@@ -28,8 +28,9 @@
     {% block javascripts %}
         {# TODO: ZEPTO JS PLS #}
         {% do assets.addJs('jquery', 101) %}
-        {% do assets.addJs('theme://js/jquery.treemenu.js', {group:'bottom'}) %}
-        {% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}
+{# Yes! We managed to remove all these crappy dependencies \o/ #}
+{#        {% do assets.addJs('theme://js/jquery.treemenu.js', {group:'bottom'}) %}#}
+{#        {% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}#}
     {% endblock %}
     {{ assets.js()|raw }}
 
@@ -71,11 +72,32 @@
                 </nav>
             </section>
         </section>
+
+        <input id="mobile-navigation-toggle" type="checkbox">
+
         <div class="mobile-menu">
-            <div class="button_container" id="toggle">
+            <div class="button_container" id="toggle" tabindex="0">
                 <span class="top"></span>
                 <span class="middle"></span>
                 <span class="bottom"></span>
+
+
+                <div class="mobile-container">
+                    <div class="overlay" id="overlay">
+                        <div class="mobile-logo">
+                            {% include 'partials/logo.html.twig' with {mobile: true} %}
+                        </div>
+{#                        <div class="button_container mobile-close-nav" tabindex="1">#}
+{#                            <span class="top"></span>#}
+{#                            <span class="middle"></span>#}
+{#                            <span class="bottom"></span>#}
+{#                        </div>#}
+                        <nav class="overlay-menu">
+{#                            {% include 'partials/navigation.html.twig' with {tree: true} %}#}
+                            {% include 'partials/navigation-as-details.html.twig' %}
+                        </nav>
+                    </div>
+                </div>
             </div>
         </div>
     {% endblock %}
@@ -101,16 +123,6 @@
         {% include 'partials/footer.html.twig' %}
     {% endblock %}
 
-    <div class="mobile-container">
-        <div class="overlay" id="overlay">
-            <div class="mobile-logo">
-                {% include 'partials/logo.html.twig' with {mobile: true} %}
-            </div>
-            <nav class="overlay-menu">
-                {% include 'partials/navigation.html.twig' with {tree: true} %}
-            </nav>
-        </div>
-    </div>
 
 {% block bottom %}
     {{ assets.js('bottom')|raw }}

user/themes/textbook/templates/partials/navigation-as-details.html.twig

+{% import 'macros/macros-nav-details.html.twig' as macros %}
+
+<ul>
+    {{ macros.nav_loop_as_details(pages) }}
+</ul>
+