-
Notifications
You must be signed in to change notification settings - Fork 2
/
shinyDashhboard-with-tabs.R
100 lines (96 loc) · 4.85 KB
/
shinyDashhboard-with-tabs.R
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(title = "Your Title",
tags$li(a(onclick = "openTab('home')",
href = NULL,
icon("home"),
title = "Homepage",
style = "cursor: pointer;"),
class = "dropdown",
tags$script(HTML("
var openTab = function(tabName){
$('a', $('.sidebar')).each(function() {
if(this.getAttribute('data-value') == tabName) {
this.click()
};
});
}"))),
tags$li(a(onclick = "openTab('tab1')",
href = NULL,
icon("chart"),'Tab1',
title = "Homepage",
style = "cursor: pointer;"),
class = "dropdown",
tags$script(HTML("
var openTab = function(tabName){
$('a', $('.sidebar')).each(function() {
if(this.getAttribute('data-value') == tabName) {
this.click()
};
});
}"))),
tags$li(a(onclick = "openTab('tab2')",
href = NULL,
icon("line-chart"),'Tab2',
title = "Homepage",
style = "cursor: pointer;"),
class = "dropdown",
tags$script(HTML("
var openTab = function(tabName){
$('a', $('.sidebar')).each(function() {
if(this.getAttribute('data-value') == tabName) {
this.click()
};
});
}"))),
tags$li(a(onclick = "openTab('tab3')",
href = NULL,
icon("line-chart"),'Tab3',
title = "Homepage",
style = "cursor: pointer;"),
class = "dropdown",
tags$script(HTML("
var openTab = function(tabName){
$('a', $('.sidebar')).each(function() {
if(this.getAttribute('data-value') == tabName) {
this.click()
};
});
}")))
), dashboardSidebar(sidebarMenu(id = "sidebar", # id important for updateTabItems
menuItem("Home", tabName = "home", icon = icon("house")),
menuItem("Tab1", tabName = "tab1", icon = icon("table")),
menuItem("Tab2", tabName = "tab2", icon = icon("line-chart")),
menuItem("Tab3", tabName = "tab3", icon = icon("line-chart"))),collapsed = T
),
dashboardBody(
tags$head(
tags$style(
HTML('.skin-blue .wrapper .main-header .navbar .navbar-custom-menu { float: left;}
.skin-blue .main-header .navbar .sidebar-toggle {display: none;}
.skin-blue .main-header .navbar{background-color: #005daa;}
.skin-blue .main-header .logo {background-color: #005daa;}
.skin-blue .main-header .logo:hover {background-color: #005daa;}'))),
tabItems(
tabItem("home", "This is the home tab"),
tabItem("tab1", "This is Tab1"),
tabItem("tab2", "This is Tab2"),
tabItem("tab3", "This is Tab3")
))
)
server = function(input, output, session){
observeEvent(input$home, {
updateTabItems(session, "sidebar", "home")
})
observeEvent(input$tab1, {
updateTabItems(session, "sidebar", "tab1")
})
observeEvent(input$tab2, {
updateTabItems(session, "sidebar", "tab2")
})
observeEvent(input$tab3, {
updateTabItems(session, "sidebar", "tab3")
})
}
shinyApp(ui, server)