Organizing your shiny app with multiple tabs and CSS styles

[CD_Colostate]

I'm looking at ways to clean up my code and create or use CSS on a per tab basis. My app that is in development has multiple tabs, uses a navigation bar for tabs and more. I think I have things set up in an overly complicated format currently and am looking for ways to clean it up while providing more design freedom on each tab (and maybe run faster!).

source("about.R", local=T )

ui <- navbarPage("MySite", id="nav",
             tabPanel("Interactive Map",
                      tags$style(type="text/css", "html, body {width:100%;height:100%}", "#map {height: calc(100vh - 80px) !important;}"),
                      # Main global map page with points and drop down menus                      
  
  leafletOutput("Map", height=1000),
  absolutePanel(top=80, right=10,
                h2("Subset the data by"),
                selectInput("dataselect",  "Filter by data that is in;", c("", sitetypes ) ),
                selectInput("MeasurementType",  "Measurement Type", c("", mesTypes ) ),
                selectInput("Crop", "Crop",  c("", unique(as.character(sitesdf$crop)) ), selected=""),
                selectInput("Management",  "Management", c("", mgmtTypes ), selected=""),
                
                actionButton("button_plot_and_table", "View Plot/Table", class="btn-block")  ),

  absolutePanel(id="controls", top=60, left=20, height=300, width=400, draggable=TRUE,
                plotOutput("Sitelevelinfo", width="100%", height="auto")  ),
  
  actionButton("show", "Show startup message"),  # popup message at refresh/start
  
  # pop out graph and table
  bsModal("Plot_and_table", "Plot and Table", "button_plot_and_table", size = "large",
         plotOutput("siteinfo"),
          dataTableOutput("TestTable") )
  
), # end of landing page
  
# new tab where data is displayed
  tabPanel("Data",
           sidebarLayout(
             sidebarPanel(
               theme = shinytheme("spacelab"),
               fluidRow(
                 tags$h3("Site level Data"),
                 selectInput("SelectSite", "Selected Site",  c("", unique(as.character(SiteLevel$ResearchUnit)) ), selected="California" ),
                 br(),
                 tags$h2("Summary Info for selected site"),
                 DT::dataTableOutput('SummaryInfo'),
                 br() ) ),
             mainPanel(
               tags$h2("Measured Data"),
               dygraphOutput("SiteTimeseries"),
               plotOutput("SiteAnnual" ),
               br()  )  ) ),
  
  # Navigation drop down menu for other resources 
  navbarMenu("Other Resources",
             about, 
             mapuse,
             tabPanel("Upload Data", HTML(paste("you can upload data using this..."))),
             tabPanel("Data Policy", tags$iframe(style="height:1000px; width:100%", src="Data_policy.pdf") )

) # end of UI 

Where the about.R file that is loaded contains some of the tabs for the navbarMenu. The 'mapuse' example is provided.

mapuse <- tabPanel("Using the Map",
  h3(HTML(paste("Instructions for how to use the interactive Map: ") ) ),
  HTML(' <p> Not all features in the map are currently operational </p> ' ), 
value = 'mapuse' )
)

I would like to add something like includeCSS("theme2.css") or theme="theme2" to the tabPanel command like you would for fluidPage, but can't find a way to do so. Alternatively, would use Rmd files for the tabs or other options that allow for easier and more controlable styling.

Thanks!