how to have both a sidebar and a navbar in quarto with a custom page-layout

Question

I am creating a website in Quarto using a custom page-layout (so that the page is always fullscreen), but I would still like to have both top navigation bar, as well as a sidebar.

my current _quart.yml looks like this:

project:
  type: website

website:
  title: "my website"
  navbar:
    background: primary
    search: true
    left:
      - text: "Home"
        file: index.qmd
      - sidebar:Title1
      - sidebar:Title2

  sidebar:      
    - id: Title1
      title: "Title 1"
      style: "docked"
      background: light
      contents:
        - page1.qmd
        - page1.qmd
        
    - id: Title2
      title: "Title 2"
      style: "docked"
      background: light
      contents:
        - page3.qmd
        - page4.qmd


format:
  html:
    theme: lux
    css: styles.css
    toc: true
    page-layout: custom
    

and I have this in my styles.css file

.page-layout-custom {
    margin-left: 2%;
    margin-right: 2%;
}

What do I need to add to show the sidebar? without the page-layout: custom it does work

Answer 1

This unfortunately wasn't intuitive from the quarto docs, but looking at their website source code helped me figure it out. Below is a minimal example to help you get what you wanted.

index.qmd

---
title: Home
---

Welcome to my website.

blog.qmd

---
title: Blog Home
---

Welcome to my blog landing page.

2024_posts/april_01.qmd

---
title: Blog Post
---
Here is my first post.

Here is the important part: in your _quarto.yml file where you define the side bar for your specific page see sidebar documentation, you must include the parent page in the sidebar contents.

_quarto.yml

project:
  type: website

website:
  navbar:
    left:
      - index.qmd
      - blog.qmd

  sidebar:
    - id: blog
      collapse-level: 2
      contents:
        - blog.qmd
        - section: "2024"
          contents: 2024_posts/*