diff --git a/site/_extensions/validbeck/sidebar-slim/README.md b/site/_extensions/validbeck/sidebar-slim/README.md new file mode 100644 index 0000000000..2e191076e4 --- /dev/null +++ b/site/_extensions/validbeck/sidebar-slim/README.md @@ -0,0 +1,72 @@ +# Sidebar slim + +When `sidebar-slim: true` is set, users can collapse the docked side navigation to a narrow vertical strip to reduce visual clutter. State is kept for the browser tab (`sessionStorage`). + +## Usage + +### Setup + +Enable the filter globally in the project `format` section (`site/_quarto.yml`) so that its functionality can be called: + +```yaml +filters: + - tachyons + - preview + - validbeck/sidebar-slim +``` + +This is the currently applied functionality. + +### Enabling + +#### Enable for a single page + +In the `.qmd` YAML frontmatter set: + +```yaml +sidebar-slim: true +``` + +#### Enable for an entire section (directory) + +In that directory's `_metadata.yml` set: + +```yaml +sidebar-slim: true +``` + +Any `.qmd` under that directory inherits this unless overridden per file. + +This is the current functionality that applies to `site/guide/`. + +#### Enable for the entire project + +In the project configuration (`site/_quarto.yml`), set default metadata so every page inherits it: + +```yaml +metadata: + sidebar-slim: true +``` + +Per-directory `_metadata.yml` or a single document’s YAML can still override this (for example, `sidebar-slim: false` on one page). + +### Configuration + +#### Default to collapsed (narrow) sidebar + +Use **`sidebar-narrow: true`** so the first visit in a tab starts **collapsed** (until the user toggles). Preference is stored in `sessionStorage` (`1` = collapsed, `0` = expanded). + +Example: + +```yaml +sidebar-narrow: true +``` + +This is the functionality currently set on `site/guide/guides.qmd`. + +## Notes + +- Extension only applies to **HTML** (`html:js`) output. +- Toolbar appears at **≥992px** width; below that, Quarto’s own responsive sidebar behavior applies and this extension removes its UI. +- When collapsed, the **main column width stays the same**; only the sidebar UI narrows inside its layout area (the grid tracks for the article are unchanged). +- Does not replace Quarto’s built-in **reader mode** (`website: reader-mode`); you can use either or both. diff --git a/site/_extensions/validbeck/sidebar-slim/_extension.yml b/site/_extensions/validbeck/sidebar-slim/_extension.yml new file mode 100644 index 0000000000..a5494d300d --- /dev/null +++ b/site/_extensions/validbeck/sidebar-slim/_extension.yml @@ -0,0 +1,7 @@ +title: Sidebar slim toggle +author: validbeck +version: 1.0.4 +quarto-required: ">=1.4.0" +contributes: + filters: + - sidebar-slim.lua diff --git a/site/_extensions/validbeck/sidebar-slim/sidebar-slim.css b/site/_extensions/validbeck/sidebar-slim/sidebar-slim.css new file mode 100644 index 0000000000..7e18972967 --- /dev/null +++ b/site/_extensions/validbeck/sidebar-slim/sidebar-slim.css @@ -0,0 +1,89 @@ +/* + Collapsible site sidebar: narrows to a slim vertical strip (desktop). + Activated when sidebar-slim metadata is true (see sidebar-slim.lua). +*/ + +@media (min-width: 992px) { + .quarto-sidebar-slim-toolbar { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 0.25rem; + padding: 0.35rem 0.4rem 0.45rem; + flex-shrink: 0; + } + + body.quarto-sidebar-slim-enabled #quarto-sidebar.sidebar { + display: flex; + flex-direction: column; + transition: + width 0.22s ease, + min-width 0.22s ease, + max-width 0.22s ease, + flex 0.22s ease; + } + + body.quarto-sidebar-slim-enabled #quarto-sidebar .quarto-sidebar-slim-toolbar { + order: -1; + } + + /* + Collapsed: narrow the sidebar element inside its grid cell only — do not change + grid-column on the sidebar or main content, so the article column does not widen. + */ + body.quarto-sidebar-slim-enabled.quarto-sidebar-slim-collapsed + #quarto-sidebar.sidebar { + width: 100% !important; + max-width: 2.75rem !important; + min-width: 0 !important; + justify-self: start; + overflow: hidden; + } + + /* + #quarto-sidebar is