How to add a back button in the top corner of the left page?

Question

I am trying to add a back button to the top-corner of the left page, with a triangular form.

Here is a reproducible example of the Shiny app:

library(shiny)


ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        height: 100vh;
        margin: 5px 0;
        background-color: navy; /* Set background color for the body */
        position: relative; /* Add position relative for the logo */
      }
      .input-container {
        width: 100%;
        text-align: center;
        background-color: navy; /* Set background color for the input container */
        padding: 20px; /* Add padding for better visibility */
      }
      .input-container input[type='text'],
      .input-container input[type='number'],
      .input-container .btn {
        width: 100%;
        padding: 15px;
        margin: 5px 0;
        box-sizing: border-box;
        font-size: 18px;
        text-align: center;
        color: navy; /* Text color navy */
      }
      .input-container .btn {
        margin-top: 20px;
        color: white;
      }
      /* Style for Your Details text */
      .details-container {
        text-align: center;
      }
      .details-text {
        color: white;
        font-size: 24px;
        margin-bottom: 15px;
        text-align: center;
        display: inline-block;
      }
      .logo {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 300px; /* Adjust the width of the logo */
        height: auto; /* Maintain aspect ratio */
        display: none; /* Initially hide the logo */
      }
    "))
  ),
  titlePanel(" "),
  uiOutput("page")
)

