Support navbar images

.github/CHANGELOG.md

@@ -1,10 +1,22 @@
-## Release 0.4.0 (development release)
+## Release 0.3.1 (development release)
+
+### Improvements
+
+* Added support for images in navbar links. [#](https://github.com/XanaduAI/xanadu-sphinx-theme/pull/)
+
+### Bug fixes
+
+- Fixes a bug where the navbar would incorrectly display a drop shadow
+  with small screen widths when the global TOC was active.
+  [#20](https://github.com/XanaduAI/xanadu-sphinx-theme/pull/20)
 
 ### Contributors
 
 This release contains contributions from (in alphabetical order):
 
-# Release 0.3.0
+[Josh Izaac](https://github.com/josh146).
+
+### Release 0.3.0
 
 ### Improvements
 
@@ -43,7 +55,7 @@ This release contains contributions from (in alphabetical order):
 [Mikhail Andrenkov](https://github.com/Mandrenkov),
 [Josh Izaac](https://github.com/josh146).
 
-# Release 0.2.1
+## Release 0.2.1
 
 ### Improvements
 
@@ -57,7 +69,7 @@ This release contains contributions from (in alphabetical order):
 
 [Mikhail Andrenkov](https://github.com/Mandrenkov)
 
-# Release 0.2.0
+## Release 0.2.0
 
 ### New features since last release
 
@@ -72,7 +84,7 @@ This release contains contributions from (in alphabetical order):
 [Mikhail Andrenkov](https://github.com/Mandrenkov),
 [Josh Izaac](https://github.com/josh146).
 
-# Release 0.1.0
+## Release 0.1.0
 
 ### New features since last release
 

README.rst

@@ -65,6 +65,8 @@ Once installed, simply add or modify the following variables of your Sphinx
             {
                 "name": "Tutorials",
                 "href": "https://example.com/tutorials",
+                "img": "_static/tutorial.png",
+                "img_width": "30px",
             },
             {
                 "name": "Install",
@@ -147,7 +149,9 @@ The following options customize the appearance of the navigation bar.
 
 ``navbar_left_links``
     Links on the LHS of the navigation bar in the form of a list of dictionaries
-    with the ``"name"``, ``"href"``, and optionally, ``"active"`` keys.
+    with the ``"name"``, ``"href"``, and optionally, ``"active"`` keys. In addition,
+    the ``"img"`` key can be used to specify an image for the navbar link,
+    alongside ``"img_width"`` to specify the width of the image.
 
 ``navbar_right_links``
     Links on the RHS of the navigation bar in the form of a list of dictionaries

doc/conf.py

@@ -104,7 +104,10 @@
     # "navbar_home_link": "https://pennylane.ai",
     "navbar_left_links": [
         {
+            # revert this before merging
             "name": "Blog",
+            "img": "_static/teleport.png",
+            "img_width": "30px",
             "href": "javascript:void(0);",
         },
         {

xanadu_sphinx_theme/header.html

@@ -10,7 +10,15 @@ <h1 id="title">{{ theme_navbar_name }}</h1>
   {% endif %}
 {%- endmacro %}
 
-{% macro hover_toc(name, href, class="", active=False) %}
+{% macro render_navbar_link(name, img=None, width=None) %}
+  {% if img %}
+    <img src="{{ pathto(img, 1) }}" {% if width %}width="{{ width }}" {% endif %} /> {{ name}}
+  {% else %}
+    {{ name }}
+  {% endif %}
+{% endmacro %}
+
+{% macro hover_toc(name, href, class="", active=False, img=None, width=None) %}
   {# Creates a navbar entry that supports a hover-enabled ToC #}
   <li class="nav-item dropdown {{ 'active' if active else '' }}">
       <a
@@ -21,7 +29,7 @@ <h1 id="title">{{ theme_navbar_name }}</h1>
         data-mdb-toggle="dropdown"
         aria-expanded="false"
       >
-      {{ name }}
+        {{ render_navbar_link(name, img, width) }}
     </a>
     <div class="sidebar-toc dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
       {{ toctree(maxdepth=1, collapse=True, includehidden=True) }}
@@ -69,17 +77,21 @@ <h1 id="title">{{ theme_navbar_name }}</h1>
         {% if link.active %}
           {% if link.name in dropdown_link %}
             {# The active navbar link provides a hover TOC #}
-            {{ hover_toc(link.name, link.href, "", True) }}
+            {{ hover_toc(link.name, link.href, "", True, link.img, link.img_width) }}
           {% else %}
             <li class="nav-item active">
-              <a class="nav-link" href="{{ pathto(link.href, 1) }}">{{ link.name }}</a>
+              <a class="nav-link" href="{{ pathto(link.href, 1) }}">
+                {{ render_navbar_link(link.name, link.img, link.img_width) }}
+              </a>
               <span class="sr-only">(current)</span>
             </li>
           {% endif %}
 
         {% else %}
           <li class="nav-item">
-            <a class="nav-link" href="{{ pathto(link.href, 1) }}">{{ link.name }}</a>
+            <a class="nav-link" href="{{ pathto(link.href, 1) }}">
+                {{ render_navbar_link(link.name, link.img, link.img_width) }}
+            </a>
           </li>
         {% endif %}
       {% endfor %}

xanadu_sphinx_theme/static/xanadu.css_t

@@ -1662,6 +1662,95 @@ footer.page-footer .footer-copyright {
 
 }
 
+/* Navigation Bar
+----------------------------------------------------------------------------- */
+
+.section::before {
+  content: "";
+  display: block;
+  height: 50px;
+  margin: -70px 0 0;
+}
+
+.navbar {
+  background-color: white;
+  z-index: 10000;
+  box-shadow: -1px 14px 30px -20px rgba(0, 0, 0, 0.3) !important;
+}
+
+.navbar li.dropdown {
+  list-style-type: none;
+}
+
+.navbar li:hover>.dropdown-menu {
+  display: block;
+}
+
+.navbar-brand {
+  padding: 0px;
+}
+
+.navbar-nav {
+  padding-bottom: 1px;
+  padding-left: 30px;
+}
+
+.navbar .navbar-nav>li {
+  transition-duration: 0s;
+  margin-left: 20px;
+  font-size: initial;
+  color: black;
+  font-family: 'Quicksand', 'Roboto', sans-serif !important;
+  margin-bottom: -9px;
+  border-bottom: 3px solid;
+  border-bottom-color: white;
+  font-weight: 500;
+}
+
+.nav-item:hover,
+.nav-item.active {
+  position: relative;
+}
+
+.nav-item:hover:after,
+.nav-item.active:after {
+  border-bottom: 3px solid;
+  content: "";
+  border-bottom-color: {{ theme_border_colour }} !important;
+  position: absolute;
+  bottom: -3px;
+  width: 80%;
+  left: 10%;
+}
+
+.navbar.navbar-light .breadcrumb .nav-item .nav-link, .navbar.navbar-light .navbar-nav .nav-item .nav-link {
+  color: #000;
+  transition: 0s;
+}
+
+.nav-link:hover {
+  color: rgba(0, 0, 0, .7) !important;
+}
+
+.navbar.navbar-light .breadcrumb .nav-item.active>.nav-link, .navbar.navbar-light .navbar-nav .nav-item.active>.nav-link {
+  background-color: inherit !important;
+}
+
+.card {
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .05), 0 2px 25px 2px rgba(0, 0, 0, .05) !important;
+  border: 0;
+  border-radius: 10px !important;
+  transition-duration: 0.4s;
+  background-color: white;
+}
+
+.card:hover {
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .05), 0 2px 25px 2px rgba(0, 0, 0, .2) !important;
+  border: 0;
+  transition-duration: 0.4s;
+  border-radius: 10px !important;
+}
+
 /* Small Screen Styles
 ----------------------------------------------------------------------------- */
 
@@ -1856,10 +1945,12 @@ footer.page-footer .footer-copyright {
 }
 
 @media screen and (max-width: 968px) {
+  {% if theme_toc_global %}
   .navbar {
     box-shadow: none !important;
     border-bottom: 1px #ddd solid;
   }
+  {% endif %}
 
   .nav-item.active {
     font-weight: bold;
@@ -1926,10 +2017,12 @@ footer.page-footer .footer-copyright {
     display: none;
   }
 
+  {% if theme_toc_global %}
   .navbar {
     box-shadow: none !important;
     border-bottom: 1px #ddd solid;
   }
+  {% endif %}
 
   #left-column {
     box-shadow: none !important;
@@ -1997,95 +2090,6 @@ footer.page-footer .footer-copyright {
   color: {{ theme_text_accent_colour }};
 }
 
-/* Navigation Bar
------------------------------------------------------------------------------ */
-
-.section::before {
-  content: "";
-  display: block;
-  height: 50px;
-  margin: -70px 0 0;
-}
-
-.navbar {
-  background-color: white;
-  z-index: 10000;
-  box-shadow: -1px 14px 30px -20px rgba(0, 0, 0, 0.3) !important;
-}
-
-.navbar li.dropdown {
-  list-style-type: none;
-}
-
-.navbar li:hover>.dropdown-menu {
-  display: block;
-}
-
-.navbar-brand {
-  padding: 0px;
-}
-
-.navbar-nav {
-  padding-bottom: 1px;
-  padding-left: 30px;
-}
-
-.navbar .navbar-nav>li {
-  transition-duration: 0s;
-  margin-left: 20px;
-  font-size: initial;
-  color: black;
-  font-family: 'Quicksand', 'Roboto', sans-serif !important;
-  margin-bottom: -9px;
-  border-bottom: 3px solid;
-  border-bottom-color: white;
-  font-weight: 500;
-}
-
-.nav-item:hover,
-.nav-item.active {
-  position: relative;
-}
-
-.nav-item:hover:after,
-.nav-item.active:after {
-  border-bottom: 3px solid;
-  content: "";
-  border-bottom-color: {{ theme_border_colour }} !important;
-  position: absolute;
-  bottom: -3px;
-  width: 80%;
-  left: 10%;
-}
-
-.navbar.navbar-light .breadcrumb .nav-item .nav-link, .navbar.navbar-light .navbar-nav .nav-item .nav-link {
-  color: #000;
-  transition: 0s;
-}
-
-.nav-link:hover {
-  color: rgba(0, 0, 0, .7) !important;
-}
-
-.navbar.navbar-light .breadcrumb .nav-item.active>.nav-link, .navbar.navbar-light .navbar-nav .nav-item.active>.nav-link {
-  background-color: inherit !important;
-}
-
-.card {
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .05), 0 2px 25px 2px rgba(0, 0, 0, .05) !important;
-  border: 0;
-  border-radius: 10px !important;
-  transition-duration: 0.4s;
-  background-color: white;
-}
-
-.card:hover {
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .05), 0 2px 25px 2px rgba(0, 0, 0, .2) !important;
-  border: 0;
-  transition-duration: 0.4s;
-  border-radius: 10px !important;
-}
-
 
 /* Main cards */
 /*----------------------------------------------------------------------------*/