[PHP API Reference] Fixed navigation on mobile view (#3298)

Author: mnocon

tools/php_api_ref/.phpdoc/template/components/header.html.twig

@@ -1,5 +1,8 @@
 <header class="md-header" data-md-component="header">
     <nav class="md-header__inner md-grid" aria-label="">
+        <label class="md-header__button md-icon" for="__drawer" aria-label="Open navigation">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
+        </label>
         {% include 'components/header-title.html.twig' %}
         {% include 'components/doc-switcher.html.twig' %}
         {% include 'components/version-switcher.html.twig' %}

tools/php_api_ref/.phpdoc/template/css/base.css.twig

@@ -31,9 +31,11 @@ body.menu-resizing {
     background-color: #306CBE;
 }
 
-.main_nav_content,
-.md-sidebar--primary {
-    width: 100%;
+@media only screen and (min-width: 76.1875em) {
+    .main_nav_content,
+    .md-sidebar--primary {
+        width: 100%;
+    }
 }
 
 .md-sidebar--primary {

tools/php_api_ref/.phpdoc/template/css/docs.switcher.css.twig

@@ -122,3 +122,9 @@
 .md-header__switcher .rst-other-versions dt {
     display: none;
 }
+
+@media only screen and (max-width: 44.9375em) {
+    .md-header__switcher:not(.push) {
+        display: none;
+    }
+}

tools/php_api_ref/.phpdoc/template/css/navigation.css.twig

@@ -1,17 +1,69 @@
 .main_nav {
     border-right: 1px solid var(--mid-grey);
-    margin-left: -15rem;
     display: flex;
     flex-shrink: 0;
 }
 
+@media only screen and (max-width: 76.1874em) {
+    .main_nav {
+        width: 0 !important;
+        border-right: none;
+    }
+
+    .main_nav .site-header,
+    .main_nav__resize-handler {
+        display: none;
+    }
+
+    .md-sidebar--primary .md-sidebar__scrollwrap {
+        overflow-y: auto;
+    }
+
+    /* Keep the desktop-style nav tree inside the drawer instead of
+       Material's layered sliding panels */
+    .md-nav--primary,
+    .md-nav--primary .md-nav {
+        position: static;
+        display: block;
+        height: auto;
+        z-index: auto;
+    }
+
+    .md-nav--primary .md-nav__item {
+        border-top: none;
+    }
+
+    .md-nav__toggle ~ .md-nav {
+        display: none;
+        opacity: 1;
+        transform: none;
+        transition: none;
+    }
+
+    .md-nav__toggle:checked ~ .md-nav,
+    .md-nav__toggle:indeterminate ~ .md-nav {
+        display: block;
+    }
+
+    .md-typeset h1,
+    .md-typeset h2,
+    .md-typeset h3,
+    .md-typeset h4 {
+        overflow-wrap: anywhere;
+    }
+
+    .md-typeset .method-parameters {
+        display: block;
+        overflow-x: auto;
+    }
+}
+
 .md-sidebar__scrollwrap {
     margin: 0;
 }
 
 @media only screen and (min-width: 76.1875em) {
     .main_nav {
-        margin-left: 0;
         position: sticky;
         top: 56px;
         height: calc(100vh - 56px);

tools/php_api_ref/.phpdoc/template/js/menu-resizer.js

@@ -25,7 +25,7 @@
     const setWidthOfSecondLevelMenu = () => {
         let secondLevelMenuWidth = getCookie('php-api:menu-width');
 
-        if (!secondLevelMenuWidth) {
+        if (!secondLevelMenuWidth || window.matchMedia('(max-width: 76.1875em)').matches) {
             return;
         }
 

tools/php_api_ref/.phpdoc/template/layout.html.twig

@@ -25,9 +25,12 @@
     <div class="popover popover--copied">Copied!</div>
 
     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
+    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
 
     {% include 'components/header.html.twig' %}
 
+    <label class="md-overlay" data-md-component="overlay" for="__drawer"></label>
+
     <div class="md-container" data-md-component="container">
         <main class="md-main" data-md-component="main">
             <div class="md-main__inner md-grid">