Added plotly studio image to nav bar on the left and applied plotly styling

Author: daexs

mkdocs.yml

@@ -19,12 +19,17 @@ plugins:
 
 theme:
   name: "material"
+  custom_dir: "pages/overrides"
 
 markdown_extensions:
   - footnotes
   - pymdownx.snippets:
         base_path: ["docs/tmp"]
 
+extra_css:
+  - css/extra_css.css
+  - https://docs.plotly.com/css/plotly-style.css
+
 nav:
 - Event Reference: examples/plotlyjs-events.md
 - Fundamentals: 

pages/css/extra_css.css

@@ -0,0 +1,24 @@
+.md-nav--primary {
+    position: relative; 
+    display: flex; 
+    flex-direction: column;
+}
+
+.nav-bottom-image{
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    background: var(--md-default-bg-color);
+    padding: 30px 25px 0px 25px;
+    height: 12.1rem;
+}
+
+.nav-bottom-image img{
+    height: auto !important;
+    width: 100%;
+    object-fit: contain;
+}
+
+.nav-bottom-image a::after {
+  content: none !important;
+}

pages/overrides/main.html

@@ -0,0 +1,48 @@
+{% extends "base.html" %}
+
+{% block site_nav %}
+
+  <!-- Main navigation -->
+  {% if nav %}
+    {% if page and page.meta and page.meta.hide %}
+      {% set hidden = "hidden" if "navigation" in page.meta.hide %}
+    {% endif %}
+    <div
+      class="md-sidebar md-sidebar--primary"
+      data-md-component="sidebar"
+      data-md-type="navigation"
+      {{ hidden }}
+    >
+      <div class="md-sidebar__scrollwrap">
+        <div class="md-sidebar__inner">
+          {% include "partials/nav.html" %}
+        </div>
+
+        <div class="nav-bottom-image">
+            <a href="https://plotly.com/webinars/data-apps-publishing-playbook/?utm_medium=graphing_libraries&utm_campaign=plotly_publishing_playbook&utm_content=sidebar" target="_blank">
+                <img src="https://images.prismic.io/plotly-marketing-website-2/aNMW2J5xUNkB1CWg_PlotlyPublishingPlaybook.jpg?auto=format,compress" alt="plotly-studio-banner" type="image/avif">
+            </a>
+        </div>
+      </div>
+    </div>
+  {% endif %}
+
+  <!-- Table of contents -->
+  {% if not "toc.integrate" in features %}
+    {% if page and page.meta and page.meta.hide %}
+      {% set hidden = "hidden" if "toc" in page.meta.hide %}
+    {% endif %}
+    <div
+      class="md-sidebar md-sidebar--secondary"
+      data-md-component="sidebar"
+      data-md-type="toc"
+      {{ hidden }}
+    >
+      <div class="md-sidebar__scrollwrap">
+        <div class="md-sidebar__inner">
+          {% include "partials/toc.html" %}
+        </div>
+      </div>
+    </div>
+  {% endif %}
+{% endblock %}