Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ENH: Add section title to sidebar navigation #895

Merged
merged 3 commits into from Aug 29, 2022
Merged

ENH: Add section title to sidebar navigation #895

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2fbce34
ENH: Add section title to sidebar navigation
choldgraf Aug 26, 2022
fad2251
margin on small screen
12rambau Aug 28, 2022
92c0ab4
Update src/pydata_sphinx_theme/assets/styles/components/_switcher-ver…
choldgraf Aug 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/pydata_sphinx_theme/assets/styles/components/_navbar-links.scss
View file
Open in desktop
Expand Up @@ -68,3 +68,8 @@
}
}
}

// Don't display the `site navigation` in the header menu
.bd-header .navbar-nav > p.sidebar-header-items__title {
display: none;
}
5 changes: 5 additions & 0 deletions src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss
View file
Open in desktop
@@ -1,6 +1,11 @@
button.version-switcher__button {
border-color: var(--pst-color-border);
color: var(--pst-color-text-base);
// Add a margin on narrow screens to avoid feeling cramped
margin-bottom: 1em;
@include media-breakpoint-up($breakpoint-sidebar-primary) {
margin-bottom: unset;
}

&:hover {
color: var(--pst-color-text-base);
Expand Down
10 changes: 8 additions & 2 deletions src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss
View file
Open in desktop
Expand Up @@ -36,7 +36,7 @@

.sidebar-start-items__item,
.sidebar-end-items__item {
padding: 0.25rem 0;
padding: 0.5rem 0;
}

// Hide the sidebar header items on widescreen since they are visible in the header
Expand Down Expand Up @@ -202,9 +202,15 @@ nav.bd-links {
}
}

// Title
p.bd-links__title {
font-size: var(--pst-sidebar-header-font-size);
font-weight: var(--pst-sidebar-header-font-weight);
margin-bottom: 0.5rem;
}

// Toctree captions
p.caption {
font-size: var(--pst-sidebar-header-font-size);
font-weight: var(--pst-sidebar-header-font-weight);
position: relative;
margin-top: 1.25em;
Expand Down
11 changes: 8 additions & 3 deletions src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/navbar-nav.html
View file
Open in desktop
@@ -1,3 +1,8 @@
<ul id="navbar-main-elements" class="navbar-nav">
{{ generate_header_nav_html(n_links_before_dropdown=theme_header_links_before_dropdown) }}
</ul>
<nav class="navbar-nav">
<p class="sidebar-header-items__title" role="heading" aria-level="1" aria-label="{{ _('Site Navigation') }}">
{{ _("Site Navigation") }}
12rambau marked this conversation as resolved.
Show resolved Hide resolved
</p>
<ul id="navbar-main-elements" class="navbar-nav">
{{ generate_header_nav_html(n_links_before_dropdown=theme_header_links_before_dropdown) }}
</ul>
</nav>
3 changes: 3 additions & 0 deletions src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/sidebar-nav-bs.html
View file
Open in desktop
@@ -1,4 +1,7 @@
<nav class="bd-links" id="bd-docs-nav" aria-label="{{ _('Section navigation') }}">
<p class="bd-links__title" role="heading" aria-level="1">
{{ _("Section Navigation") }}
</p>
<div class="bd-toc-item navbar-nav">
{{ sidebar_nav_html }}
</div>
Expand Down
3 changes: 0 additions & 3 deletions src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/sidebar-primary.html
View file
Open in desktop
@@ -1,9 +1,6 @@
{% block docs_sidebar %}
{# Header items that will be displayed in the sidebar on mobile #}
<div class="sidebar-header-items sidebar-primary__section">
<p class="sidebar-header-items__title" role="heading" aria-level="1" aria-label="{{ _('Navigation') }}">
{{ _("Site Navigation") }}
</p>
{# The header center items #}
{% if theme_navbar_center %}
<div class="sidebar-header-items__center">
Expand Down
39 changes: 22 additions & 17 deletions tests/test_build/navbar_ix.html
View file
Open in desktop
@@ -1,21 +1,26 @@
<div class="mr-auto" id="navbar-center">
<div class="navbar-center-item">
<ul class="navbar-nav" id="navbar-main-elements">
<li class="nav-item">
<a class="nav-link" href="page1.html">
Page 1
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page2.html">
Page 2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="section1/index.html">
Section 1 index
</a>
</li>
</ul>
<nav class="navbar-nav">
<p aria-label="Site Navigation" aria-level="1" class="sidebar-header-items__title" role="heading">
Site Navigation
</p>
<ul class="navbar-nav" id="navbar-main-elements">
<li class="nav-item">
<a class="nav-link" href="page1.html">
Page 1
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page2.html">
Page 2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="section1/index.html">
Section 1 index
</a>
</li>
</ul>
</nav>
</div>
</div>
45 changes: 25 additions & 20 deletions tests/test_build/sidebar_subpage.html
View file
Open in desktop
@@ -1,27 +1,29 @@
<div class="bd-sidebar-primary bd-sidebar">
<div class="sidebar-header-items sidebar-primary__section">
<p aria-label="Navigation" aria-level="1" class="sidebar-header-items__title" role="heading">
Site Navigation
</p>
<div class="sidebar-header-items__center">
<div class="navbar-center-item">
<ul class="navbar-nav" id="navbar-main-elements">
<li class="nav-item">
<a class="nav-link" href="../page1.html">
Page 1
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../page2.html">
Page 2
</a>
</li>
<li class="nav-item current active">
<a class="nav-link" href="#">
Section 1 index
</a>
</li>
</ul>
<nav class="navbar-nav">
<p aria-label="Site Navigation" aria-level="1" class="sidebar-header-items__title" role="heading">
Site Navigation
</p>
<ul class="navbar-nav" id="navbar-main-elements">
<li class="nav-item">
<a class="nav-link" href="../page1.html">
Page 1
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../page2.html">
Page 2
</a>
</li>
<li class="nav-item current active">
<a class="nav-link" href="#">
Section 1 index
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="sidebar-header-items__end">
Expand Down Expand Up @@ -50,6 +52,9 @@
<div class="sidebar-start-items sidebar-primary__section">
<div class="sidebar-start-items__item">
<nav aria-label="Section navigation" class="bd-links" id="bd-docs-nav">
<p aria-level="1" class="bd-links__title" role="heading">
Section Navigation
</p>
<div class="bd-toc-item navbar-nav">
<ul class="nav bd-sidenav">
<li class="toctree-l1">
Expand Down
3 changes: 3 additions & 0 deletions tests/test_build/test_sidebars_captions.html
View file
Open in desktop
@@ -1,4 +1,7 @@
<nav aria-label="Section navigation" class="bd-links" id="bd-docs-nav">
<p aria-level="1" class="bd-links__title" role="heading">
Section Navigation
</p>
<div class="bd-toc-item navbar-nav">
<p aria-level="2" class="caption" role="heading">
<span class="caption-text">
Expand Down
3 changes: 3 additions & 0 deletions tests/test_build/test_sidebars_nested_page.html
View file
Open in desktop
@@ -1,4 +1,7 @@
<nav aria-label="Section navigation" class="bd-links" id="bd-docs-nav">
<p aria-level="1" class="bd-links__title" role="heading">
Section Navigation
</p>
<div class="bd-toc-item navbar-nav">
<p aria-level="2" class="caption" role="heading">
<span class="caption-text">
Expand Down