server <- function(input, output, session) {
  output$page <- renderUI({
    if (is.null(input$currentPage)) {
      tagList(
        div(class = "input-container",
            actionButton("startButton", "START", style = "font-size: 50px;") #  style = "font-size: 24px;"
        ),
        tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
      )
    } else if (input$currentPage == "page2") {
      tagList(
        div(class = "input-container",
            tags$p(class = "details-text", "Your Details:"),
            textInput("name", label = NULL, placeholder = "Name", style = "background-color: lightblue; color: navy;"),
            textInput("nationality", label = NULL, placeholder = "Nationality", style = "background-color: lightyellow; color: navy;"),
            textInput("age", label = NULL, value = "", placeholder = "Age", style = "background-color: lightgreen; color: navy;"),
            textInput("email", label = NULL, placeholder = "Email", style = "background-color: lightgray; color: navy;"),
            actionButton("nextButton", "NEXT") #  style = "font-size: 24px;"
        ),
        tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
      )
    } else if (input$currentPage == "page3") {
      tagList(
        div(class = "input-container",
            tags$p(class = "details-text", "Teaching level:"),
            actionButton("basicButton", "Basic"),
            actionButton("intermediateButton", "Intermediate"),
            actionButton("intermediatePlusButton", "Intermediate +"),
            actionButton("notSureButton", "Not sure"),
            actionButton("nextButtonPage3", "NEXT") #  style = "font-size: 24px;"
        ),
        tags$img(src ="www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
      )
    }
  })
  
  observeEvent(input$startButton, {
    output$page <- renderUI({
      tagList(
        div(class = "input-container",
            tags$p(class = "details-text", "Your Details:"),
            textInput("name", label = NULL, placeholder = "Name"),
            textInput("nationality", label = NULL, placeholder = "Nationality"),
            textInput("age", label = NULL, value = "", placeholder = "Age"),
            textInput("email", label = NULL, placeholder = "Email"),
            actionButton("nextButton", "NEXT") #  style = "font-size: 24px;"
        ),
        tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
      )
    })
  })
  
  observeEvent(input$nextButton, {
    name <- input$name
    nationality <- input$nationality
    age <- input$age
    email <- input$email
    
    output$page <- renderUI({
      tagList(
        div(class = "input-container",
            tags$p(class = "details-text", "Teaching level:"),
            actionButton("basicButton", "Basic", style = "background-color: lightblue; color: navy;"),
            actionButton("intermediateButton", "Intermediate", style = "background-color: lightyellow; color: navy;"),
            actionButton("intermediatePlusButton", "Intermediate +", style = "background-color: lightgreen; color: navy;"),
            actionButton("notSureButton", "Not sure", style = "background-color: lightgray; color: navy;"),
            actionButton("nextButtonPage3", "NEXT") #  style = "font-size: 24px;"
        ),
        tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
      )
    })
  })
}

shinyApp(ui, server)

And this is an example of the the "Back" button I need on each page, but starting with the second page, all the way to the other pages.

Is there a way to get this?

Answer 1

Here is one example for a back button in the corner similar to the one in your screenshot. You can of course edit the CSS in order to improve the example.

Notice that there are several repetitions inside your example which should be avoided. However, I did not refactor your code.

library(shiny)

ui <- fluidPage(
    tags$head(
        tags$style(HTML("
      body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        height: 100vh;
        margin: 5px 0;
        background-color: navy; /* Set background color for the body */
        position: relative; /* Add position relative for the logo */
      }
      .input-container {
        width: 100%;
        text-align: center;
        background-color: navy; /* Set background color for the input container */
        padding: 20px; /* Add padding for better visibility */
      }
      .input-container input[type='text'],
      .input-container input[type='number'],
      .input-container .btn {
        width: 100%;
        padding: 15px;
        margin: 5px 0;
        box-sizing: border-box;
        font-size: 18px;
        text-align: center;
        color: navy; /* Text color navy */
      }
      .input-container .btn {
        margin-top: 20px;
        color: white;
      }
      /* Style for Your Details text */
      .details-container {
        text-align: center;
      }
      .details-text {
        color: white;
        font-size: 24px;
        margin-bottom: 15px;
        text-align: center;
        display: inline-block;
      }
      .logo {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 300px; /* Adjust the width of the logo */
        height: auto; /* Maintain aspect ratio */
        display: none; /* Initially hide the logo */
      }
      div#corner-triangle {
        display: block;
        width: 100px;
        height: 100px;
        border-style: solid;
        border-width: 200px 200px 0 0;
        border-color: #ffffff transparent transparent transparent;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        color: white;
        text-shadow: 0 0 25px 9px #fff;
      }
    "))
    ),
    titlePanel(" "),
    uiOutput("page")
)

server <- function(input, output, session) {
    output$page <- renderUI({
        if (is.null(input$currentPage)) {
            tagList(
                div(class = "input-container",
                    actionButton("startButton", "START", style = "font-size: 50px;") #  style = "font-size: 24px;"
                ),
                tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
            )
        } 
        
    })
    
    observeEvent(input$startButton, {
        output$page <- renderUI({
            tagList(
                div(class = "input-container",
                    tags$p(class = "details-text", "Your Details:"),
                    textInput("name", label = NULL, placeholder = "Name"),
                    textInput("nationality", label = NULL, placeholder = "Nationality"),
                    textInput("age", label = NULL, value = "", placeholder = "Age"),
                    textInput("email", label = NULL, placeholder = "Email"),
                    actionButton("nextButton", "NEXT") #  style = "font-size: 24px;"
                ),
                div(id = "corner-triangle",
                    actionButton(label="Back", inputId = "bck1",
                                 style = "top: -150px; 
                                        left: 25px;
                                        font-size: 25px;
                                        position: relative;
                                        transform: rotate(-45deg);
                                        color: navy;
                                        border: none;
                                        background-color: transparent;
                                        font-weight: bold;
                                        padding: 2em;
                                        margin: -2em;
                                        outline: none;")),
                tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
            )
        })
    })
    
    observeEvent(input$nextButton, {
        name <- input$name
        nationality <- input$nationality
        age <- input$age
        email <- input$email
        
        output$page <- renderUI({
            tagList(
                div(class = "input-container",
                    tags$p(class = "details-text", "Teaching level:"),
                    actionButton("basicButton", "Basic", style = "background-color: lightblue; color: navy;"),
                    actionButton("intermediateButton", "Intermediate", style = "background-color: lightyellow; color: navy;"),
                    actionButton("intermediatePlusButton", "Intermediate +", style = "background-color: lightgreen; color: navy;"),
                    actionButton("notSureButton", "Not sure", style = "background-color: lightgray; color: navy;"),
                    actionButton("nextButtonPage3", "NEXT") #  style = "font-size: 24px;"
                ),
                div(id = "corner-triangle",
                    actionButton(label="Back", inputId = "bck2",
                                 style = "top: -150px; 
                                        left: 25px;
                                        font-size: 25px;
                                        position: relative;
                                        transform: rotate(-45deg);
                                        color: navy;
                                        border: none;
                                        background-color: transparent;
                                        font-weight: bold;
                                        padding: 2em;
                                        margin: -2em;
                                        outline: none;")),
                tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
            )
        })
    })
    
    observeEvent(input$bck1, {
        output$page <- renderUI({
            tagList(
                div(
                    class = "input-container",
                    actionButton("startButton", "START", style = "font-size: 50px;") #  style = "font-size: 24px;"
                ),
                tags$img(
                    src = "www/free_english_logo.png",
                    class = "logo",
                    width = "400px"
                ) # Adjust the width of the logo
            )
        })
    })
    
    observeEvent(input$bck2, {
        output$page <- renderUI({
            tagList(
                div(class = "input-container",
                    tags$p(class = "details-text", "Your Details:"),
                    textInput("name", label = NULL, placeholder = "Name"),
                    textInput("nationality", label = NULL, placeholder = "Nationality"),
                    textInput("age", label = NULL, value = "", placeholder = "Age"),
                    textInput("email", label = NULL, placeholder = "Email"),
                    actionButton("nextButton", "NEXT") #  style = "font-size: 24px;"
                ),
                div(id = "corner-triangle",
                    actionButton(label="Back", inputId = "bck1",
                                 style = "top: -150px; 
                                        left: 25px;
                                        font-size: 25px;
                                        position: relative;
                                        transform: rotate(-45deg);
                                        color: navy;
                                        border: none;
                                        background-color: transparent;
                                        font-weight: bold;
                                        padding: 2em;
                                        margin: -2em;
                                        outline: none;")),
                tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
            )
        })
    })
}

shinyApp(ui, server)