Make the theme responsive

python_docs_theme/layout.html

@@ -1,46 +1,121 @@
 {% extends "classic/layout.html" %}
 
-{% block rootrellink %}
-    <li><img src="{{ pathto('_static/' + theme_root_icon, 1) }}" alt=""
-             style="vertical-align: middle; margin-top: -1px"/></li>
-    <li><a href="{{theme_root_url}}">{{theme_root_name}}</a>{{ reldelim1 }}</li>
-    {% if theme_root_include_title %}
-    <a href="{{ pathto('index') }}">{{ shorttitle }}</a>{{ reldelim1 }}
-    {% endif %}
-{% endblock %}
+{%- macro relbar() %}
+{# modified from sphinx/themes/basic/layout.html #}
+    <div class="related" role="navigation" aria-label="related navigation">
+      <h3>{{ _('Navigation') }}</h3>
+      <ul>
+          {%- for rellink in rellinks %}
+          <li class="right" {% if loop.first %}style="margin-right: 10px"{% endif %}>
+              <a href="{{ pathto(rellink[0])|e }}" title="{{ rellink[1]|striptags|e }}"
+                 {{ accesskey(rellink[2]) }}>{{ rellink[3] }}
+              </a>
+              {%- if not loop.first %}{{ reldelim2 }}{% endif %}
+          </li>
+          {%- endfor %}
+          {%- block rootrellink %}
+          <li><img src="{{ pathto('_static/py.svg', 1) }}" alt="python logo" style="vertical-align: middle; margin-top: -1px"/></li>
+          <li><a href="{{theme_root_url}}">{{theme_root_name}}</a>{{ reldelim1 }}</li>
+          <li class="switchers">
+            <div class="language_switcher_placeholder"></div>
+            <div class="version_switcher_placeholder"></div>
+          </li>
+          <li>
+              {% if theme_root_include_title %}
+              <a href="{{ pathto('index') }}">{{ shorttitle }}</a>{{ reldelim1 }}
+              {% endif %}
+          </li>
+          {%- endblock %}
+            {%- for parent in parents %}
+                <li class="nav-item nav-item-{{ loop.index }}"><a href="{{ parent.link|e }}" {% if loop.last %}{{ accesskey("U") }}{% endif %}>{{ parent.title }}</a>{{ reldelim1 }}</li>
+                {%- endfor %}
+                <li class="nav-item nav-item-this"><a href="{{ link|e }}">{{ title }}</a></li>
+            {% block relbaritems %}
+            {%- if pagename != "search" and builder != "singlehtml" and builder != "htmlhelp" %}
+                <li class="right">
+                    {{ searchbox() }}
+                    {{ reldelim2 }}
+                </li>
+            {%- endif %}
+            {% endblock %}
+      </ul>
+    </div>
+{%- endmacro %}
 
 {%- macro searchbox() %}
 {# modified from sphinx/themes/basic/searchbox.html #}
     {%- if builder != "htmlhelp" %}
-    <div class="inline-search" style="display: none" role="search">
+    <div class="inline-search" role="search">
         <form class="inline-search" action="{{ pathto('search') }}" method="get">
-          <input placeholder="{{ _('Quick search') }}" type="text" name="q" />
+          <input placeholder="{{ _('Quick search') }}" aria-label="{{ _('Quick search') }}" type="text" name="q" />
           <input type="submit" value="{{ _('Go') }}" />
           <input type="hidden" name="check_keywords" value="yes" />
           <input type="hidden" name="area" value="default" />
         </form>
     </div>
-    <script type="text/javascript">$('.inline-search').show(0);</script>
     {%- endif %}
 {%- endmacro %}
 
 {% block relbar1 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %}
 {% block relbar2 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %}
-{% block relbaritems %}
-    {%- if pagename != "search" and builder != "singlehtml" and builder != "htmlhelp" %}
-    <li class="right">
-        {{ searchbox() }}
-        {{ reldelim2 }}
-    </li>
-    {%- endif %}
-{% endblock %}
 
-{% block extrahead %}
+
+{%- block extrahead -%}
     <link rel="shortcut icon" type="image/png" href="{{ pathto('_static/' + theme_root_icon, 1) }}" />
-    {% if builder != "htmlhelp" %}
-    {% if not embedded %}<script type="text/javascript" src="{{ pathto('_static/copybutton.js', 1) }}"></script>{% endif %}
-    {% endif %}
+    {%- if builder != "htmlhelp" %}
+        {%- if not embedded %}
+            <script type="text/javascript" src="{{ pathto('_static/copybutton.js', 1) }}"></script>
+            <script type="text/javascript" src="{{ pathto('_static/menu.js', 1) }}"></script>
+        {%- endif -%}
+    {%- endif -%}
+    {{ super() }}
+{%- endblock -%}
+
+{%- block css -%}
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     {{ super() }}
+{%- endblock -%}
+
+{%- block body_tag %}
+{{ super() }}
+<div class="mobile-nav">
+    <input type="checkbox" id="menuToggler" class="toggler__input" aria-controls="navigation"
+           aria-pressed="false" aria-expanded="false" role="button" aria-label="{{ _('Menu')}}" />
+    <label for="menuToggler" class="toggler__label">
+        <span></span>
+    </label>
+    <nav class="nav-content" role="navigation">
+         <a href="{{ theme_root_url }}" class="nav-logo">
+             <img src="{{ pathto('_static/py.svg', 1) }}" alt="Logo"/>
+         </a>
+        <div class="version_switcher_placeholder"></div>
+        {%- if pagename != "search" and builder != "singlehtml" %}
+        <form id="searchbox" role="search" class="search" action="{{ pathto('search') }}" method="get">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="search-icon">
+                <path fill-rule="nonzero"
+                        d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 001.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 00-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 005.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="#444"></path>
+            </svg>
+            <input type="text" name="q" aria-label="{{ _('Quick search') }}"/>
+            <input type="submit" value="{{ _('Go') }}"/>
+        </form>
+        {%- endif %}
+    </nav>
+    <div class="menu-wrapper">
+        <nav class="menu" role="navigation" aria-label="main navigation">
+            <div class="language_switcher_placeholder"></div>
+            {%- if logo %}
+            <p class="logo">
+                <a href="{{ pathto('index') }}">
+                <img class="logo" src="{{ pathto('_static/' + logo, 1)|e }}" alt="Logo"/>
+                </a>
+            </p>
+            {%- endif %}
+            {%- for sidebartemplate in sidebars %}
+            {%- include sidebartemplate %}
+            {%- endfor %}
+        </nav>
+    </div>
+</div>
 {% endblock %}
 
 {% block footer %}

python_docs_theme/static/menu.js

@@ -0,0 +1,55 @@
+document.addEventListener('DOMContentLoaded', function () {
+
+    // Make tables responsive by wrapping them in a div and making them scrollable
+    const tables = document.querySelectorAll('table.docutils');
+    tables.forEach(function(table){
+        table.outerHTML = '<div class="responsive-table__container">' + table.outerHTML + '</div>'
+    });
+
+    const togglerInput = document.querySelector('.toggler__input');
+    const togglerLabel = document.querySelector('.toggler__label');
+    const sideMenu = document.querySelector('.menu-wrapper');
+    const menuItems = document.querySelectorAll('.menu')
+    const doc = document.querySelector('.document');
+    const body = document.querySelector('body');
+
+    function closeMenu() {
+        togglerInput.checked = false;
+        sideMenu.setAttribute("aria-expanded", 'false');
+        sideMenu.setAttribute('aria-hidden', 'true');
+        togglerLabel.setAttribute('aria-pressed', 'false');
+        body.style.overflow = 'visible';
+    }
+    function openMenu() {
+        togglerInput.checked = true;
+        sideMenu.setAttribute("aria-expanded", 'true');
+        sideMenu.setAttribute('aria-hidden', 'false');
+        togglerLabel.setAttribute('aria-pressed', 'true');
+        body.style.overflow = 'hidden';
+    }
+
+    // Close menu when link on the sideMenu is clicked
+    sideMenu.addEventListener('click', function (event) {
+        let target = event.target;
+        if (target.tagName.toLowerCase() !== 'a') return;
+        closeMenu();
+    })
+    // Add accessibility data when sideMenu is opened/closed
+    togglerInput.addEventListener('change', function (e) {
+        togglerInput.checked ? openMenu() : closeMenu();
+    });
+    // Make sideMenu links tabbable only when visible
+    for(let menuItem of menuItems) {
+        if(togglerInput.checked) {
+          menuItem.setAttribute('tabindex', '0');
+        } else {
+          menuItem.setAttribute('tabindex', '-1');
+        }
+    }
+    // Close sideMenu when document body is clicked
+    doc.addEventListener('click', function () {
+        if (togglerInput.checked) {
+            closeMenu();
+        }
+    })
+})