How to create a three-card layout with bslib?

Question

Goal

I want to create shiny app layout like following, where Card 3 is full width:

How do I get this with bslib::page_navbar?

bslib code:

I am using the page_navbar function with layout_columns, but couldn't figure out the combination of col and row sizes to match my goal:

ui_dashboard_instructor2 <- page_navbar(

  # Header ----------------------------------------------
  header = div(),

  # Title ----------------------------------------------
  title = "Title",

  # Sidebar ----------------------------------------------
  sidebar = sidebar(
    width = 350
  ),

  # Navigation panels ----------------------------------------------

  ## 1.
  nav_panel(
    "Overview",
    layout_columns(

      ### Column and row sizes
      col_widths = c(4, 8),
      row_heights = c(1, 2),


      ### 1.
      card(
        full_screen = TRUE,
        card_header(
          "Card 1"
        ),
        card_body(

        )
      ),

      ### 2.
      card(
        full_screen = TRUE,
        card_header(
          "Card 2"
        ),
        card_body(

        )
      ),

      ### 3.
      card(
        full_screen = TRUE,
        card_header(
          "Card 3"
        ),
        card_body(

        )
      )
  )
  ),

  ## 2.
  nav_panel(
    "Second panel",

  ),


  ## Space between sections and sign out button
  nav_spacer(),


  ## 3. Sign out button
  nav_item(
    uiOutput("sign_out_button")
  )
)

session info:

> sessioninfo::session_info()
─ Session info ──────────────────────────────────────────────────────────────────────────────────────────
 setting  value
 version  R version 4.3.1 (2023-06-16 ucrt)
 os       Windows 10 x64 (build 19045)
 system   x86_64, mingw32
 ui       RStudio
 language (EN)
 collate  English_Canada.utf8
 ctype    English_Canada.utf8
 tz       America/Toronto
 date     2023-10-20
 rstudio  2023.06.1+524 Mountain Hydrangea (desktop)
 pandoc   NA

─ Packages ──────────────────────────────────────────────────────────────────────────────────────────────
 package     * version    date (UTC) lib source
 bslib       * 0.5.1.9000 2023-10-19 [1] Github (rstudio/bslib@3b0b564)
 cachem        1.0.8      2023-05-01 [1] CRAN (R 4.3.1)
 cli           3.6.1      2023-03-23 [1] CRAN (R 4.3.1)
 digest        0.6.33     2023-07-07 [1] CRAN (R 4.3.1)
 fastmap       1.1.1      2023-02-24 [1] CRAN (R 4.3.1)
 htmltools     0.5.6.9001 2023-10-19 [1] Github (rstudio/htmltools@9436031)
 jquerylib     0.1.4      2021-04-26 [1] CRAN (R 4.3.1)
 jsonlite      1.8.7      2023-06-29 [1] CRAN (R 4.3.1)
 lifecycle     1.0.3      2022-10-07 [1] CRAN (R 4.3.1)
 R6            2.5.1      2021-08-19 [1] CRAN (R 4.3.1)
 rlang         1.1.1      2023-04-28 [1] CRAN (R 4.3.1)
 rstudioapi    0.15.0     2023-07-07 [1] CRAN (R 4.3.1)
 sass          0.4.7      2023-07-15 [1] CRAN (R 4.3.1)
 sessioninfo   1.2.2      2021-12-06 [1] CRAN (R 4.3.1)

Answer 1

4 months late, but I hope this helps. You can change:

col_widths = c(4, 8)

to

col_widths = c(4, 8, 12)

The 1st line causes the 1st card to be 4 columns wide, the 2nd card to be 8 columns wide, and the 3rd card to be 4 columns wide. Since no column width is explicitly specified for the 3rd card, it loops back to using the 1st number in the vector (4).

The 2nd line explicitly declares the 3rd card width to be 12 columns wide.