Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to Show Tabpanels in bs4navbar() ? #108

Open
kmaheshkulkarni opened this issue May 8, 2020 · 19 comments
Open

How to Show Tabpanels in bs4navbar() ? #108

kmaheshkulkarni opened this issue May 8, 2020 · 19 comments
Labels
enhancement New feature or request

Comments

@kmaheshkulkarni
Copy link

@kmaheshkulkarni kmaheshkulkarni commented May 8, 2020

No description provided.

@DivadNojnarg
Copy link
Member

@DivadNojnarg DivadNojnarg commented May 16, 2020

Do you mean a navbar navigation with tabs like for the sidebar?

@kmaheshkulkarni
Copy link
Author

@kmaheshkulkarni kmaheshkulkarni commented May 17, 2020

Do you mean navbar navigation with tabs like for the sidebar?

Yes Definitely

@kmaheshkulkarni
Copy link
Author

@kmaheshkulkarni kmaheshkulkarni commented May 26, 2020

@DivadNojnarg Have you got any solution on this?

@DivadNojnarg
Copy link
Member

@DivadNojnarg DivadNojnarg commented May 27, 2020

I don't have time to include it at the moment.

@kmaheshkulkarni
Copy link
Author

@kmaheshkulkarni kmaheshkulkarni commented Jun 5, 2020

I don't have time to include it at the moment.

No Problem man, Take your time
Right now I use Button and drop-down button functions from Shinywidgets package

@DivadNojnarg DivadNojnarg added the enhancement New feature or request label Nov 27, 2020
@DivadNojnarg
Copy link
Member

@DivadNojnarg DivadNojnarg commented Dec 2, 2020

I'll implement a better solution but here is a starting point:

library(shiny)
library(bs4Dash)

navbarTab <- function(tabName, ..., icon = NULL) {
  tags$li(
    class = "nav-item",
    tags$a(
      class = "nav-link",
      id = paste0("tab-", tabName),
      href = paste0("#shiny-tab-", tabName),
      `data-toggle` = "tab",
      `data-value` = tabName,
      icon,
      tags$p(...)
    )
  )
}


navbarMenu <- function(..., id = NULL) {
  if (is.null(id)) id <- paste0("tabs_", round(stats::runif(1, min = 0, max = 1e9)))
  
  tags$ul(
    class = "nav dropdown", 
    role = "menu",
    id = "sidebar-menu",
    ...,
    div(
      id = id,
      class = "sidebarMenuSelectedTabItem",
      `data-value` = "null",
      
    )
  )
}

shinyApp(
  ui = dashboardPage(
    header = dashboardHeader(
      navbarMenu(
        navbarTab(tabName = "Tab1", "Tab 1"),
        navbarTab(tabName = "Tab2", "Tab 2")
      )
    ),
    body = dashboardBody(
      tabItems(
        tabItem(
          tabName = "Tab1",
          "Tab 1"
        ),
        tabItem(
          tabName = "Tab2",
          "Tab 2"
        )
      )
    ),
    sidebar = dashboardSidebar()
  ),
  server = function(input, output, session) {
    
  }
)

@kmaheshkulkarni
Copy link
Author

@kmaheshkulkarni kmaheshkulkarni commented Dec 3, 2020

Hey @DivadNojnarg this works superbly
Thanks for your support. I think you can add these methods to the package.
I am designing one template on the basis of these navbar tabs.
Will share with you soon

@fmmattioni
Copy link

@fmmattioni fmmattioni commented Dec 3, 2020

Is there a navbar_light_active_color version for this approach?

@DivadNojnarg
Copy link
Member

@DivadNojnarg DivadNojnarg commented Dec 3, 2020

@fmmattioni : what do you mean?

@fmmattioni
Copy link

@fmmattioni fmmattioni commented Dec 3, 2020

I was wondering if I could change the color of the navbar link. I was thinking something like this: https://dreamrs.github.io/fresh/articles/vars-bs4dash.html#navbar

@DivadNojnarg
Copy link
Member

@DivadNojnarg DivadNojnarg commented Dec 3, 2020

Sure with:

create_theme(
   bs4dash_vars("navbar-light-active-color" = "purple")
)

I also had to change the navbarMenu container class to navbar-nav so that it matches with the scss definition:

.navbar-nav {
    .nav-link {
      color: $navbar-light-color;

      @include hover-focus() {
        color: $navbar-light-hover-color;
      }

      &.disabled {
        color: $navbar-light-disabled-color;
      }
    }

    .show > .nav-link,
    .active > .nav-link,
    .nav-link.show,
    .nav-link.active {
      color: $navbar-light-active-color;
    }
  }
library(shiny)
library(bs4Dash)
library(fresh)

