I'll go ahead and mark this a solution, as I think you provided enough to find a solution.
However, I hope the discussion continues. I think for anyone the idea of the perfect dashboard design is exciting for any shiny developer.
I did also come up with a solution of my own today:
The amended code below
- hides sidebar on small screens (users on mobile / small screen don't need to access all of the inputs)
- sidebar doesn't overlap when tabpanels span multiple rows
- navpanel tabs convert to 100% width when collapsed
full screen:
smaller screen:
mobile sized screens:
I'd like to modify the sidebar so that it's somehow stuck to the side in desktop sized screens, similar to shinydashboard, but for now it suffices.
Original Example modified:
library(shiny)
library(tidyverse)
library(stringi)
html_title <-
'<span class="logo">
<div style="display:inline-block;">
<a href="https://www.google.com"><img src="https://jeroen.github.io/images/Rlogo.png" height="35"/></a>
<b>my company name</b> a subtitle of application or dashboard
</div>
</span>'
custom_css <-
"
.container-fluid {
padding-left: 0px;
}
.new-sidebar{
height:1513px;
width:19%;
background:grey;
display:inline-block;
padding-left: 20px;
padding-top: 20px;
margin-right: 20px;
}
.new-main{
height:1513px;
width:80%;
display:inline-block;
padding-top: 20px;
}
.new-row{
margin-right: -15px;
margin-left: 0;
display: flex;
margin-top: -20px;
}
@media screen and (max-width: 1024px) {
.new-sidebar {
display: none !important;
}
.new-main {
width: 100%;
}
}
@media screen and (max-width: 768px){
.navbar-nav {
float: right;
width: 100%;
}
}
"
new_row <- function(...) {
div(class = "new-row", ...)
}
new_sidebar <- function(...) {
div(class = "new-sidebar", ...)
}
new_main <- function(...) {
div(class = "new-main", ...)
}
rand_title <- function(n) {
my_title <- stringi::stri_rand_lipsum(1)
str_sub(my_title, 1, n)
}
set.seed(123)
ui <- fluidPage(
tags$head(tags$style(HTML(custom_css))),
navbarPage(
collapsible = TRUE,
title = HTML(html_title),
tabPanel(
rand_title(sample(1:40, 1)),
new_row(
new_sidebar(
selectInput("select", "select", letters)
),
new_main(
tags$img(src = "https://jeroen.github.io/images/Rlogo.png", width = "100%")
)
)
),
tabPanel(rand_title(sample(1:40, 1))),
tabPanel(rand_title(sample(1:40, 1))),
tabPanel(rand_title(sample(1:40, 1))),
tabPanel(rand_title(sample(1:40, 1))),
tabPanel(rand_title(sample(1:40, 1))),
tabPanel(rand_title(sample(1:40, 1))),
tabPanel(rand_title(sample(1:40, 1)))
)
)
server <- function(input, output) {
}
shinyApp(ui, server)