add sidebar + sort modules

docs/reST/_static/sections.js

@@ -0,0 +1,38 @@
+function toggleSectionVisibility(section, message){
+	document.getElementById(section).hidden = ! document.getElementById(section).hidden;
+	if (document.getElementById(section).hidden === true){ // show
+		items = localStorage.getItem('hidden');
+		if (items !== null){
+			if (!(items.includes(section))){
+				items = items + section + '|';
+			}
+			localStorage.setItem('hidden', items);
+		} else {
+			localStorage.setItem('hidden', section + '|');
+		}
+		document.getElementById(section[0]).innerHTML = document.getElementById(section[0]).innerHTML.replace('▼', '▲');
+	} else {  // hide
+		items = localStorage.getItem('hidden');
+		if (items !== null){
+			if (items.includes(section)){
+				items = items.replace(section + '|', '');
+			}
+			localStorage.setItem('hidden', items);
+		}
+		document.getElementById(section[0]).innerHTML = document.getElementById(section[0]).innerHTML.replace('▲', '▼');
+	}
+}
+
+function toggleChecked(classname){
+    if (window.innerWidth <= 1100) {
+        el = document.getElementsByClassName(classname)[0];
+        console.log(el.id);
+        if (el.id !== 'clicked') {
+            el.id = 'clicked';
+            htmlElement.classList.add('clicked');
+        } else {
+            el.id = null;
+            htmlElement.classList.remove('clicked');
+        }
+    }
+}

docs/reST/_static/script.js → docs/reST/_static/theme.js

@@ -10,6 +10,7 @@ if (localStorage.getItem('theme') === null) {
 
 // Execute once the DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
+	  document.body.className = localStorage.getItem('theme');
     const search_buttons = document.querySelectorAll('.searchbar-button');
     const search_submit = document.querySelector('.searchbar-submit');
 
@@ -24,9 +25,14 @@ document.addEventListener('DOMContentLoaded', () => {
     theme_icons.forEach((icon) => {
         icon.addEventListener('click', () => {
             const theme = icon.getAttribute('data-theme');
-            htmlElement.classList.add('light-theme', 'dark-theme');
-            htmlElement.classList.remove(theme);
-            localStorage.setItem('theme', htmlElement.classList[0]);
-        });
+            if (theme === 'light-theme'){
+                new_theme = 'dark-theme';
+            } else {
+                new_theme = 'light-theme';
+            }
+            htmlElement.classList.replace(theme, new_theme);
+            localStorage.setItem('theme', new_theme);
+		 	      document.body.className = localStorage.getItem('theme');
+      });
     });
 });

docs/reST/ext/boilerplate.py

@@ -46,7 +46,8 @@ def setup(app):
     app.setup_extension("ext.indexer")
 
     # Add js files for theme changing in docs.
-    app.add_js_file("script.js")
+    app.add_js_file("theme.js")
+    app.add_js_file("sections.js")
 
     # Documents to leave untransformed by boilerplate
     app.add_config_value("boilerplate_skip_transform", [], "")

docs/reST/themes/classic/elements.html

