add styles

NEWS.md

@@ -1,5 +1,12 @@
 # breedverse NEWS
 
+## breedverse 0.3.2
+
+* Add styles to CSS
+* Add custom.js for collapsible headers
+* Add breedverse logo
+* Add header to help page
+
 ## breedverse 0.3.1
 
 * Remove Qploidy while it is going throught repository transition

R/app_ui.R

@@ -13,12 +13,21 @@ app_ui <- function(request) {
   tagList(
     # Leave this function for adding external resources
     golem_add_external_resources(),
+    # Dynamic sidebar color theme — only sets the :root CSS variables
+    # ── Sidebar color theme ──────────────────────────────────────────────────────
+    # Change this value to switch the active sidebar menu item color.
+    # Available options: "azure", "green", "yellow", "grey", "purple", "red"
+    # ─────────────────────────────────────────────────────────────────────────────
+    tags$head(tags$style(HTML(sprintf(
+      ":root { --sidebar-core: var(--%s-core); --sidebar-lite: var(--%s-lite); --sidebar-deep: var(--%s-deep); }",
+      "azure", "azure", "azure"
+    )))),
     # Your application UI logic
     bs4DashPage(
       skin = "black",
       bs4DashNavbar(
         title = tagList(
-          tags$img(src = 'www/BreedingInsight.png', height = '40', width = '50'),
+          tags$img(src = 'www/breedverse_logo.png', height = '40', width = '35'),
         ),
         rightUi = tags$li(
           class = "dropdown",
@@ -54,9 +63,11 @@ app_ui <- function(request) {
         expandOnHover = TRUE,
         sidebarMenu(id = "MainMenu",
                     flat = FALSE,
-                    tags$li(class = "header", style = "color: grey; margin-top: 10px; margin-bottom: 10px; padding-left: 15px;", "Menu"),
+                    tags$li(class = "header","Menu"),
                     menuItem("Home", tabName = "welcome", icon = icon("house"),startExpanded = FALSE),
                     menuItem("Install modules", tabName = "install", icon = icon("share-from-square")),
+                    tags$li(class = "header", "Available Modules"),
+
 
                     # conditionalPanel(
                     #   condition = "output.qploidyInstalled == true",
@@ -66,7 +77,6 @@ app_ui <- function(request) {
 
                     conditionalPanel(
                       condition = "output.familiaInstalled == true",
-                      tags$li(class = "header", style = "color: grey; margin-top: 18px; margin-bottom: 10px; padding-left: 15px;", "Ancestry (R/familia)"),
                       menuItem(
                         "familia",
                         icon = icon("seedling"),
@@ -78,13 +88,11 @@ app_ui <- function(request) {
 
                     conditionalPanel(
                       condition = "output.allomateInstalled == true",
-                      tags$li(class = "header", style = "color: grey; margin-top: 18px; margin-bottom: 10px; padding-left: 15px;", "Mating Estimation (R/AlloMate)"),
                       menuItem("AlloMate", tabName = "allomate", icon = icon("diagram-project"))
                     ),
 
                     conditionalPanel(
                       condition = "output.BIGappInstalled == true",
-                      tags$li(class = "header", style = "color: grey; margin-top: 18px; margin-bottom: 10px; padding-left: 15px;", "Genotype Processing"),
                       menuItem(
                         "BIGapp",
                         icon = icon("dna"),
@@ -102,7 +110,6 @@ app_ui <- function(request) {
                     ),
                     conditionalPanel(
                       condition = "output.genobrewInstalled == true",
-                      tags$li(class = "header", style = "color: grey; margin-top: 18px; margin-bottom: 10px; padding-left: 15px;", "Marker Panel Test &\n CNV Profiles"),
                       menuItem(
                         "GenoBrew",
                         icon = icon("dna"),
@@ -119,27 +126,27 @@ app_ui <- function(request) {
       ),
       footer = dashboardFooter(
         right = div(
-          style = "display: flex; align-items: center;",  # Align text and images horizontally
+          class = "dashboard-footer-right",  # Align text and images horizontally
           div(
-            style = "display: flex; flex-direction: column; margin-right: 15px; text-align: right;",
+            class = "dashboard-footer-text",  # Style the text
             div("2026 Breeding Insight"),
             div("Funded by USDA through UF|IFAS")
           ),
           div(
             a(
               img(src = "www/usda-logo-color.png", height = "45px"),
-              style = "margin-right: 15px;"
+              class = "dashboard-footer-logo"
             ),
             a(
-              img(src = "www/cornell_seal_simple_web_b31b1b.png", height = "45px")
+              img(src = "www/IFAS.jpg", height = "45px")
             ),
             a(
-              img(src = "www/IFAS.jpg", height = "45px")
+              img(src = "www/cornell_seal_simple_web_b31b1b.png", height = "45px")
             )
           )
         ),
         left = div(
-          style = "display: flex; align-items: center; height: 100%;",
+          class = "dashboard-footer-left",
           sprintf("v%s", as.character(utils::packageVersion("Breedverse"))))
       ),
       dashboardBody(
@@ -255,26 +262,11 @@ golem_add_external_resources <- function() {
       path = app_sys("app/www"),
       app_title = "Breedverse"
     ),
-    # Add here other external resources
-    # for example, you can add shinyalert::useShinyalert()
-    tags$style(HTML("
-      /* Ensure box collapse/expand buttons are always on top */
-      .card-tools { position: relative; z-index: 10; }
-      /* Make collapse/expand icons visible on white box headers */
-      .card-tools .btn-tool { color: #495057 !important; }
-      .card-tools .btn-tool:hover { color: #212529 !important; }
-    ")),
-    tags$script(HTML("
-      $(document).ready(function() {
-        // On page load: mirror active class from <li> onto <a> for CSS targeting
-        $('#cnv_1-sample_select_tabs li.active > a').addClass('active');
-
-        // After each tab switch (content already swapped): sync active on <a> only
-        $(document).on('shown.bs.tab', '#cnv_1-sample_select_tabs a[data-toggle=\"tab\"]', function(e) {
-          $('#cnv_1-sample_select_tabs a[data-toggle=\"tab\"]').removeClass('active');
-          $(e.target).addClass('active');
-        });
-      });
-    "))
+    tags$link(
+      rel = "stylesheet",
+      type = "text/css",
+      href = "www/custom.css"
+    ),
+    tags$script(src = "www/custom.js")
   )
 }

R/mod_help.R

@@ -7,12 +7,22 @@
 #' @noRd
 #'
 #' @importFrom shiny NS tagList includeMarkdown
+#'
 mod_help_ui <- function(id){
   ns <- NS(id)
   tagList(
     fluidPage(
       column(width=12),
       column(width=12,
+             div(
+               style = "padding: 20px;",
+               div(
+                 style = "text-align: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid #17a2b8;",
+                 tags$h2("Help Documentation", style = "color: #17a2b8; margin-bottom: 10px;"),
+                 tags$p("Click a module to expand its help section.",
+                        style = "color: #666; font-size: 16px;")
+               )),
+
              # conditionalPanel(
              #   condition = "output.qploidyInstalled == true",
              #   box(title="Ploidy Estimation", id = "Qploidy_box",width = 12, collapsible = TRUE, collapsed = TRUE, status = "info", solidHeader = TRUE,

R/mod_home.R

@@ -22,6 +22,9 @@ mod_Home_ui <- function(id){
                box(
                  title = "Breedverse", status = "info", solidHeader = FALSE, width = 12, collapsible = FALSE,
                  HTML(
+                   "<div style='text-align: center; margin-top: 10px; margin-bottom: 10px;'>
+                                <img src='www/breedverse_logo.png' alt='Breedverse' style='width: 120px; height: 140px;'>
+                              </div>",
                    paste0(
                      "<p><b>About Breedverse.</b> Breedverse is a user-friendly, easy-to-install interface ",
                      "that brings together a curated catalog of applications developed by ",
@@ -53,7 +56,7 @@ mod_Home_ui <- function(id){
               <li>Software Tools</li>
               <li>Analysis</li>
             </ul>
-            Breeding Insight is funded by the U.S. Department of Agriculture (USDA) Agricultural Research Service (ARS) through Cornell University.
+            Breeding Insight is funded by the U.S. Department of Agriculture (USDA) Agricultural Research Service (ARS) through University of Florida (UF) - Institute of Food and Agricultural Sciences (IFAS).
             <div style='text-align: center; margin-top: 20px;'>
               <img src='www/BreedingInsight.png' alt='Breeding Insight' style='width: 85px; height: 85px;'>
             </div>"

R/run_app.R

@@ -10,8 +10,8 @@
 #' @importFrom shiny shinyApp
 #' @importFrom golem with_golem_options
 #'
-#' @export 
-#' 
+#' @export
+#'
 run_app <- function(
     onStart = NULL,
     options = list(),