R shiny app tabitems are not displaying

[vanesse]

Hello, I hope everyone is doing well. I really need help. I literally despaired. I'm trying to create a shiny app to learn but I'm stuck. I created a menu bar with items. And when I click on an item, there's nothing that shows up on the content-wrapper. Could you help me ?
Sorry my English is so bad.

if (!require("dplyr")) install.packages("dplyr") # data cleaning
if (!require("ggplot2")) install.packages("ggplot2") # plotting
if (!require("shiny")) install.packages("shiny") # dependency for shinydashboard
if (!require("shinydashboard")) install.packages("shinydashboard") # dashboard
if (!require("shinyjs")) install.packages("shinyjs")
library(shiny)
library(shinydashboard)
library(shinyjs)
library(ggplot2)
options(shiny.sanitize.errors = FALSE)
server <- function(input, output) {

}

Define the UI

ui <- dashboardPage(
title = 'Mercuriales',
dashboardHeader(
title = span('MERCU-PRIX', style = "color:black;"),
tags$li(
class = 'dropdown',
tags$h4(
HTML("ILE DE MAYOTTE
ET SES PERIPETIE"),
style = "color: black; text-align: center; font-size: 24px; padding-right: 340px;margin-top: 25px;"
)
)
),
dashboardSidebar(
sidebarMenu(
tags$li(
class = "menuItem", # Add the class "menuItem"
tags$a(
id = "accueil",
icon("home"),
href = "#",
tags$span(style = "padding-left: 10px;", "Accueil"),
style = "background-color: #6129BD;
margin-bottom: 40px;
margin-left: 18px;
margin-top: 60px;
margin-right: 15px;
border-radius: 15px;
color: white;
font-size: 15px;",
data-value = "accueil"# Set the tabName here
)
),
tags$li(
class = "menuItem", # Add the class "menuItem"
tags$a(
id = "produit",
icon("home"),
href = "#",
tags$span(style = "padding-left: 10px;", "Produit"),
style = "background-color: #F8F9FB;
margin-bottom: 10px;
margin-left: 18px;
margin-right: 15px;
border-radius: 15px;
color: black;
font-size: 15px",
data-value = "produit"
)
)
)
),
dashboardBody(
tags$script(HTML('
(document).ready(function() { (".menuItem").click(function() {
(".menuItem").removeClass("clicked"); (this).addClass("clicked");
var tabName = (this).attr("data-value"); Shiny.setInputValue("selectedMenuItem", tabName); }); }); (document).ready(function() {
(".menuItem").hover(function() { (this).toggleClass("hovered");
});
});
')),

tags$style(HTML("
/* Couleur au survol */
  .menuItem.hovered {background-color: #ddcef0;margin-left: 18px;
  margin-right: 15px;
  border-radius: 15px;}
  
  /* Couleur de fond au clic */
  .menuItem.clicked {background-color: lavender;
  margin-left: 18px;
  margin-right: 15px;
  border-radius: 15px;}
  
  .skin-blue .main-header .logo {
    height: 100px;
    padding-top: 25px;
    background-color: white;
    color: black;
  }
  
  .skin-blue .main-header .logo:hover {
    background-color: lavender;
  }
  
  .skin-blue .main-header .navbar {
    background-color: #F8F9FB;
  }
  
  .skin-blue .main-sidebar {
    background-color: #F8F9FB;
  }
  
  .content-wrapper, .right-side {
    background-color: #F1F3FC;
    #height: 100px;
  }
")),
tabItems(
  tabItem(tabName = "accueil",
          fluidRow(
            box(
              title = "Welcome to the Accueil Tab",
              "This is the content for the Accueil tab.",
              width = 6
            )
          )
  ),
  tabItem(tabName = "produit",
          fluidRow(
            box(
              title = "Products in the Produit Tab",
              "This is the content for the Produit tab.",
              width = 6
            )
          )
  )
)

)
)

shinyApp(ui, server)

server <- function(input, output) {}

shinyApp(ui, server)

[nirgrahamuk]

its hard to read your code as its not been formatted . see the link at the end ...

but the usual mistake people make is reusing the same names for unique id's in shiny.
check that were you are required to uniquely id something, you havent used that name also elsewhere. i.e. check accueil etc. only name one thing

FAQ: How to format your code

Formatting Code: the Basics All code or console output you include in your posts should be formatted properly. Luckily, this is very easy to do! Just use the code formatting button at the top of the post editing box: [image] Select some code Click the </> button! The code formatting button automatically adds special Markdown formatting symbols to whatever you selected. If you check the preview pane to the right of your post, you'll see that the forum software now outputs nicely formatted code . [04] The code formatting button is pretty smart! It can tell the difference between snippets of code that are part of a sentence and blocks of code that stand alone. …

[vanesse]

if (!require("shinydashboard")) install.packages("shinydashboard")
if (!require("rugarch")) install.packages("rugarch")
if (!require("dplyr")) install.packages("dplyr") # data cleaning
if (!require("ggplot2")) install.packages("ggplot2") # plotting
if (!require("shiny")) install.packages("shiny") # dependency for shinydashboard
if (!require("shinydashboard")) install.packages("shinydashboard")  # dashboard
if (!require("shinyjs")) install.packages("shinyjs")
if (!require("dashboardthemes")) install.packages("dashboardthemes")
if (!require("plotly")) install.packages("plotly")
library(shiny)
library(shinydashboard)
library(shinyjs)
library(ggplot2)
library(dashboardthemes)
library(plotly)

ui <- dashboardPage(
  title = 'Mercuriales',
  dashboardHeader(
    title = span('MERCU-PRIX', style = "color:black;"),
    tags$li(
      class = 'dropdown',
      tags$h4(
        HTML("DIRECTION DE L'ALIMENTATION, DE L'AGRICULTURE <br> ET DE LA FORÊT DE MAYOTTE"),
        style = "color: black; text-align: center; font-size: 24px; padding-right: 340px;margin-top: 25px;"
      )
    )
  ),
  dashboardSidebar(
    sidebarMenu(
      tags$li(
        class = "treeview",
        tags$a(
          id = "accueil",
          icon("home"),
          href = "#",
          tags$span(style = "padding-left: 10px;", "Accueil"),
          style = "background-color: #6129BD;
                  margin-bottom: 40px;
                  margin-left: 18px;
                  margin-top: 60px;
                  margin-right: 15px;
                  border-radius: 15px;
                  color: white;
                  font-size: 15px;",
          tabName = "accueil"  # Set the tabName here
        )
      ),
      tags$li(
        #class = "treeview",
        tags$a(
          id = "produit",
          icon("home"),
          href = "#",`data-value`="produit",
          tags$span(style = "padding-left: 10px;", "Produit"),
          style = "margin-bottom: 10px;
                  margin-left: 18px;
                  margin-right: 15px;
                  border-radius: 15px;
                  color: black;
                  font-size: 15px"
           # Set the tabName here
        )
      )
    )
  ),
  dashboardBody(
    tags$script(HTML(' /* Couleur de fond au clic */
      $(document).ready(function() {
          $(".menuItem").click(function() {
              $(".menuItem").removeClass("clicked");
              $(this).addClass("clicked");
          });
      });')),
    
    tags$style(HTML("
      /* Couleur de fond au clic */
      .menuItem.clicked {background-color: lavender;}
      
      /* couleur Titre background */
      .skin-blue .main-header .logo {
        height: 100px;
        padding-top: 25px;
        background-color: white;
        color: black;
      }
      
      /* Couleur titre à l'appui */
      .skin-blue .main-header .logo:hover {
        background-color: lavender;
      }
      
      /* Couleur à côté du titre */
      .skin-blue .main-header .navbar {
        background-color: #F8F9FB;
      }
      
      /* Couleur background sidebar */
      .skin-blue .main-sidebar {
        background-color: #F8F9FB;
      }
      
      /* Couleur à droite  */
      .content-wrapper, .right-side {
        background-color: #F1F3FC;
        height: 100px;
      }
    ")),
    tabItems(
      tabItem('rgt',
              tabName = "accueil",
              fluidRow(
                box(
                  title = "Welcome to the Accueil Tab",
                  "This is the content for the Accueil tab.",
                  width = 6
                )
              )
      ),
      tabItem('gdh',
              tabName = "produit",
              fluidRow(
                box(
                  title = "Products in the Produit Tab",
                  "This is the content for the Produit tab.",
                  width = 6
                )
              )
      )
    )
  )
)

server <- function(input, output) {
  output$rgt <- renderUI({
    # You can add any UI components you want to display in the "Accueil" tab here
    fluidRow(
      box(
        title = "Welcome to the Accueil Tab",
        "This is the content for the Accueil tab.",
        width = 6
      )
    )
  })
  
  # Content for the "Produit" tab
  output$gdh <- renderUI({
    # You can add any UI components you want to display in the "Produit" tab here
    fluidRow(
      box(
        title = "Products in the Produit Tab",
        "This is the content for the Produit tab.",
        width = 6
      )
    )
  })
}

shinyApp(ui, server)

type or paste code here

[vanesse]

Thank you ! it's the first time I'm using this.

[nirgrahamuk]

if you follow : Getting started with Shiny Dashboard
you will see tabitems in the body are meant to be accompanied by menuItem(s) in the sidebarmenu, it seems you use other control types and not menIitems in the sidebarmenu?
tags$li ?

[vanesse]

yes, I use tags$li to be able to configure the items separately (margin-top, border-radius etc). what I don't know how to do with menuItem.