navbarTab <- function(tabName, ..., icon = NULL) {
  tags$li(
    class = "nav-item",
    tags$a(
      class = "nav-link",
      id = paste0("tab-", tabName),
      href = paste0("#shiny-tab-", tabName),
      `data-toggle` = "tab",
      `data-value` = tabName,
      icon,
      tags$p(...)
    )
  )
}


navbarMenu <- function(..., id = NULL) {
  if (is.null(id)) id <- paste0("tabs_", round(stats::runif(1, min = 0, max = 1e9)))
  
  tags$ul(
    class = "navbar-nav dropdown", 
    role = "menu",
    id = "sidebar-menu",
    ...,
    div(
      id = id,
      class = "sidebarMenuSelectedTabItem",
      `data-value` = "null",
      
    )
  )
}

shinyApp(
  ui = dashboardPage(
    freshTheme = create_theme(
      bs4dash_vars("navbar-light-active-color" = "purple")
    ),
    header = dashboardHeader(
      navbarMenu(
        navbarTab(tabName = "Tab1", "Tab 1"),
        navbarTab(tabName = "Tab2", "Tab 2")
      )
    ),
    body = dashboardBody(
      tabItems(
        tabItem(
          tabName = "Tab1",
          "Tab 1"
        ),
        tabItem(
          tabName = "Tab2",
          "Tab 2"
        )
      )
    ),
    sidebar = dashboardSidebar()
  ),
  server = function(input, output, session) {
    
  }
)

@fmmattioni
Copy link

@fmmattioni fmmattioni commented Dec 3, 2020

This is great!!! Thanks a lot, @DivadNojnarg!

@DivadNojnarg
Copy link
Member

@DivadNojnarg DivadNojnarg commented Dec 3, 2020

Leave it open until it is implemented in core

@fmmattioni
Copy link

@fmmattioni fmmattioni commented Jan 30, 2021

Hey @DivadNojnarg,

I have noticed that since a few commits, the above kind of breaks. For example, it doesn't show the home page anymore (need to click on the first tab to show), and once I click on another tab I can't go back anymore.

I have been using the following commit that still worked:

remotes::install_github("RinteRface/bs4Dash@d8cb044f267abb8162068c29e2d959ba520cd040")

But I was wondering what the issue is? I am sorry that I can't give more info 🤔

@DivadNojnarg
Copy link
Member

@DivadNojnarg DivadNojnarg commented Feb 3, 2021

@fmmattioni . As per latest {bs4Dash}: sidebar-menu became a class instead of an id, causing the break.

library(shiny)
library(bs4Dash)
library(fresh)

navbarTab <- function(tabName, ..., icon = NULL) {
    tags$li(
        class = "nav-item",
        tags$a(
            class = "nav-link",
            id = paste0("tab-", tabName),
            href = paste0("#shiny-tab-", tabName),
            `data-toggle` = "tab",
            `data-value` = tabName,
            icon,
            tags$p(...)
        )
    )
}


navbarMenu <- function(..., id = NULL) {
    if (is.null(id)) id <- paste0("tabs_", round(stats::runif(1, min = 0, max = 1e9)))
    
    tags$ul(
        class = "navbar-nav dropdown sidebar-menu", 
        role = "menu",
        ...,
        div(
            id = id,
            class = "sidebarMenuSelectedTabItem",
            `data-value` = "null",
            
        )
    )
}

shinyApp(
    ui = dashboardPage(
        freshTheme = create_theme(
            bs4dash_vars("navbar-light-active-color" = "purple")
        ),
        header = dashboardHeader(
            navbarMenu(
                navbarTab(tabName = "Tab1", "Tab 1"),
                navbarTab(tabName = "Tab2", "Tab 2")
            )
        ),
        body = dashboardBody(
            tabItems(
                tabItem(
                    tabName = "Tab1",
                    "Tab 1"
                ),
                tabItem(
                    tabName = "Tab2",
                    "Tab 2"
                )
            )
        ),
        sidebar = dashboardSidebar()
    ),
    server = function(input, output, session) {
        
    }
)

@fmmattioni
Copy link

@fmmattioni fmmattioni commented Feb 3, 2021

Fantastic! Thanks a lot for looking into it, @DivadNojnarg !

@shahreyar-abeer
Copy link

@shahreyar-abeer shahreyar-abeer commented Sep 6, 2021

This is just great!
Thanks!

@mikael04
Copy link

@mikael04 mikael04 commented Sep 20, 2021

Thanks DivadNojnarg, i was searching this kind of thing in a modern way to do with shiny for a couple of days.

@jfunction
Copy link

@jfunction jfunction commented Jun 8, 2022

Thanks for this. Just a note to self (and others if interested) that some time in the future I want to build on this and make custom navigation tabs like this:
https://css-tricks.com/tabs-with-round-out-borders/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

6 participants