doc: add logo inside the menubar

This is mainly to avoid the logo with a large
white space next to it as header.

Change-Id: I135b5f91b687b198750ae666b90696ea9e0a2424
Reviewed-by: Venugopal Shivashankar <Venugopal.Shivashankar@qt.io>
(cherry picked from commit afa216bb3145009b819db643a44f47b20d5ccd2d)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

2 files changed, 32 insertions, 19 deletions

diff --git a/sources/pyside6/doc/_templates/layout.html b/sources/pyside6/doc/_templates/layout.html
index 6ab1276a3..630fb9533 100644
--- a/sources/pyside6/doc/_templates/layout.html
+++ b/sources/pyside6/doc/_templates/layout.html
@@ -1,29 +1,45 @@
 {% extends "!layout.html" %}
 
-# Invert sidebars
 {%- block sidebar1 %}{{ sidebar() }}{%- endblock %}
 {%- block sidebar2 %}{%- endblock %}
 
+{% block sidebarlogo %}
+<div class="logo">
+  <a href="http://www.pyside.org">
+    <img alt="PySide" src="{{ pathto('_static/pysidelogo.png', 1) }}"/>
+  </a>
+</div>
+{% endblock %}
+
 {%- block header %}
 <div id="container">
-<div class="header">
+  <div class="header">
     <div class="header_container">
-        <div class="logo"><a href="http://www.pyside.org"><img alt="PySide" src="{{ pathto('_static/pysidelogo.png', 1) }}"/></a></div>
-        <div class="related">
-            <ul>
-                {%- block rootrellink %}
-                <li><a href="{{ pathto( 'index' ) }}">{{ shorttitle|e }}</a></li>
-                {%- endblock %}
-                {%- for parent in parents %}
-                <li>{{ reldelim1 }} <a href="{{ parent.link|e }}" {% if loop.last %}{{ accesskey("U") }}{% endif %}>{{ parent.title }}</a></li>
-                {%- endfor %}
-                {%- block relbaritems %} {% endblock %}
-            </ul>
-        </div>
+      <div class="related">
+        <ul>
+          {%- block rootrellink %}
+          <li><a href="{{ pathto( 'index' ) }}">{{ shorttitle|e }}</a></li>
+          {%- endblock %}
+          {%- for parent in parents %}
+          <li>{{ reldelim1 }} <a href="{{ parent.link|e }}" {% if loop.last %}{{ accesskey("U") }}{% endif %}>{{ parent.title }}</a></li>
+          {%- endfor %}
+          {%- block relbaritems %} {% endblock %}
+        </ul>
+      </div>
     </div>
-</div>
+  </div>
 {%- endblock -%}
 
+{%- block document %}
+  <div class="documentwrapper">
+    <div class="bodywrapper">
+      <div class="body" role="main">
+        {% block body %} {% endblock %}
+      </div>
+    </div>
+  </div>
+{% endblock %}
+
 {%- block footer %}
     <div class="footer">
     <a href="http://www.qt.io/"><img src="{{ pathto('_static/logo_qt.png', 1) }}" alt="Qt" border="0" /></a>
@@ -33,8 +49,5 @@
 </div>
 {%- endblock %}
 
-# No top relbar.
 {%- block relbar1 %}{%- endblock %}
-
-# No bottom relbar.
 {%- block relbar2 %}{%- endblock %}
diff --git a/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css b/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css
index c4767f57f..48c078017 100644
--- a/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css
+++ b/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css
@@ -1206,7 +1206,7 @@ div.multi-column div {
 .sphinxsidebar {
   position: -webkit-sticky;
   position: sticky;
-  top: 64px;
+  top: 0px;
   width: 200px;
   overflow: scroll;
   overflow-x: hidden;