buttons fix

app/about_module.R

@@ -12,20 +12,15 @@ aboutUI <- function(id) {
       @import url('//fonts.googleapis.com/css?family=Lobster|Cabin:400,700');
       @import url('//fonts.googleapis.com/css2?family=Fjalla+One');
 
+    .tab-link-3{      		
+    background-color: #008375;
+  	color: #FFFFFF !important;
+  	font-family: Fjalla One;}
       
                     "))),
     
     theme = "style.css",
-    
+
-    fluidRow(
-      column(12,
-             navbarPage("",
-                        tabPanel("TakeCareApp"),
-                        tabPanel("Firmy"),
-                        tabPanel("O nas"),
-                        tabPanel("Zaloguj")),
-             
-      )),
     # App title ----
     
     fluidRow(column(12," ABOUT")%>% tagAppendAttributes(id = 'column-content')

app/app.R

@@ -4,6 +4,7 @@ library(magrittr)
 library(ggplot2)
 library(plotly)
 library(DT)
+library(shinyjs)
 
 #source(".R/home_module.R",encoding="utf-8")
 #source(".R/about_module.R",encoding="utf-8")
@@ -12,11 +13,52 @@ library(DT)
 source("routing_module.R",encoding="utf-8")
 
 
-ui <- router$ui
+ui <- fluidPage(
+  
+  fluidRow(
+    useShinyjs(),
+    inlineCSS(list(.clicked = "background-color: #008375 !important")),
+    column(12,
+           navbarPage("",
+                      tabPanel(a("TakeCareApp",id='takeCareApp',class = "tab-link", href = route_link("home"))),
+                      tabPanel(a("Firmy",id="tab1",class = "tab-link", href = route_link("home"))),
+                      tabPanel(a("O nas",id="tab2",class = "tab-link", href = route_link("about"))),
+                      tabPanel(a("Zaloguj",id="tab3",class="tab-link", href = route_link("profil")))),
+           
+    )),
+  router$ui)
 
 
 
 server <- shinyServer(function(input, output, session){
+  
+  shinyjs::onclick(id="takeCareApp",expr = {
+    shinyjs::removeCssClass(id="tab1",class = "clicked")
+    shinyjs::removeCssClass(id="tab2",class = "clicked")
+    shinyjs::removeCssClass(id="tab3",class = "clicked")
+  })
+  
+shinyjs::onclick(id="tab1",expr = {
+  shinyjs::addCssClass(id="tab1",class = "clicked")
+  shinyjs::removeCssClass(id="tab2",class = "clicked")
+  shinyjs::removeCssClass(id="tab3",class = "clicked")
+})
+  
+  shinyjs::onclick(id="tab2",expr = {
+    shinyjs::addCssClass(id="tab2",class = "clicked")
+    shinyjs::removeCssClass(id="tab1",class = "clicked")
+    shinyjs::removeCssClass(id="tab3",class = "clicked")
+  })
+  
+  shinyjs::onclick(id="tab3",expr = {
+    shinyjs::addCssClass(id="tab3",class = "clicked")
+    shinyjs::removeCssClass(id="tab2",class = "clicked")
+    shinyjs::removeCssClass(id="tab1",class = "clicked")
+  })
+  
+  
+
+  
   router$server(input, output, session)
 })  
 

app/home_module.R

@@ -11,21 +11,15 @@ homeUI <- function(id) {
     tags$style(HTML("
       @import url('//fonts.googleapis.com/css?family=Lobster|Cabin:400,700');
       @import url('//fonts.googleapis.com/css2?family=Fjalla+One');
+  
+
 
       
                     "))),
   
   theme = "style.css",
   
-  fluidRow(
+
-    column(12,
-           navbarPage("",
-                      tabPanel(title="TakeCareApp", a(class = "item", href = "home")),
-                      tabPanel("Firmy"),
-                      tabPanel(title= "O nas", a(class = "item", href = "about")),
-                      tabPanel(title="Zaloguj", a(class="item", href = "profil"))),
-           
-    )),
   # App title ----
   # App title ----
   titlePanel(h1("TakeCareApp", align = "center")),

app/profil_module.R

@@ -17,15 +17,7 @@ profilUI <- function(id) {
   
   theme = "style.css",
   
-  fluidRow(
+
-    column(12,
-           navbarPage("",
-                      tabPanel("TakeCareApp"),
-                      tabPanel("Firmy"),
-                      tabPanel("O nas"),
-                      tabPanel("Zaloguj")),
-           
-    )),
   # App title ----
   
   fluidRow(
@@ -39,8 +31,8 @@ profilUI <- function(id) {
                        tabPanel("Zakładka 2", tags$div(plotlyOutput("plot2",height = "auto"))%>% tagAppendAttributes(class = 'content-wrapper')),
                        tabPanel("Zakładka 3", tags$div(plotlyOutput("plot3",height = "auto"))%>% tagAppendAttributes(class = 'content-wrapper')),
                        tabPanel("Zakładka 4", tags$div(plotlyOutput("plot4",height = "auto"))%>% tagAppendAttributes(class = 'content-wrapper')),
-                       tabPanel("Zakładka 5", tags$div(DT::dataTableOutput("table1",height = "auto"))%>% tagAppendAttributes(class = 'content-wrapper')),
+                       tabPanel("Zakładka 5", tags$div(DT::dataTableOutput("table1",height = "auto"))%>% tagAppendAttributes(class = 'content-wrapper'))
-                       tabPanel("Zakładka 6", tags$div(DT::dataTableOutput("table2",height = "auto"))%>% tagAppendAttributes(class = 'content-wrapper'))
+                       
            ))%>% tagAppendAttributes(id = 'column-content')
   ) %>% tagAppendAttributes(id = 'row-content'),
   
@@ -117,8 +109,6 @@ profilServer <- function(input, output) {
   output$table1 <- DT::renderDataTable(iris,options = list(scrollX = TRUE,language=pl))
   
   
-  table<-DT::renderDataTable(mpg,options = list(scrollX = TRUE,language=pl)) 
-  output$table2 <- table
   
   
   

app/www/style.css

@@ -77,9 +77,9 @@ background-color:#00A896;
 }
 
 .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
-		background-color: #008375;
+		#background-color: #008375;
-	color: #FFFFFF !important;
+	#color: #FFFFFF !important;
-	font-family: Fjalla One;
+	#font-family: Fjalla One;
 
 }
 .navbar-default .navbar-nav > li > a{
@@ -88,6 +88,8 @@ background-color:#00A896;
 	text-align: center;
 }
 
+
+
 .navbar-nav >li:first-child.active >a, .navbar-nav >li:first-child.active >a:hover, .navbar-nav >li:first-child.active >a:focus,.navbar-nav >li:first-child >a:focus,.navbar-nav >li:first-child >a:hover,.navbar-nav >li:first-child >a {
 	background-color: #028090;
 	color: #FFFFFF !important;
@@ -99,6 +101,15 @@ background-color:#00A896;
 	font-size: 20px;
 }
 
+
+
+
+.navbar-nav >li >a:first-child {
+	display:none;
+	
+}
+
+
 #row-content{
 	margin-left:0;
 	margin-right:0;