Update footer and navbar to match PennyLane website (#40)

* Add and modify theme variables to account for new PennyLane footer

* Update footer styling to match new PennyLane footer

* Add theme variables for footer icon and social icon colour

* Fix silent errors while loading custom reST directives

* Update year of copyright

* Add new theme variables and update existing descriptions

* Rename 'socials' to 'social icons'

* Update navbar styling to match new PennyLane navbar

* Remove deprecated `toc_hover` theme option

* Bump version to `0.4.0`

* Update wording in changelog message

* Update PR number in changelog

* Remove one-second delay before closing navbar dropdown

* Restore navbar dropdown delay but prevent multiple expansions

* Fix layout discrepencies between PennyLane website

* Ensure external links open in a new tab or window

* Fix compatibility issues with Firefox

* Update hover colour of LHS navbar links

* Update hover colour of LHS navbar chevrons

* Remove link to Xanadu Cloud in footer

* Use object instead of array to store timer pairs

* Update hover colour of footer links

* Keep underline in footer tagline on hover

Author: Mandrenkov

.github/CHANGELOG.md

@@ -1,10 +1,17 @@
-## Release 0.4.0 (development release)
+## Release 0.4.0 (current release)
+
+### Improvements
+
+* Updated the navbar and footer configuration and styles to match the PennyLane website.
+  [#40](https://github.com/XanaduAI/xanadu-sphinx-theme/pull/40)
 
 ### Contributors
 
 This release contains contributions from (in alphabetical order):
 
-## Release 0.3.7 (current release)
+[Mikhail Andrenkov](https://github.com/Mandrenkov).
+
+## Release 0.3.7
 
 ### Improvements
 

README.rst

@@ -120,7 +120,7 @@ the ``html_theme_options`` dictionary in your ``conf.py`` file.
 
 ``google_analytics_tracking_id``
     Google Analytics tracking ID to enable website analytics.
-    
+
 ``github_repo``
     The GitHub organization and repository associated with the documentation. E.g.,
     for a GitHub repository https://github.com/Organization/repo, this should be
@@ -155,21 +155,22 @@ 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. 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.
+    with the ``"name"``, ``"href"``, and optionally, ``"external"`` and
+    ``"dropdown"`` keys.
 
-``navbar_right_links``
-    Links on the RHS of the navigation bar in the form of a list of dictionaries
-    with the ``"name"`` and ``"href"`` keys.
+    The ``"external"`` key only determines if an "external link" icon should be
+    displayed next to the name of the link in the navbar. Otherwise, the value
+    of the ``"dropdown"`` key is another list of dictionaries of the same form
+    (except for the ``"dropdown"`` key) and specifies the links which should be
+    displayed in a dropdrown from the current link.
 
-Footer
-------
-
-The following options customize the appearance of the footer.
+    In addition, the ``"img"`` key can be used to specify an image to replace
+    the navbar link, alongside ``"img_width"`` to specify the width of the image.
 
-``extra_copyrights``
-    List of extra copyright notices to place in the footer.
+``navbar_right_links``
+    Links on the RHS of the navigation bar in the form of a list of dictionaries
+    with the ``"name"``, ``"href"``, and optionally, ``"icon"`` keys. If a link
+    does not have an ``"icon"`` key, it will be displayed as a solid button.
 
 Table of contents
 -----------------
@@ -184,11 +185,6 @@ The following options customize the table of contents.
     Whether to show the global table of contents by default via the left sidebar.
     If ``False``, then the left sidebar will be disabled.
 
-``toc_hover``
-    Whether hovering over the active navbar link (or navbar logo if there is
-    no active navbar link) will show the global table of contents as a dropdown.
-    Only applies if ``toc_global=False``.
-
 ``toc_subset``
     If set to ``True``, and the current page has no local table of contents,
     the right-hand table of contents will instead display the current subset
@@ -203,9 +199,25 @@ The following options customize the table of contents.
 Footer
 ------
 
+
+The following options customize the appearance of the footer.
+
+``extra_copyrights``
+    List of extra copyright notices to place in the footer.
+
 ``footer_about``
-    A dictionary of the form ``{"title": ..., "description": ...}`` that specifies
-    the 'About' section of the footer. Set to an empty dictionary to remove.
+    A dictionary of the form
+
+    .. code-block:: python
+
+        "footer_about": {
+            "title": "Title",
+            "icon": "https://...",
+            "href": "https://...",
+            "description": "Description"
+        }
+
+    that specifies the 'About' section of the footer.
 
 ``footer_links``
     A list of dictionaries of the form
@@ -235,13 +247,12 @@ Footer
     that specifies footer links. Each top-level dictionary in the list is a
     separate titled column. Set to an empty list to remove.
 
-
-``footer_socials``
+``footer_social_icons``
     A list of dictionaries of the form
 
     .. code-block:: python
 
-        "footer_socials": [
+        "footer_social_icons": [
             {
                 "icon": "fab fa-twitter",
                 "href": "https://twitter.com/xanaduai"
@@ -256,10 +267,45 @@ Footer
     specifying social media icons. ``icon`` should correspond to a FontAwesome5 icon.
     Set to an empty list to remove.
 
-``footer_tagline``
-    A dictionary of the form ``{"text": "Some text", "href": "https://..."}`` specifying
-    a tagline hyperlink that appears underneath the social media icons. Set to an
-    empty dictionary to remove.
+``footer_taglines``
+    A list of dictionaries of the form
+
+    .. code-block:: python
+
+        "footer_taglines": [
+            {
+                "text": "Some text",
+                "href": "https://..."
+            },
+            {
+                "icon": "Some more text",
+                "href": "https://..."
+            },
+            ...
+        ]
+
+    specifying tagline hyperlinks that appear underneath the social media icons.
+    Set to an empty list to remove.
+
+``footer_policies``
+    A list of dictionaries of the form
+
+    .. code-block:: python
+
+        "footer_policies": [
+            {
+                "text": "Some text",
+                "href": "https://..."
+            },
+            {
+                "icon": "Some more text",
+                "href": "https://..."
+            },
+            ...
+        ]
+
+    specifying policy hyperlinks that appear at the bottom of the footer. Set to
+    an empty list to remove.
 
 Style Colours
 -------------
@@ -278,6 +324,9 @@ These should be fully qualified CSS color specifiers such as ``#004B6B`` or
     Colours of the "Next" and "Previous" navigation buttons located at the
     bottom of most pages.
 
+``social_icon_colour``
+    Colour of the social icons.
+
 ``table_header_background_colour``
     Background colour of table headers.
 
@@ -287,6 +336,9 @@ These should be fully qualified CSS color specifiers such as ``#004B6B`` or
 ``toc_marker_colour``
     Colour of the marker beside the current ToC entry.
 
+``toc_mobile_heading_colour`` and ``toc_mobile_heading_background_colour``
+    Text and background colours of the mobile ToC heading.
+
 .. configuration-end-inclusion-marker-do-not-remove
 
 Directives

doc/conf.py

@@ -19,7 +19,7 @@
 # -- Project information -----------------------------------------------------
 
 project = 'Xanadu Sphinx Theme'
-copyright = '2022, Xanadu Quantum Technologies'
+copyright = '2023 | Xanadu | All rights reserved'
 author = 'Xanadu Inc.'
 
 # The version info for the project you're documenting, acts as replacement for
@@ -101,28 +101,38 @@
 html_theme_options = {
     "navbar_name": "Xanadu Sphinx Theme",
     "navbar_logo_colour": "#f48fb1",
-    # "navbar_home_link": "https://pennylane.ai",
     "navbar_left_links": [
-        {
-            "name": "Blog",
-            "href": "javascript:void(0);",
-        },
         {
             "name": "Search",
             "href": "search.html",
         },
         {
             "name": "Documentation",
             "href": "index.html",
-            "active": True,
-        }
+            "dropdown": [
+                {
+                    "name": "Getting Started",
+                    "href": "started.html",
+                },
+                {
+                    "name": "GitHub",
+                    "href": "https://github.com/XanaduAI/xanadu-sphinx-theme",
+                    "external": True,
+                }
+            ]
+        },
+        {
+            "name": "Support",
+            "href": "https://discuss.pennylane.ai",
+            "external": True,
+        },
     ],
     "navbar_right_links": [
         {
             "name": "GitHub",
             "href": "https://github.com/XanaduAI/xanadu-sphinx-theme",
-            "icon": "fab fa-github",
-        },
+            "icon": "bx bxl-github",
+        }
     ],
     "extra_copyrights": [
         "Any extra copyrights can be added here."
@@ -131,11 +141,13 @@
     "prev_next_button_colour": "#f48fb1",
     "prev_next_button_hover_colour": "#ec407a",
     "table_header_background_colour": "#f8bbd0",
+    "social_icon_colour": "#ec407a",
     "text_accent_colour": "#f48fb1",
     "toc_marker_colour": "#f48fb1",
+    "toc_mobile_heading_colour": "#ec407a",
+    "toc_mobile_heading_background_colour": "#fcd9e5",
     "toc_overview": True,
     "toc_global": True,
-    "toc_hover": False,
     "relations": True
 }
 

xanadu_sphinx_theme/__init__.py

@@ -40,7 +40,7 @@ def setup(app):
     app.add_html_theme("xanadu", str(cwd))
 
     # set default footer sections
-    for section in ["about", "links", "socials", "tagline"]:
+    for section in ["about", "links", "policies", "social_icons", "taglines"]:
         if f"footer_{section}" not in app.config["html_theme_options"]:
             app.config["html_theme_options"][f"footer_{section}"] = XANADU_FOOTER[
                 f"footer_{section}"
@@ -63,6 +63,8 @@ def setup(app):
 XANADU_FOOTER = {
     "footer_about": {
         "title": "Xanadu",
+        "icon": "_static/xanadu_logo.svg",
+        "href": "https://xanadu.ai",
         "description": """\
         Located in the heart of downtown Toronto, we've brought together
         exceptional minds from around the world to build quantum computers
@@ -135,13 +137,18 @@ def setup(app):
                     "name": "Home",
                     "href": "https://xanadu.ai/",
                 },
-                {"name": "About", "href": "https://xanadu.ai/about/"},
+                {
+                    "name": "About",
+                    "href": "https://xanadu.ai/about/",
+                },
                 {
                     "name": "Hardware",
                     "href": "https://xanadu.ai/photonics",
                 },
-                {"name": "Careers", "href": "https://xanadu.ai/careers/"},
-                {"name": "Cloud", "href": "https://cloud.xanadu.ai"},
+                {
+                    "name": "Careers",
+                    "href": "https://xanadu.ai/careers/",
+                },
                 {
                     "name": "Forum",
                     "href": "https://discuss.pennylane.ai/",
@@ -153,19 +160,37 @@ def setup(app):
             ],
         },
     ],
-    "footer_socials": [
-        {"icon": "fab fa-twitter", "href": "https://twitter.com/xanaduai"},
-        {"icon": "fab fa-github", "href": "https://github.com/XanaduAI"},
-        {"icon": "fab fa-linkedin-in", "href": "https://linkedin.com/company/xanaduai/"},
-        {"icon": "fab fa-discourse", "href": "https://discuss.pennylane.ai"},
+    "footer_social_icons": [
+        {
+            "icon": "bx bxl-twitter",
+            "href": "https://twitter.com/xanaduai",
+        },
+        {
+            "icon": "bx bxl-github",
+            "href": "https://github.com/XanaduAI",
+        },
+        {
+            "icon": "bx bxl-linkedin",
+            "href": "https://linkedin.com/company/xanaduai/",
+        },
+        {
+            "icon": "bx bxl-discourse",
+            "href": "https://discuss.pennylane.ai",
+        },
         {
-            "icon": "fab fa-slack",
+            "icon": "bx bxl-slack",
             "href": "https://u.strawberryfields.ai/slack",
         },
-        {"icon": "fas fa-rss", "href": "https://xanadu.ai/blog"},
+        {
+            "icon": "bx bx-rss",
+            "href": "https://xanadu.ai/blog",
+        },
     ],
-    "footer_tagline": {
-        "text": "Stay updated with our newsletter",
-        "href": "https://xanadu.us17.list-manage.com/subscribe?u=725f07a1d1a4337416c3129fd&id=294b062630",
-    },
+    "footer_taglines": [
+        {
+            "text": "Stay updated with our newsletter",
+            "href": "https://xanadu.us17.list-manage.com/subscribe?u=725f07a1d1a4337416c3129fd&id=294b062630",
+        },
+    ],
+    "footer_policies": [],
 }

xanadu_sphinx_theme/_version.py

@@ -3,4 +3,4 @@
 using the following format: <major>.<minor>.<patch>[-<pre-release>].
 """
 
-__version__ = "0.4.0-dev"
+__version__ = "0.4.0"