@@ -4,12 +4,13 @@
 {%-   block relbar1 %}{# Do not want bar across the top #}{% endblock %}
 {%- endif %}
 
-{#- Classic header with Snakey on the left, page links on the right.
+{#- Classic header with Snakey on the left, page links on the sidebar.
  #}
 {%- macro header() %}
   <div class="header">
 	<div class="flex-container">
 	<div class="logo">
+      <img class="three-lines" src="{{ pathto('_static/three_lines.svg', 1) }}" width="24px" height="24px" onclick="toggleChecked('header');">
 	  <a href="{{ theme_home_uri }}">
 	    <img src="{{logo_url}}"/>
 	  </a>
@@ -18,34 +19,43 @@ <h5>pygame-ce documentation</h5>
 	<div class="pagelinks">
 	  <div class="top">
       <div class="nav-top-wrapper">
-        <a href="{{ theme_home_uri }}">Pygame-ce Home</a> ||
-        <a href="{{ pathto(master_doc) }}">Help Contents</a> ||
+        <a href="{{ pathto(master_doc) }}">Pygame-ce Home</a> <br>
         <a href="{{ pathto('genindex') }}">Reference Index</a>
       </div>
-      <div class="nav-theme-container">
-        <img class="theme-icon" data-theme="dark-theme" src="{{ pathto('_static/light-theme-icon.svg', 1) }}" width="24" height="24" alt="Light Theme Icon">
-        <img class="theme-icon" data-theme="light-theme" src="{{ pathto('_static/dark-theme-icon.svg', 1) }}" width="24" height="24" alt="Dark Theme Icon">
-      </div>
       <div class="searchbar-container">
+        <div class="nav-theme-container" style="margin-left: auto;display:inline;">
+            <img class="theme-icon" data-theme="dark-theme" src="{{ pathto('_static/light-theme-icon.svg', 1) }}" width="24" height="24" alt="Light Theme Icon">
+            <img class="theme-icon" data-theme="light-theme" src="{{ pathto('_static/dark-theme-icon.svg', 1) }}" width="24" height="24" alt="Dark Theme Icon">
+          </div>
         <form action="{{ pathto('search') }}" method="get" class="searchbar-form" style="display:inline;float:right;">
-          <input name="q" value="" type="text">
+          <input name="q" value="" type="text" placeholder="search..." style=":-webkit-border-radius: 20px;-moz-border-radius: 20px; border-radius: 20px;padding-left:1em;width: 10vw;">
           <img class="searchbar-button" src="{{ pathto('_static/searchbar-icon.svg', 1) }}" alt="Search">
           <input class="searchbar-submit" value="search" type="submit">
         </form>
       </div>
 	  </div>
-	  <hr style="color:black;border-bottom:none;border-style: dotted;border-bottom-style:none;">
+      <hr class="split">
+      <div id="Sections">
 {#-
 
-We render three sets of items based on how useful to most apps.
+We render those sections based on functionality.
+For example: if module is for drawing, we will render it in "Drawing/Surface modifying/Surface"
 
 #}
-{%- set basic = ['Color', 'display', 'draw', 'event', 'font', 'image', 'key', 'locals', 'mixer', 'mouse', 'music', 'pygame', 'Rect', 'Surface', 'time'] %}
-{%- set advanced = ['BufferProxy', 'freetype', 'gfxdraw', 'midi', 'PixelArray', 'pixelcopy', 'sndarray', 'surfarray', 'cursors', 'joystick', 'mask', 'math', 'sprite', 'transform'] %}
+{%- set drawing = ['draw', 'image', 'transform', 'Color', 'font', 'Surface', 'gfxdraw', 'sprite',
+      'PixelArray', 'pixelcopy', 'surfarray', 'BufferProxy', 'freetype'] %}
+
+{%- set window = ['display', 'cursors', 'time'] %}
+{%- set events = ['event', 'key', 'joystick', 'mouse', 'controller'] %}
+{%- set collisions = ['Rect', 'mask'] %}
+{%- set music = ['midi', 'music', 'mixer', 'sndarray'] %}
+
 {%- set hidden = ['Overlay', 'cdrom', 'sdl2_video', 'sdl2_controller'] %}
 {%-   if pyg_sections %}
-	  <p class="bottom"><b>Most useful stuff</b>:
-{%      set sep = joiner(" | \n") %}
+
+        <p class="bottom" onclick="toggleSectionVisibility('Window');"><span id="W">▼</span><b>Window</b><br></p>
+        <div class="bottom" id="Window">
+{%      set sep = joiner("<br>") %}
 {%-     for section in pyg_sections %}
 {%-       set docname = section['docname'] %}
 {%-       set simpledocname = docname.split('/')[-1] %}
@@ -54,14 +64,16 @@ <h5>pygame-ce documentation</h5>
 {%-       if name|lower != simpledocname %}
 {%-         set uri = uri + '#' + section['refid'] %}
 {%-       endif %}
-{%-       if name in basic %}
-{{- sep() }}	    <a href="{{ uri }}">{{ name }}</a>
+{%-       if name in window %}
+{{- sep() }}	    <a href="{{ uri }}" class="Window">{{ name }}</a>
 {%-       endif %}
 {%-     endfor %}
-	  </p>
+        </div>
 
-	  <p class="bottom"><b>Advanced stuff</b>:
-{%      set sep = joiner(" | \n") %}
+        <hr class="sub-split">
+        <p class="bottom" onclick="toggleSectionVisibility('Drawing');"><span id="D">▼</span><b>Drawing / Surface</b><br></p>
+        <div class="bottom" id="Drawing">
+{%      set sep = joiner("<br>") %}
 {%-     for section in pyg_sections %}
 {%-       set docname = section['docname'] %}
 {%-       set simpledocname = docname.split('/')[-1] %}
@@ -70,14 +82,16 @@ <h5>pygame-ce documentation</h5>
 {%-       if name|lower != simpledocname %}
 {%-         set uri = uri + '#' + section['refid'] %}
 {%-       endif %}
-{%-       if name in advanced %}
-{{- sep() }}	    <a href="{{ uri }}">{{ name }}</a>
+{%-       if name in drawing %}
+{{- sep() }}	    <a href="{{ uri }}" class="Drawing">{{ name }}</a>
 {%-       endif %}
 {%-     endfor %}
-	  </p>
+        </div>
 
-	  <p class="bottom"><b>Other</b>:
-{%      set sep = joiner(" | \n") %}
+        <hr class="sub-split">
+        <p class="bottom" onclick="toggleSectionVisibility('Events');"><span id="E">▼</span><b>Events/Input</b><br></p>
+        <div class="bottom" id="Events">
+{%      set sep = joiner("<br>") %}
 {%-     for section in pyg_sections %}
 {%-       set docname = section['docname'] %}
 {%-       set simpledocname = docname.split('/')[-1] %}
@@ -86,12 +100,66 @@ <h5>pygame-ce documentation</h5>
 {%-       if name|lower != simpledocname %}
 {%-         set uri = uri + '#' + section['refid'] %}
 {%-       endif %}
-{%-       if name not in basic and name not in advanced and name not in hidden %}
-{{- sep() }}	    <a href="{{ uri }}">{{ name }}</a>
+{%-       if name in events %}
+{{- sep() }}	    <a href="{{ uri }}" class="Events"> {{ name }}</a>
 {%-       endif %}
 {%-     endfor %}
-	  </p>
+        </div>
 
+        <hr class="sub-split">
+        <p class="bottom" onclick="toggleSectionVisibility('Collisions');"><span id="C">▼</span><b>Collisions</b><br></p>
+        <div class="bottom" id="Collisions">
+{%      set sep = joiner("<br>") %}
+{%-     for section in pyg_sections %}
+{%-       set docname = section['docname'] %}
+{%-       set simpledocname = docname.split('/')[-1] %}
+{%-       set name = section['fullname'].split('.')[-1] %}
+{%-       set uri = pathto(docname, 1) + file_suffix -%}
+{%-       if name|lower != simpledocname %}
+{%-         set uri = uri + '#' + section['refid'] %}
+{%-       endif %}
+{%-       if name in collisions %}
+{{- sep() }}	    <a href="{{ uri }}" class="Collisions">{{ name }}</a>
+{%-       endif %}
+{%-     endfor %}
+        </div>
+
+        <hr class="sub-split">
+        <p class="bottom" onclick="toggleSectionVisibility('Music');"><span id="M">▼</span><b>Music</b><br></p>
+        <div class="bottom" id="Music">
+{%      set sep = joiner("<br>") %}
+{%-     for section in pyg_sections %}
+{%-       set docname = section['docname'] %}
+{%-       set simpledocname = docname.split('/')[-1] %}
+{%-       set name = section['fullname'].split('.')[-1] %}
+{%-       set uri = pathto(docname, 1) + file_suffix -%}
+{%-       if name|lower != simpledocname %}
+{%-         set uri = uri + '#' + section['refid'] %}
+{%-       endif %}
+{%-       if name in music %}
+{{- sep() }}	    <a href="{{ uri }}" class="Music">{{ name }}</a>
+{%-       endif %}
+{%-     endfor %}
+        </div>
+
+        <hr class="sub-split">
+        <p class="bottom" onclick="toggleSectionVisibility('Other')"><span id="O">▼</span><b>Other</b><br></p>
+        <div class="bottom" id="Other">
+{%      set sep = joiner("<br>") %}
+{%-     for section in pyg_sections %}
+{%-       set docname = section['docname'] %}
+{%-       set simpledocname = docname.split('/')[-1] %}
+{%-       set name = section['fullname'].split('.')[-1] %}
+{%-       set uri = pathto(docname, 1) + file_suffix -%}
+{%-       if name|lower != simpledocname %}
+{%-         set uri = uri + '#' + section['refid'] %}
+{%-       endif %}
+{%-       if name not in window and name not in music and name not in drawing and name not in events and name not in collisions and name not in hidden %}
+{{- sep() }}	    <a href="{{ uri }}">{{ name }}</a>
+{%-       endif %}
+{%-     endfor %}
+        </div>
+      </div>
 
 {%-   endif  %}
 </div>
@@ -109,5 +177,15 @@ <h5>pygame-ce documentation</h5>
 
 
 {%- block relbaritems %}
-    <script type="text/javascript" src="https://www.pygame.org/comment/jquery.plugin.docscomments.js"></script>
+    <script type="text/javascript" src="https://www.pyg ame.org/comment/jquery.plugin.docscomments.js"></script>
+    <script type="text/javascript">
+      if (localStorage.getItem('hidden') !== null){
+        localStorage.getItem('hidden').split("|").forEach(element => {
+          if (document.getElementById(element) !== null) {
+            document.getElementById(element).hidden = true
+            document.getElementById(element[0]).innerHTML = document.getElementById(element[0]).innerHTML.replace('▼', '▲')
+          };
+        });
+      }
+    </script>
 {% endblock %}