Skip to content

Commit

Permalink
Header nav link styles (focus, hover, current) (#1545)
Browse files Browse the repository at this point in the history
* Implement header nav link styles

* add comments

* add comment

* changes from implementation review

* Consistent focus ring (first pass) (#1549)

* wip

* Style focus state in header nav

* update focus ring style on all focussable elements

* simplify

* fix links in mobile sidebar overlay

* put focus rings around a few more focusable elements

* polish

* update comment

* review

* better align focus ring on collapsible admonitions

* comment and simplify sphinx-togglebutton focus ring

* make css override more explicit

* Fix SD link-card focus ring and on homepage, bring links inside card

* Update docs/index.md

---------

Co-authored-by: Daniel McCloy <dan@mccloy.info>

* Resolve current sidebar link notch and focus ring (#1561)

* Fix sidebar current notch

* focus-ring-radius

* missed a spot 0.125rem

* keep focus ring on top

* Restyle Sphinx Design tabs (#1555)

* restyle sphinx design tabs

* increase panel border radius

* increase line height, zero padding-y

* use shadow variable

* Update src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss

* Update src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss

* Fix tabbed panel colors (#1567)

* update feature focus (#1569)

* docs: add instructions for custom SVG icons (#1490)

* docs: add instructions for custom SVG icons

* docs: minor tweaks in SVG icon instructions

* docs: some more tweaks to SVG icon instructions

* Update docs/user_guide/header-links.rst

Co-authored-by: Rambaud Pierrick <12rambau@users.noreply.github.com>

* Change literalinclude to code-block in header links

* Update docs/user_guide/header-links.rst

Co-authored-by: Daniel McCloy <dan@mccloy.info>

* Update docs/user_guide/header-links.rst

* Update docs/user_guide/header-links.rst

* Update docs/user_guide/header-links.rst

* Update docs/user_guide/header-links.rst

* Update docs/user_guide/header-links.rst

---------

Co-authored-by: tgresavage <thomas.gresavage.ext@afresearchlab.com>
Co-authored-by: Rambaud Pierrick <12rambau@users.noreply.github.com>
Co-authored-by: Daniel McCloy <dan@mccloy.info>

* fix: make table background transparent (#1546)

* fix: make table background transparent

* fix: make table background transparent

* fix: add color-theme option to html tag (#1536)

* Silence warnings (#1542)

* avoid webpack warning during asset compile

* avoid frozen modules warning during import

* try to make jupyterlite quieter

* add config option to silence warnings

* fix tests

* add docs

* hide conditional warning logic in utils

* bump: 0.14.2 → 0.14.3

* chore: back to dev

* docs: add the list of component using a directive (#1476)

* fix: create the component list automatically

* fix: read the first comment as documentation

* docs: add disclaimer on .html suffix

* docs: document every component with a simple one liner

* fix: use regex to identify comments

* update component branch (#15)

* Change default logo alt text (#1472)

* Default logo alt text only if no extra text

* change default logo

* use docstitle as default logo alt text

* update docs to reflect change

* Apply suggestions from code review

Co-authored-by: Daniel McCloy <dan@mccloy.info>

* use string formatting operator

* Update docs/user_guide/branding.rst

* docs fixes

* Update docs/user_guide/branding.rst

* add test

* Update pyproject.toml

* revert to original

---------

Co-authored-by: Daniel McCloy <dan@mccloy.info>
Co-authored-by: Rambaud Pierrick <12rambau@users.noreply.github.com>

* chore(i18n) catalan (#1488)

i18n: Translate sphinx.po in ca

100% translated source file: 'sphinx.po'
on 'ca'.

Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com>

* Build(deps): Bump postcss and css-loader (#1494)

Bumps [postcss](https://github.com/postcss/postcss) to 8.4.31 and updates ancestor dependency [css-loader](https://github.com/webpack-contrib/css-loader). These dependencies need to be updated together.


Updates `postcss` from 8.4.21 to 8.4.31
- [Release notes](https://github.com/postcss/postcss/releases)
- [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md)
- [Commits](postcss/postcss@8.4.21...8.4.31)

Updates `css-loader` from 3.6.0 to 6.8.1
- [Release notes](https://github.com/webpack-contrib/css-loader/releases)
- [Changelog](https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md)
- [Commits](webpack-contrib/css-loader@v3.6.0...v6.8.1)

---
updated-dependencies:
- dependency-name: postcss
  dependency-type: indirect
- dependency-name: css-loader
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Revert "Build(deps): Bump postcss and css-loader" (#1509)

Revert "Build(deps): Bump postcss and css-loader (#1494)"

This reverts commit 185a37a.

* Update pst docs buttons (#1502)

* call them button-links

* copy edit

* docs: link back to GitHub from PyPI metadata (#1504)

This will add a "Source" link in the PyPI page.

* navigation_with_keys = False (#1503)

* navigation_with_keys = False

* None -> False

* Apply suggestions from code review

---------

Co-authored-by: Daniel McCloy <dan@mccloy.info>

* fix: convert "stable" to actual version number (#1512)

* convert "stable" to actual version number

* fix tests re: navigation_with_keys

* try bumping autoapi

* refactor: use nbsphinx as the default execution lib (#1482)

* refactor: use nbsphinx as the default execution lib

* add nbstripout to the pre-commits'

* add pandoc to the readthedocs deps

* refactor: clean the notebook

* move the example to the correct folder

* fix: solve link issue

* install pandoc in the test environment

* fix: display of large table in executed cells

* avoid Userwarnings from matplotlib

* hide the matplotlib wrning management cell

* Update readthedocs.yml

* build: use pandoc_binary to install pandoc

* docs: add reference to pandoc in the setup

* update docs

* remove pypandoc_binary

* Update pyproject.toml

Co-authored-by: gabalafou <gabriel@fouasnon.com>

* ci: use back setup-pandoc

* Trigger CI build

---------

Co-authored-by: Gabriel Fouasnon <gabriel@fouasnon.com>

* BUG - Clear alt_text in conf.py (#1471)

* comment out alt_text in conf.py

* set alt_text to empty string

* remove alt_text from conf.py

* fix: use 12rambau fork until it's merged with nikeee repo (#1517)

* deps: drop support for Sphinx 5 (#1516)

* remove ref to myst-nb

* update minimal supported version of sphinx

* Fix: (webpack.config.js) css-loader API change (#1508)

* Fix: (webpack.config.js) css-loader API change

The build was broken in
<https://github.com/pydata/pydata-sphinx-theme/commit/185a37aa36820f77bffa4c87a772092e9e7cc380>/<https://github.com/pydata/pydata-sphinx-theme/pull/1494>.

This change fixes the build, and it seems to be in accordance with the
current API as described at <https://github.com/webpack-contrib/css-loader/blob/c6f36cf91ac61743a70e81cfb077faa0f8730ebe/README.md#boolean>.

Closes <#1507>.

* dedup

* restore version bump

---------

Co-authored-by: Daniel McCloy <dan@mccloy.info>

* Fix duplicate HTML IDs (#1425)

* Fix duplicate HTML IDs

* fix tests

* Do not animate the version admonitions colors. (#1424)

Otherwise a delay has to be added to the accessibility color
contrast checks, to wait for the colors to fully transition.

* BUG - Remove redundant ARIA in breadcrumb navigation (#1426)

* style(i18n): French Typo fixed (#1430)

* Add the ability to add a center section to the footer (#1432)

* Add a center section for the footer

* Add docs for footer_center

* Add a test site for the center footer

* test it in our own docs

* remove new test site

* add footer test

---------

Co-authored-by: Daniel McCloy <dan@mccloy.info>

* Build(deps): Bump actions/checkout from 3 to 4 (#1433)

Bumps [actions/checkout](https://github.com/actions/checkout) from 3 to 4.
- [Release notes](https://github.com/actions/checkout/releases)
- [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md)
- [Commits](actions/checkout@v3...v4)

---
updated-dependencies:
- dependency-name: actions/checkout
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Add dropdown_text argument to generate_header_nav_html (#1423)

* Add dropdown_text argument to generate_header_nav_html

* Add a test, fix typo in theme.conf and remove header_dropdown_text from docs/conf.py

* fixed?

---------

Co-authored-by: Daniel McCloy <dan@mccloy.info>

* fix: rollback ref and Id changes (#1438)

* bump: version 0.13.3 → 0.14.0  (#1440)

* bump version

* update version switcher

* back to dev

* fix: change the z-index of the dropdown (#1442)

In order to be on top of the primary sidebar on small screens.

* fix: set the same background for dark/light (#1443)

* fix: set the same background for dark/light
et the same background color for all state of the search field. It is currently only applied when hovered

* fix: wrong css selector

* Update src/pydata_sphinx_theme/assets/styles/components/_search.scss

* Update src/pydata_sphinx_theme/assets/styles/components/_search.scss

* Fix duplicate HTML IDs

* fix tests

* unique_html_id

* backwards-compat generate_header_nav_html

* feedback review

* update fixture

* ughhhh...caching

* code cleanup

* fix test snapshot

* put comment inside def

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Denis Bitouzé <dbitouze@wanadoo.fr>
Co-authored-by: Stuart Mumford <stuart@cadair.com>
Co-authored-by: Daniel McCloy <dan@mccloy.info>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Alenka Frim <AlenkaF@users.noreply.github.com>
Co-authored-by: Rambaud Pierrick <12rambau@users.noreply.github.com>

* chore: build the devcontainer automatically in codespace (#1483)

* chore: build the devcontainer automaticallyin codespace

* refactor: lint

* add pandoc to the environment

* Fix font color in search input box (#1524)

* Fix color

* Use --pst-color-text-base

* docs: add DecentralChain (#1528)

Co-authored-by: jourlez <josuecr.288@gmail.com>

* Updates for file src/pydata_sphinx_theme/locale/en/LC_MESSAGES/sphinx.po in ru [Manual Sync] (#1527)

i18n: Translate sphinx.po in ru [Manual Sync]

96% of minimum 20% translated source file: 'sphinx.po'
on 'ru'.

Sync of partially translated files: 
untranslated content is included with an empty translation 
or source language content depending on file format

Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com>

* ignore transient errors in windows build CI (#1520)

* use warning list

* clean up notebook

* refactor to pass on all platforms?

* simplify

* fix logic

* iterate backwards

* fix plaform detection? also don't log unnecessarily�[H

* ignore empty string warnings

* remove notebook metawarning

* Revert "remove notebook metawarning"

This reverts commit 42f4672.

* try again

* debug the mysterious empty warning

* escape color codes

* import

* triage by intermittency, not by platform; better var names

* simplify

* fix list.remove

* undo what I broke

* Update tests/utils/check_warnings.py

* refactor: remove extention on component set-up (#1529)

* use event.key for search shortcut (#1525)

* use event.key for search shortcut

* suggestions from review

* caps lock

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: gabalafou <gabriel@fouasnon.com>
Co-authored-by: Daniel McCloy <dan@mccloy.info>
Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Ned Batchelder <ned@nedbatchelder.com>
Co-authored-by: Adam Porter <adam@alphapapa.net>
Co-authored-by: Denis Bitouzé <dbitouze@wanadoo.fr>
Co-authored-by: Stuart Mumford <stuart@cadair.com>
Co-authored-by: Alenka Frim <AlenkaF@users.noreply.github.com>
Co-authored-by: Harutaka Kawamura <hkawamura0130@gmail.com>
Co-authored-by: jourlez <josuecr.288@gmail.com>

* fix: use a directive instead of raw html

* fix: make links externals

* fix: set reference in paragraphs

* fix: missing parameter

* fix: use the stem for the component name

* refactor: remove never used variables

* standardize component descriptions

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: gabalafou <gabriel@fouasnon.com>
Co-authored-by: Daniel McCloy <dan@mccloy.info>
Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Ned Batchelder <ned@nedbatchelder.com>
Co-authored-by: Adam Porter <adam@alphapapa.net>
Co-authored-by: Denis Bitouzé <dbitouze@wanadoo.fr>
Co-authored-by: Stuart Mumford <stuart@cadair.com>
Co-authored-by: Alenka Frim <AlenkaF@users.noreply.github.com>
Co-authored-by: Harutaka Kawamura <hkawamura0130@gmail.com>
Co-authored-by: jourlez <josuecr.288@gmail.com>

* fix: primer link in docs (#1556)

* docs: add data-content (#1559)

Reproduce the change made in Sphinx 7
sphinx-doc/sphinx@8e730ae#diff-a5066e933cbf65adc46e0d1ab9a0b44e0a53ca64cc95dca7e6aa902aed6bd468R105

* Obviate background-from-color-variable (#1558)

* Obviate background-from-color-variable

* backwards compatibility

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: gresavage <tomgresavage@gmail.com>
Co-authored-by: tgresavage <thomas.gresavage.ext@afresearchlab.com>
Co-authored-by: Daniel McCloy <dan@mccloy.info>
Co-authored-by: gabalafou <gabriel@fouasnon.com>
Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Ned Batchelder <ned@nedbatchelder.com>
Co-authored-by: Adam Porter <adam@alphapapa.net>
Co-authored-by: Denis Bitouzé <dbitouze@wanadoo.fr>
Co-authored-by: Stuart Mumford <stuart@cadair.com>
Co-authored-by: Alenka Frim <AlenkaF@users.noreply.github.com>
Co-authored-by: Harutaka Kawamura <hkawamura0130@gmail.com>
Co-authored-by: jourlez <josuecr.288@gmail.com>
Co-authored-by: Chris Holdgraf <choldgraf@berkeley.edu>

* simplify (do not change  state of hover)

* fix icon links

* forgot to add pydata-icon.js

* Restore hover styles to sidebar toggles

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Daniel McCloy <dan@mccloy.info>
Co-authored-by: Rambaud Pierrick <12rambau@users.noreply.github.com>
Co-authored-by: gresavage <tomgresavage@gmail.com>
Co-authored-by: tgresavage <thomas.gresavage.ext@afresearchlab.com>
Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Ned Batchelder <ned@nedbatchelder.com>
Co-authored-by: Adam Porter <adam@alphapapa.net>
Co-authored-by: Denis Bitouzé <dbitouze@wanadoo.fr>
Co-authored-by: Stuart Mumford <stuart@cadair.com>
Co-authored-by: Alenka Frim <AlenkaF@users.noreply.github.com>
Co-authored-by: Harutaka Kawamura <hkawamura0130@gmail.com>
Co-authored-by: jourlez <josuecr.288@gmail.com>
Co-authored-by: Chris Holdgraf <choldgraf@berkeley.edu>
  • Loading branch information
15 people authored Dec 13, 2023
1 parent 4839dc2 commit 33fb96b
Show file tree
Hide file tree
Showing 9 changed files with 139 additions and 23 deletions.
16 changes: 16 additions & 0 deletions docs/_static/pydata-icon.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/*******************************************************************************
* Set a custom icon for PyData
*/
FontAwesome.library.add(
(faListOldStyle = {
prefix: "fa-custom",
iconName: "pydata",
icon: [
24, // viewBox width
24, // viewBox height
[], // ligature
"e002", // unicode codepoint - private use area
"M12.1,17.8v5.8l-5-2.9v-5.8L12.1,17.8z M12.1,12v5.8l-5-2.9V9.1L12.1,12z M17,9.1L12.1,12v5.8l4.9-2.9V9.1z M12.1,6.2L7,9.1l5,2.9L17,9.1L12.1,6.2z M17,9.1V3.3l-4.9-2.8v5.8L17,9.1z",
],
})
);
Binary file removed docs/_static/pydata-logo.png
Binary file not shown.
6 changes: 2 additions & 4 deletions docs/conf.py
Original file line number Diff line number Diff line change
Expand Up @@ -153,9 +153,7 @@
{
"name": "PyData",
"url": "https://pydata.org",
"icon": "_static/pydata-logo.png",
"type": "local",
"attributes": {"target": "_blank"},
"icon": "fa-custom fa-pydata",
},
],
# alternative way to set twitter and github header icons
Expand Down Expand Up @@ -226,7 +224,7 @@
# so a file named "default.css" will overwrite the builtin "default.css".
html_static_path = ["_static"]
html_css_files = ["custom.css"]
html_js_files = ["custom-icon.js"]
html_js_files = ["pydata-icon.js", "custom-icon.js"]
todo_include_todos = True

# -- favicon options ---------------------------------------------------------
Expand Down
80 changes: 80 additions & 0 deletions src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss
Original file line number Diff line number Diff line change
Expand Up @@ -184,3 +184,83 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
}
}
}

/*
Mixin for links in the header (and the More dropdown toggle).
The mixin assumes it will be applied to some element X with a markup structure
like: X > .nav-link, or X > .dropdown-toggle.
It also assumes X.current is how the app annotates which item in the header nav
corresponds to the section in the docs that the user is currently reading.
*/
@mixin header-link {
// Target the child and not the parent because we want the underline in the
// mobile sidebar to only span the width of the text not the entire row/line.
> .nav-link,
> .dropdown-toggle {
border-radius: 2px;
color: var(--pst-color-text-muted);
font-weight: 700;

&:focus-visible {
box-shadow: none; // override Bootstrap
outline: 3px solid var(--pst-color-accent);
outline-offset: 3px;
}
}

> .nav-link {
// Set up pseudo-element for hover and current states below.
position: relative;
&::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
}

// Underline on hover.
// - Don't use text-decoration because it will wrap across two lines if
// the link text also wraps across two lines.
// - Use pseudo-element in order to avoid the border-radius values
// rounding the edges of the underline. (And since a header link can be
// both focused and hovered at the same time and we want the focus ring
// but not the underline to be rounded, we cannot use a box shadow or
// bottom border link element to create the underline, or else it will
// be rounded and if we apply border-radius 0 then the hovered focus
// ring would go from rounded to sharp. So we have to use the
// pseudo-element.)
&:hover {
color: var(--pst-color-secondary);
text-decoration: none; // override the link-style-hover mixin
&::before {
border-bottom: 3px solid var(--pst-color-secondary);
}
}
}

> .dropdown-toggle {
&:hover {
text-decoration: none;
box-shadow: 0 0 0 $focus-ring-width var(--pst-color-link-hover); // purple focus ring
// Brighten the text on hover (muted -> base)
color: var(--pst-color-text-base);
}
}

&.current {
> .nav-link {
color: var(--pst-color-primary);

// Underline the current navbar item
&::before {
border-bottom: 3px solid var(--pst-color-primary);
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@
padding-left: 0;
padding-right: 0;
@include icon-navbar-hover;
&:focus {
color: inherit;
}
}

// Spacing and centering
Expand Down Expand Up @@ -50,4 +53,10 @@
height: 1.5em;
border-radius: 0.2rem;
}

.fa-pydata {
stroke: var(--pst-color-background);
stroke-linejoin: round;
stroke-width: 0.35;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@
background-color: var(--pst-color-surface);

&:hover {
border: 2px solid var(--pst-color-link-hover);
box-shadow: 0 0 0 $focus-ring-width var(--pst-color-link-hover);
}

&:focus-visible {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,17 @@ button.btn.version-switcher__button {
@include media-breakpoint-up($breakpoint-sidebar-primary) {
margin-bottom: unset;
}

@include link-style-hover;
&:hover {
box-shadow: 0 0 0 $focus-ring-width var(--pst-color-secondary);
border-color: transparent;
}
&:active {
color: var(--pst-color-text-base);
border-color: var(--pst-color-border);
}
&:focus-visible {
border-color: transparent;
}
}

.version-switcher__menu {
Expand Down
19 changes: 12 additions & 7 deletions src/pydata_sphinx_theme/assets/styles/sections/_header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -84,23 +84,28 @@

@include media-breakpoint-up($breakpoint-sidebar-primary) {
// Center align on wide screens so the dropdown button is centered properly
align-items: center;
align-items: baseline;
}

li a.nav-link {
@include link-style-text;
li.pst-header-nav-item {
margin-inline: 5px; // breathing room so hover, focus styles do not overlap
&:first-child {
margin-inline-start: 0;
}
&:last-child {
margin-inline-end: 0;
}
@include header-link;
}

// Current page is always underlined in the navbar
> .current > .nav-link {
@include link-navbar-current;
li a.nav-link.dropdown-item {
@include link-style-text;
}

// Dropdowns for the extra links
.dropdown {
button {
display: unset;
color: var(--pst-color-text-muted);
border: none;
@include link-style-hover;
}
Expand Down
21 changes: 12 additions & 9 deletions src/pydata_sphinx_theme/toctree.py
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ def generate_header_nav_before_dropdown(n_links_before_dropdown):
page = toc.attributes["parent"] if page == "self" else page

# If this is the active ancestor page, add a class so we highlight it
current = " current active" if page == active_header_page else ""
current = "current active" if page == active_header_page else ""

# sanitize page title for use in the html output if needed
if title is None:
Expand All @@ -108,14 +108,14 @@ def generate_header_nav_before_dropdown(n_links_before_dropdown):
# If it's an absolute one then we use the external class and
# the complete url.
is_absolute = bool(urlparse(page).netloc)
link_status = "external" if is_absolute else "internal"
link_status = "nav-external" if is_absolute else "nav-internal"
link_href = page if is_absolute else context["pathto"](page)

# create the html output
links_html.append(
f"""
<li class="nav-item{current}">
<a class="nav-link nav-{link_status}" href="{link_href}">
<li class="nav-item pst-header-nav-item {current}">
<a class="nav-link {link_status}" href="{link_href}">
{title}
</a>
</li>
Expand All @@ -126,7 +126,7 @@ def generate_header_nav_before_dropdown(n_links_before_dropdown):
for external_link in context["theme_external_links"]:
links_html.append(
f"""
<li class="nav-item">
<li class="nav-item pst-header-nav-item">
<a class="nav-link nav-external" href="{ external_link["url"] }">
{ external_link["name"] }
</a>
Expand All @@ -140,9 +140,12 @@ def generate_header_nav_before_dropdown(n_links_before_dropdown):

# Wrap the final few header items in a "more" dropdown
links_dropdown = [
# 🐲 brittle code, relies on the assumption that the code above
# gives each link in the nav a `nav-link` CSS class
html.replace("nav-link", "nav-link dropdown-item")
# 🐲 brittle code because it relies on the code above to build the HTML in a particular way
html.replace("nav-link", "nav-link dropdown-item").replace(
# Prevents the header-link mixin from applying to links within the dropdown
"pst-header-nav-item",
"",
)
for html in links_html[n_links_before_dropdown:]
]

Expand Down Expand Up @@ -177,7 +180,7 @@ def generate_header_nav_html(
dropdown_id = unique_html_id("pst-nav-more-links")
links_dropdown_html = "\n".join(links_dropdown)
out += f"""
<li class="nav-item dropdown">
<li class="nav-item dropdown pst-header-nav-item">
<button class="btn dropdown-toggle nav-item" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-controls="{dropdown_id}">
{_(dropdown_text)}
</button>
Expand Down

0 comments on commit 33fb96b

Please sign in to comment.