First pass at double header display

5 files changed, 199 insertions, 43 deletions

diff --git a/docs/_static/custom.js b/docs/_static/custom.js
index 94de08a0..9b3ed5bc 100644
--- a/docs/_static/custom.js
+++ b/docs/_static/custom.js
@@ -21,6 +21,10 @@ function openModal(modal) {
   modal.hidden = false;
 }
 
+function changeDocumentation(element) {
+  window.location = element.value;
+}
+
 function updateSetting(element) {
   localStorage.setItem(element.name, element.checked);
   if (element.name in settings) {
diff --git a/docs/_static/style.css b/docs/_static/style.css
index 2e6de304..3ea443c4 100644
--- a/docs/_static/style.css
+++ b/docs/_static/style.css
@@ -19,7 +19,12 @@ Historically however, thanks to:
 /* CSS variables would go here */
 :root {
   --font-family: 'Georgia', 'Yu Gothic', 'Noto Sans CJK JP Regular', serif;
-
+  --primary-accent: #0a0a0a;
+  --secondary-accent: #171717;
+  --primary-text: #fff;
+  --secondary-text: #fff;
+  --settings: #fff;
+  --settings-hover: #ccc;
   --main-background: #fff;
   --link-text: #2591c4;
   --link-hover-text: #0b3a44;
@@ -32,7 +37,12 @@ Historically however, thanks to:
   --nav-text: #444;
   --nav-hover-text: #444;
   --nav-header-text: #333;
-  --search-border: #ccc;
+  --search-border: #5a5a5c;
+  --search-background: #171717;
+  --search-text: #fff;
+  --search-focus: #3399ff;
+  --search-button: #b1b1b1;
+  --search-button-hover: #686868;
   --footer-text: #555;
   --footer-link: #444;
   --hr-border: #b1b4b6;
@@ -83,7 +93,6 @@ Historically however, thanks to:
   --nav-text: rgba(255,255,255,0.7);
   --nav-hover-text: rgba(255,255,255,0.5);
   --nav-header-text: rgba(255,255,255,0.87);
-  --search-border: #ccc;
   --footer-text: #555;
   --footer-link: #444;
   --hr-border: #b1b4b6;
@@ -161,9 +170,10 @@ body {
   min-height: 100%;
   grid-auto-rows: min-content auto min-content;
   grid-template-areas:
-    "h"
+    "n"
     "s"
     "c"
+    "h"
     "f";
 }
 
@@ -187,11 +197,40 @@ a:hover {
 
 header {
   grid-area: h;
-  font-size: 90%;
-  /* does not show up on mobile */
+  background-color: var(--main-background);
+  color: var(--primary-text);
+}
+
+header > nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+header > nav > a {
+  color: var(--primary-text);
+}
+
+.main-heading {
+  display: none;
+}
+
+.sub-header {
+  grid-area: n;
+  background-color: var(--secondary-accent);
+  color: var(--secondary-text);
+  /* not shown on mobile */
   display: none;
 }
 
+.sub-header > .settings {
+  color: var(--settings);
+}
+
+.sub-header > .settings:hover {
+  color: var(--settings-hover);
+}
+
 /* footer stuff */
 footer {
   grid-area: f;
@@ -276,16 +315,65 @@ aside h3 {
 
 /* search button stuff */
 
-.searchformwrapper > form input, button {
+.searchwrapper {
+  display: flex;
+  align-items: stretch;
+}
+
+.searchwrapper > input[type=search] {
+  font-family: "Roboto", Corbel, Avenir, "Lucida Grande", "Lucida Sans", sans-serif;
+  font-size: 1em;
+}
+
+.searchwrapper > input[type=search],
+.searchwrapper > button[type=submit] {
+  background-color: var(--search-background);
+  border: none;
+  color: var(--search-text);
+  padding: 0.5em;
+  min-height: 2.5em;
+  flex: 9;
+}
+
+.searchwrapper {
+  border-bottom: 1px solid var(--search-border);
+}
+
+.searchwrapper:focus-within {
+  border-bottom: 1px solid var(--search-focus);
+}
+
+/* .searchwrapper > input[type=search] {
   border: 1px solid var(--search-border);
-  padding: 0.25em;
-  flex-grow: 2;
+  border-right: none;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
 }
 
-.searchformwrapper > form button[type="submit"] {
+.searchwrapper > input[type=search]:focus,
+button[type=submit]:focus ~ input[type=search] {
+  border: 1px solid var(--search-focus);
+  border-right: none;
+} */
+
+.searchwrapper > button[type=submit] {
+  color: var(--search-button);
+  /* border: 1px solid var(--search-border); */
+  /* border-left: none; */
+  /* border-bottom-right-radius: 4px; */
+  /* border-top-right-radius: 4px; */
+  cursor: pointer;
+  flex: 1;
+}
+
+/* .searchwrapper > button[type=submit]:focus,
+input[type=search]:focus ~ button[type=submit] {
+  border: 1px solid var(--search-focus);
   border-left: none;
-  margin-right: 0.5em;
-  flex-grow: 8;
+} */
+
+.searchwrapper > button[type=submit]:hover {
+  background-color: var(--search-border);
 }
 
 /* main content area */
@@ -752,7 +840,7 @@ table.docutils tbody tr td ol.last {
 }
 
 /* hide the welcome text */
-div#welcome-to-discord-py > h1 {
+section#welcome-to-discord-py > h1 {
   display: none;
 }
 
@@ -773,14 +861,33 @@ div.code-block-caption {
   .main-grid {
     grid-template-areas:
       "h h h h h h"
+      "n n n n n n"
       "s c c c c c"
       "s f f f f f";
   }
 
   header {
+    background-color: var(--primary-accent);
+  }
+
+  header > nav {
+    justify-content: flex-end;
+  }
+
+  .main-heading {
+    margin-right: auto;
     display: unset;
   }
 
+  header > nav a:not(.main-heading) {
+    margin: 0 0.5em;
+  }
+
+  .sub-header {
+    display: flex;
+    align-items: center;
+  }
+
   aside {
     top: initial;
     position: initial;
@@ -792,10 +899,6 @@ div.code-block-caption {
     color: var(--nav-header-text);
   }
 
-  header > nav {
-    float: right;
-  }
-
   #sidebar {
     display: inline-block;
     position: sticky;
@@ -828,11 +931,39 @@ div.code-block-caption {
     /* sidebar takes up 20% of the inner area */
     grid-template-columns: repeat(16, 1fr);
     grid-template-areas:
-      "s s h h h h h h h h h h h h h h"
+      "h h h h h h h h h h h h h h h h"
+      "n n n n n n n n n n n n n n n n"
       "s s . . . c c c c c c c c . . ."
       "s s f f f f f f f f f f f f f f"
   }
 
+  header > nav {
+    margin-left: 18.75%;
+    margin-right: 18.75%;
+  }
+
+  .sub-header > label {
+    margin-left: 18.75%;
+    margin-right: 1em;
+  }
+
+  .sub-header > select {
+    margin-right: auto;
+  }
+
+  .sub-header > .settings {
+    margin-right: 18.75%;
+    margin-left: 1em;
+  }
+
+  .sub-header > .search {
+    width: 20%;
+  }
+
+  .sub-header .fa-cog {
+    font-size: 1.5em;
+  }
+
   main img {
     display: block;
     margin-left: auto;
diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html
index b7c472cf..0af79f91 100644
--- a/docs/_templates/layout.html
+++ b/docs/_templates/layout.html
@@ -53,43 +53,48 @@
 <body>
 {%- block header %}{% endblock %}
   <div class="main-grid">
-    {#- The relative links component #}
+    {#- The main navigation header #}
     <header class="grid-item">
       <nav>
-        <!--{%- for rellink in rellinks | reverse %}
-        <a href="{{ pathto(rellink[0])|e }}" title="{{ rellink[1]|striptags|e }}"
-           {{ accesskey(rellink[2]) }}>{{ rellink[3] }}</a> |
-        {%- endfor %}-->
-        <a title="settings" accesskey="S" onclick="openModal(settingsModal);"><i class='fas fa-cog'></i></a>
-        {#- No breadcrumbs. But if they're gonna appear they'll be here #}
+        <a href="{{ pathto(master_doc)|e }}" class="main-heading">discord.py</a>
+        <a href="https://github.com/Rapptz/discord.py">GitHub</a>
+        <a href="{{ discord_invite }}">{{ _('Discord') }}</a>
+        <a href="{{ pathto('faq') }}">FAQ</a>
+        {#- If we have more links we can put them here #}
       </nav>
     </header>
+    {#- The sub-header with search and extension related selection #}
+    <div class="sub-header grid-item">
+      <label for="documentation_select">{{ _('View Documentation For') }}</label>
+      <select id="documentation_select" onchange="changeDocumentation(this)">
+        {%- if pagename is prefixedwith 'ext/' %}
+        <option value="{{ pathto(master_doc)|e }}">discord</option>
+        {%- else %}
+        <option value="{{ pathto(pagename) }}" selected>discord</option>
+        {%- endif %}
+        {%- for ext, p in discord_extensions %}
+        <option value="{{ pathto(p + '/index')|e }}" {% if pagename is prefixedwith p %}selected{% endif %}>{{ ext }}</option>
+        {%- endfor %}
+      </select>
+      <form role="search" class="search" action="search.html" method="get">
+        <div class="searchwrapper">
+          <input type="search" name="q" placeholder="{{ _('Search documentation') }}" />
+          <button type="submit">
+            <i class="fas fa-search"></i>
+          </button>
+        </div>
+      </form>
+      <a accesskey="S" class="settings" onclick="openModal(settingsModal);"><i class='fas fa-cog'></i></a>
+    </div>
     {#- The sidebar component #}
     <aside class="grid-item">
       <span id="hamburger-toggle">
         <i class="fa fa-bars"></i>
       </span>
-      <span id="settings-toggle" onclick="openModal(settingsModal);">
+      <span id="settings-toggle" class="settings" onclick="openModal(settingsModal);">
         <i class='fas fa-cog'></i>
       </span>
       <div id="sidebar">
-        {#- This is manually unrolled from the original layout #}
-        <div id="searchbox" role="search">
-          <h3>Quick search</h3>
-          <div class="searchformwrapper">
-            <form class="search" action="search.html" method="get">
-              <input type="text" name="q" />
-              <button type="submit">
-                <i class="fas fa-search"></i>
-              </button>
-              <input type="hidden" name="check_keywords" value="yes" />
-              <input type="hidden" name="area" value="default" />
-            </form>
-          </div>
-        </div>
-        <script type="text/javascript">
-          $("#searchbox").show(0);
-        </script>
         {%- include "localtoc.html" %}
       </div>
     </aside>
diff --git a/docs/conf.py b/docs/conf.py
index 2becdfc8..6488f2d2 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -144,6 +144,14 @@ html_experimental_html5_writer = True
 # a list of builtin themes.
 html_theme = 'basic'
 
+html_context = {
+  'discord_invite': 'https://discord.gg/r3sSKJJ',
+  'discord_extensions': [
+    ('discord.ext.commands', 'ext/commands'),
+    ('discord.ext.tasks', 'ext/tasks'),
+  ],
+}
+
 # Theme options are theme-specific and customize the look and feel of a theme
 # further.  For a list of options available for each theme, see the
 # documentation.
@@ -326,3 +334,4 @@ texinfo_documents = [
 def setup(app):
   if app.config.language == 'ja':
     app.config.intersphinx_mapping['py'] = ('https://docs.python.org/ja/3', None)
+    app.config.html_context['discord_invite'] = 'https://discord.gg/nXzj3dg'
diff --git a/docs/extensions/builder.py b/docs/extensions/builder.py
index 4780bc28..96c7d0a5 100644
--- a/docs/extensions/builder.py
+++ b/docs/extensions/builder.py
@@ -42,6 +42,12 @@ class DPYStandaloneHTMLBuilder(StandaloneHTMLBuilder):
         else:
             self.handle_page('genindex', genindexcontext, 'genindex.html')
 
+
+def add_custom_jinja2(app):
+    env = app.builder.templates.environment
+    env.tests['prefixedwith'] = str.startswith
+    env.tests['suffixedwith'] = str.endswith
+
 def get_builder(app):
     """This is necessary because RTD injects their own for some reason."""
     try:
@@ -56,3 +62,4 @@ def get_builder(app):
 def setup(app):
     app.set_translator('html', DPYHTML5Translator, override=True)
     app.add_builder(get_builder(app), override=True)
+    app.connect('builder-inited', add_custom_jinja2)