quarto-dev / quarto-dev/quarto-cli
Navbar current page highlight doesn't work when logo is in sidebar (hybrid navigation)
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
Bug description
On website projects, Quarto sites that use a navbar will highlight the link of the page that is being currently viewed. However, when hybrid navigation is used and a sidebar is introduced, and when that sidebar includes a logo, the navbar does not highlight the correct page and instead always seems to highlight the home page of the website.
Here's what a sample website using hybrid navigation looks like without a logo in the sidebar. Note that the About page is visited, and the About header is highlighted in the navbar:
Here's the same website, now with a logo in the sidebar. Note that the About page is visited, but the Home header is highlighted in the navbar:
Here's the _quarto.yml used to generate this site. The only difference between the two images is that line containing the sidebar logo has been commented out in the case of the first screenshot:
project:
type: website
website:
title: "website-testing"
navbar:
left:
- text: Home
file: index.qmd
- text: About this Site
file: about.qmd
sidebar:
- title: Home
# logo: seurat.jpg
contents:
- text: Home
file: index.qmd
- title: About this Site
contents:
- text: About
file: about.qmd
- text: More Info
file: about2.qmd
- text: Bibliography
file: about3.qmd
format:
html:
theme: cosmo
css: styles.css
toc: true
Thanks for looking into this, and thanks for making Quarto!
Steps to reproduce
-
Clone the website project at https://github.com/aaronkrusniak/hybridnav-logo-issue.
-
Run
quarto previewon the project and navigate to the About page. -
Add/remove the
logo: seurat.jpgcode in the_quarto.ymlfile to see the changes.
Expected behavior
When a logo is added to the sidebar, the navbar should preserve link highlighting on the currently-viewed page.
Actual behavior
When a logo is added to the sidebar, the navbar highlights the Home page as though it were the currently-viewed page, regardless of which page is actually being viewed.
Your environment
- IDE: RStudio 2023.09.01 Build 494
- Quarto: 1.4.550
- OS: Windows 10 Enterprise 19045.4170
Quarto check output
$ quarto check
Quarto 1.4.550
[>] Checking versions of quarto binary dependencies...
Pandoc version 3.1.11: OK
Dart Sass version 1.69.5: OK
Deno version 1.37.2: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
Version: 1.4.550
Path: C:\Users\442894\AppData\Local\Programs\Quarto\bin
CodePage: 1252
[>] Checking tools....................OK
TinyTeX: (external install)
Chromium: (not installed)
[>] Checking LaTeX....................OK
Using: TinyTex
Path: C:\Users\442894\AppData\Roaming\TinyTeX\bin\win32\
Version: 2022
[>] Checking basic markdown render....OK
[>] Checking Python 3 installation....OK
Version: 3.11.5 (Conda)
Path: C:/Users/442894/anaconda3/python.exe
Jupyter: 5.5.0
Kernels: rt-modeling, python3
[>] Checking Jupyter engine render....OK
[>] Checking R installation...........OK
Version: 4.2.0
Path: C:/Users/442894/AppData/Local/Programs/R/R-4.2.0
LibPaths:
- C:/Users/442894/AppData/Local/R/win-library/4.2
- C:/Users/442894/AppData/Local/Programs/R/R-4.2.0/library
knitr: 1.45
rmarkdown: 2.25
[>] Checking Knitr engine render......OK
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Clone the linked hybridnav-logo-issue project and inspect its _quarto.yml, especially the hybrid navbar and sidebar logo configuration. Run quarto preview, visit the About page, and toggle logo: seurat.jpg to reproduce the incorrect Home highlight. Done means the navbar highlights the currently viewed page with the sidebar logo enabled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 40/100