EDGEdashboard.Rmd

---
title: "Transport decarbonization pathways in Europe"
author: ""
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: fill
    orientation: rows
runtime: flexdashboard
---



```{r loading_required_libraries, include=FALSE}
  #Loading required libraries
  library(flexdashboard)
  library(ggplot2)
  library(plotly)
  library(magclass)
  library(mip)
  library(data.table)
```



```{r creating_charts, include=FALSE}
source("helper_dashboard.R")

legend=plotlist$legend

```

```{r global_options, include=FALSE}
  # setting global R chunk options (https://yihui.name/knitr/options/#chunk_options)
  knitr::opts_chunk$set(dev='svg', fig.asp = 1 ) # fig.asp = default aspect ratio
```

```{r creating_info_tooltips, include=FALSE}
  #data frame with help tooltips

  helpTooltip_df <- data.frame(
    title=c("Distance traveled per capita", 
            "Total Passenger Transport Energy Services Demand", 
            "Sales composition", 
            "Final energy LDVs by fuel",
            "Transport Passenger Final Energy Demand", 
            "Fleet composition", 
            "Fleet composition comparison", 
            "Emission intensity, new sales comparison", 
            "Comparison of passenger final energy demand", 
            "Passenger transport emissions supply and demand", 
            "Emission intensity of new sales", 
            "Comparison of sales composition", 
            "Comparison of passenger transport emissions supply and demand", 
            "Comparison of passenger tailpipe emissions from fossil fuels"),
    placement=c("right", 
                "left",
                "right", 
                "left",
                "right", 
                "right",
                "right",
                "left",
                "right",
                "left",
                "left",
                "right", 
                "right",
                "left"))


helpTooltip = function(tooltipdf){
  
  title <- as.character(tooltipdf$title) 
  placement <- as.character(tooltipdf$placement) 
  
  contents <- gsub('\n', '',gsub('"', '&quot;',paste0('
<div class="tooltipContainer">
  <div class="tooltipDescription">',
    legend[[title]]$description,'
  </div>
  <div class="legendContainer">
  	<table class="legendTable">
  		<tbody>
  			<tr>',
	      do.call(paste,lapply(names(legend[[title]]$contents),function(x){
        paste0('<tr><td>',
          ifelse(is.null(legend[[title]]$contents[[x]]$linetype),
                  paste0('<div class="square"><div class="circle" style="background-color:',legend[[title]]$contents[[x]]$fill,';"></div></div>'),
  				        paste0('<div class="line" style="border-color:',legend[[title]]$contents[[x]]$fill,'; border-style: ',legend[[title]]$contents[[x]]$linetype,';"></div>')
  				        ),'
            </td><td class="legendText">',x,'</td></tr>'
           )
  	    })),'
  		</tbody>
  	</table>
  </div>
</div>')))
  
  result = ""
  result = paste0(result,"<script type='text/javascript'>\n");
  result = paste0(result,"$(window).load(function () {\n");
  result = paste0(result,"  $('.chart-title').filter(function() { return $(this).clone().children().remove().end().text() == '", title, "' }).each(function(){\n");
  if(!(placement == "none"))
    result = paste0(result,"  	$(this).append('<i data-toggle=\"tooltip\" data-html=\"true\" data-placement=\"right\" class = rightal title=\"",contents,"\">Legend</i>');\n");
  result = paste0(result,"  	$(this).find('[data-toggle=\"tooltip\"]').tooltip({ placement:'",placement,"'});\n");
  result = paste0(result,"	})\n");
  result = paste0(result,"})\n");
  result = paste0(result,"</script>");

  return(result)
}

```

<!--############################# -->
<!--#### START OF MENUS CODE #### -->
<!--############################# -->

<!-- ### Creating main emissions menu ### -->

<!--Creating First Page - overview Page-->

LDVs {data-icon="fa-car"}
=====================================

Side Navigation {.sidebar .sidebarLDV data-width=160}
-------------------------------------

[Baseline](#ldvs){class="sidebar-button selected"}
[Conventional Case](#ldvs-conv-scenario){class="sidebar-button"}
[Hydrogen Hype](#ldvs-fcev-scenario){class="sidebar-button"}
[Electric Era](#ldvs-bev-scenario){class="sidebar-button"}
[Synfuel Surge](#ldvs-synfuel-scenario){class="sidebar-button"}

<!-- Dividing the page in two rows-->
Row {data-height=300}
-----------------------------------------------------------------------

### Transport scenario {data-width=100}
```{r}
valueBox("Baseline")
```


### Emissions {data-width=100}
```{r}
valueBox(plotlist$`ConvCase NoTax`$emiscen, icon = "fa-cloud")
```


### Scenario description {data-width=200}

Absence of policies oriented to promote alternative vehicles. Internal combustion engines lead the market.
More information can be found in the [Assumptions].

<!-- Dividing the page in two rows-->
Row {data-height= 450}
-----------------------------------------------------------------------


### Fleet composition {data-width=250}
```{r}
plotlist$`ConvCase NoTax`$plot$vintcomp
```


### Final energy LDVs by fuel {data-width=250}

```{r}
plotlist$`ConvCase NoTax`$plot$EJLDV
```


Row {data-height= 450}
-----------------------------------------------------------------------

### Sales composition {data-width=250}
```{r}
plotlist$`ConvCase NoTax`$plot$salescomp
```


### Emission intensity of new sales {data-width=250}
```{r}
plotlist$`ConvCase NoTax`$plot$CO2km_int_newsales
```

LDVs Conv scenario {.hidden}
===================================== 

Side Navigation {.sidebar .sidebarLDV data-width=160}
-------------------------------------

[Baseline](#ldvs){class="sidebar-button"}
[Conventional Case](#ldvs-conv-scenario){class="sidebar-button selected"}
[Hydrogen Hype](#ldvs-fcev-scenario){class="sidebar-button"}
[Electric Era](#ldvs-bev-scenario){class="sidebar-button"}
[Synfuel Surge](#ldvs-synfuel-scenario){class="sidebar-button"}


<!-- Dividing the page in two rows-->
Row {data-height=300}
-----------------------------------------------------------------------

### Transport scenario {data-width=100}
```{r}
valueBox("Conventional Case")
```


### Emissions {data-width=100}
```{r}
valueBox(plotlist$ConvCase$emiscen, icon = "fa-cloud")
```


### Scenario description {data-width=200}

Absence of policies oriented to promote alternative vehicles. Internal combustion engines lead the market.
More information can be found in the [Assumptions].

<!-- Dividing the page in two rows-->
Row {data-height= 450}
-----------------------------------------------------------------------

### Fleet composition {data-width=250}
```{r}
plotlist$ConvCase$plot$vintcomp
```


### Final energy LDVs by fuel {data-width=250}

```{r}
plotlist$ConvCase$plot$EJLDV
```


Row {data-height= 450}
-----------------------------------------------------------------------

### Sales composition {data-width=250}
```{r}
plotlist$ConvCase$plot$salescomp
```


### Emission intensity of new sales {data-width=250}
```{r}
plotlist$ConvCase$plot$CO2km_int_newsales
```


LDVs FCEV scenario {.hidden}
===================================== 

Side Navigation {.sidebar .sidebarLDV data-width=160}
-------------------------------------

[Baseline](#ldvs){class="sidebar-button"}
[Conventional Case](#ldvs-conv-scenario){class="sidebar-button"}
[Hydrogen Hype](#ldvs-fcev-scenario){class="sidebar-button selected"}
[Electric Era](#ldvs-bev-scenario){class="sidebar-button"}
[Synfuel Surge](#ldvs-synfuel-scenario){class="sidebar-button"}



<!-- Dividing the page in two rows-->
Row {data-height=300}
-----------------------------------------------------------------------

### Transport scenario {data-width=100}
```{r}
valueBox("Hydrogen Hype")
```


### Emissions {data-width=100}
```{r}
valueBox(plotlist$HydrHype$emiscen, icon = "fa-cloud")
```


### Scenario description {data-width=200}

Hydrogen vehicles gain an important share of the mix thanks to policies oriented at promoting them.
More information can be found in the [Assumptions].


<!-- Dividing the page in two rows-->
Row {data-height= 450}
-----------------------------------------------------------------------

### Fleet composition {data-width=250}
```{r}
plotlist$HydrHype$plot$vintcomp
```


### Final energy LDVs by fuel {data-width=250}

```{r}
plotlist$HydrHype$plot$EJLDV
```


Row {data-height= 450}
-----------------------------------------------------------------------

### Sales composition {data-width=250}
```{r}
plotlist$HydrHype$plot$salescomp
```


### Emission intensity of new sales {data-width=250}
```{r}
plotlist$HydrHype$plot$CO2km_int_newsales
```


LDVs BEV scenario {.hidden}
===================================== 


Side Navigation {.sidebar .sidebarLDV data-width=160}
-------------------------------------

[Baseline](#ldvs){class="sidebar-button"}
[Conventional Case](#ldvs-conv-scenario){class="sidebar-button"}
[Hydrogen Hype](#ldvs-fcev-scenario){class="sidebar-button"}
[Electric Era](#ldvs-bev-scenario){class="sidebar-button selected"}
[Synfuel Surge](#ldvs-synfuel-scenario){class="sidebar-button"}



<!-- Dividing the page in two rows-->
Row {data-height=300}
-----------------------------------------------------------------------

### Transport scenario {data-width=100}
```{r}
valueBox("Electric Era")
```


### Emissions {data-width=100}
```{r}
valueBox(plotlist$ElecEra$emiscen, icon = "fa-cloud")
```


### Scenario description {data-width=200}

Electric vehicles gain an important share of the mix thanks to policies oriented at promoting them. More information can be found in the [Assumptions].


<!-- Dividing the page in two rows-->
Row {data-height= 450}
-----------------------------------------------------------------------

### Fleet composition {data-width=250}
```{r}
plotlist$ElecEra$plot$vintcomp
```


### Final energy LDVs by fuel {data-width=250}

```{r}
plotlist$ElecEra$plot$EJLDV
```


Row {data-height= 450}
-----------------------------------------------------------------------

### Sales composition {data-width=250}
```{r}
plotlist$ElecEra$plot$salescomp
```


### Emission intensity of new sales {data-width=250}
```{r}
plotlist$ElecEra$plot$CO2km_int_newsales
```


LDVs Synfuel scenario {.hidden}
===================================== 

Side Navigation {.sidebar .sidebarLDV data-width=160}
-------------------------------------

[Baseline](#ldvs){class="sidebar-button"}
[Conventional Case](#ldvs-conv-scenario){class="sidebar-button"}
[Hydrogen Hype](#ldvs-fcev-scenario){class="sidebar-button"}
[Electric Era](#ldvs-bev-scenario){class="sidebar-button"}
[Synfuel Surge](#ldvs-synfuel-scenario){class="sidebar-button selected"}


<!-- Dividing the page in two rows-->
Row {data-height=300}
-----------------------------------------------------------------------

### Transport scenario {data-width=100}
```{r}
valueBox("Synfuel Surge")
```


### Emissions {data-width=100}
```{r}
valueBox(plotlist$SynSurge$emiscen, icon = "fa-cloud")
```


### Scenario description {data-width=200}

Synthetic fuels gain great importance in the liquid fuels production. Absence of policies oriented to promote alternative vehicles. Internal combustion engines lead the market.
More information can be found in the [Assumptions].



<!-- Dividing the page in two rows-->
Row {data-height= 450}
-----------------------------------------------------------------------

### Fleet composition {data-width=250}
```{r}
plotlist$SynSurge$plot$vintcomp
```


### Final energy LDVs by fuel {data-width=250}

```{r}
plotlist$SynSurge$plot$EJLDV
```


Row {data-height= 450}
-----------------------------------------------------------------------

### Sales composition {data-width=250}
```{r}
plotlist$SynSurge$plot$salescomp
```


### Emission intensity of new sales {data-width=250}
```{r}
plotlist$SynSurge$plot$CO2km_int_newsales
```

Comparison {data-icon="fa-exchange-alt"}
=====================================

Row {data-height = 450}
-----------------------------------------------------------------------

### Fleet composition comparison
```{r}
plotlist$comparison$plot$vintscen
```

### Comparison of sales composition
```{r}
plotlist$comparison$plot$salescom_scen
```

### Emission intensity, new sales comparison
```{r}
plotlist$comparison$plot$CO2km_intensity_newsales_scen
```

Row {data-height = 450}
-----------------------------------------------------------------------

### Comparison of passenger final energy demand

```{r}
plotlist$comparison$plot$EJpassfuels_scen
```


### Comparison of passenger transport emissions supply and demand

```{r}
plotlist$comparison$plot$emiptot_scen
```


### Comparison of passenger tailpipe emissions from fossil fuels

```{r}
plotlist$comparison$plot$emipfos_scen
```

Passenger transport overview {data-icon="glyphicon glyphicon-scale"}
===================================== 
Side Navigation {.sidebar .sidebarOverview data-width=160}
-------------------------------------

[Baseline](#passenger-transport-overview){class="sidebar-button selected"}
[Conventional Case](#passenger-transport-overview-conv-scenario){class="sidebar-button"}
[Hydrogen Hype](#passenger-transport-overview-fcev-scenario){class="sidebar-button"}
[Electric Era](#passenger-transport-overview-bev-scenario){class="sidebar-button"}
[Synfuel Surge](#passenger-transport-overview-synfuel-scenario){class="sidebar-button"}

Row {data-height=300}
-----------------------------------------------------------------------

### Transport scenario {data-width=100}
```{r}
valueBox("Baseline")
```


### Emissions {data-width=100}
```{r}
valueBox(plotlist$`ConvCase NoTax`$emiscen, icon = "fa-cloud")
```


### Scenario description {data-width=200}

Absence of policies oriented to promote alternative vehicles. Internal combustion engines lead the market.
More information can be found in the [Assumptions].

<!-- Dividing the page in two columns-->
Row {data-heigth=500}
-----------------------------------------------------------------------

### Distance traveled per capita
```{r}
plotlist$`ConvCase NoTax`$plot$ESmodecap_pass
```

### Total Passenger Transport Energy Services Demand
```{r}
plotlist$`ConvCase NoTax`$plot$ESmodeabs
```


Row {data-heigth=500}
-----------------------------------------------------------------------

### Transport Passenger Final Energy Demand

```{r}
plotlist$`ConvCase NoTax`$plot$EJpassfuels
```

### Passenger transport emissions supply and demand

```{r}
plotlist$`ConvCase NoTax`$plot$emip
```

Passenger transport overview Conv scenario {.hidden}
=====================================

Side Navigation {.sidebar .sidebarOverview data-width=160}
-------------------------------------

[Baseline](#passenger-transport-overview){class="sidebar-button"}
[Conventional Case](#passenger-transport-overview-conv-scenario){class="sidebar-button selected"}
[Hydrogen Hype](#passenger-transport-overview-fcev-scenario){class="sidebar-button"}
[Electric Era](#passenger-transport-overview-bev-scenario){class="sidebar-button"}
[Synfuel Surge](#passenger-transport-overview-synfuel-scenario){class="sidebar-button"}


<!-- Dividing the page in two rows-->
Row {data-height=300}
-----------------------------------------------------------------------

### Transport scenario {data-width=100}
```{r}
valueBox("Conventional Case")
```


### Emissions {data-width=100}
```{r}
valueBox(plotlist$ConvCase$emiscen, icon = "fa-cloud")
```


### Scenario description {data-width=200}

Absence of policies oriented to promote alternative vehicles. Internal combustion engines lead the market. More information can be found in the [Assumptions].

<!-- Dividing the page in two columns-->
Row {data-heigth=500}
-----------------------------------------------------------------------

### Distance traveled per capita
```{r}
plotlist$ConvCase$plot$ESmodecap_pass
```

### Total Passenger Transport Energy Services Demand
```{r}
plotlist$ConvCase$plot$ESmodeabs
```


Row {data-heigth=500}
-----------------------------------------------------------------------

### Transport Passenger Final Energy Demand

```{r}
plotlist$ConvCase$plot$EJpassfuels
```

### Passenger transport emissions supply and demand

```{r}
plotlist$ConvCase$plot$emip
```


Passenger transport overview FCEV scenario {.hidden}
===================================== 

Side Navigation {.sidebar .sidebarOverview data-width=160}
-------------------------------------

[Baseline](#passenger-transport-overview){class="sidebar-button"}
[Conventional Case](#passenger-transport-overview-conv-scenario){class="sidebar-button"}
[Hydrogen Hype](#passenger-transport-overview-fcev-scenario){class="sidebar-button selected"}
[Electric Era](#passenger-transport-overview-bev-scenario){class="sidebar-button"}
[Synfuel Surge](#passenger-transport-overview-synfuel-scenario){class="sidebar-button"}


<!-- Dividing the page in two rows-->
Row {data-height=300}
-----------------------------------------------------------------------

### Transport scenario {data-width=100}
```{r}
valueBox("Hydrogen Hype")
```


### Emissions {data-width=100}
```{r}
valueBox(plotlist$HydrHype$emiscen, icon = "fa-cloud")
```


### Scenario description {data-width=200}

Hydrogen vehicles gain an important share of the mix thanks to policies oriented at promoting them.
More information can be found in the [Assumptions].

<!-- Dividing the page in two columns-->
Row {data-heigth=500}
-----------------------------------------------------------------------

### Distance traveled per capita
```{r}
plotlist$HydrHype$plot$ESmodecap_pass
```

### Total Passenger Transport Energy Services Demand
```{r}
plotlist$HydrHype$plot$ESmodeabs
```


Row {data-heigth=500}
-----------------------------------------------------------------------

### Transport Passenger Final Energy Demand

```{r}
plotlist$HydrHype$plot$EJpassfuels
```

### Passenger transport emissions supply and demand

```{r}
plotlist$HydrHype$plot$emip
```

Passenger transport overview BEV scenario {.hidden}
===================================== 

Side Navigation {.sidebar .sidebarOverview data-width=160}
-------------------------------------

[Baseline](#passenger-transport-overview){class="sidebar-button"}
[Conventional Case](#passenger-transport-overview-conv-scenario){class="sidebar-button"}
[Hydrogen Hype](#passenger-transport-overview-fcev-scenario){class="sidebar-button"}
[Electric Era](#passenger-transport-overview-bev-scenario){class="sidebar-button selected"}
[Synfuel Surge](#passenger-transport-overview-synfuel-scenario){class="sidebar-button"}

Row {data-height=300}
-----------------------------------------------------------------------

### Transport scenario {data-width=100}
```{r}
valueBox("Electric Era")
```


### Emissions {data-width=100}
```{r}
valueBox(plotlist$ElecEra$emiscen, icon = "fa-cloud")
```


### Scenario description {data-width=200}

Electric vehicles gain an important share of the mix thanks to policies oriented at promoting them.
More information can be found in the [Assumptions].


<!-- Dividing the page in two columns-->
Row {data-heigth=500}
-----------------------------------------------------------------------

### Distance traveled per capita
```{r}
plotlist$ElecEra$plot$ESmodecap_pass
```

### Total Passenger Transport Energy Services Demand
```{r}
plotlist$ElecEra$plot$ESmodeabs
```


Row {data-heigth=500}
-----------------------------------------------------------------------

### Transport Passenger Final Energy Demand

```{r}
plotlist$ElecEra$plot$EJpassfuels
```

### Passenger transport emissions supply and demand

```{r}
plotlist$ElecEra$plot$emip
```

Passenger transport overview Synfuel scenario {.hidden}
===================================== 

Side Navigation {.sidebar .sidebarOverview data-width=160}
-------------------------------------

[Baseline](#passenger-transport-overview){class="sidebar-button"}
[Conventional Case](#passenger-transport-overview-conv-scenario){class="sidebar-button"}
[Hydrogen Hype](#passenger-transport-overview-fcev-scenario){class="sidebar-button"}
[Electric Era](#passenger-transport-overview-bev-scenario){class="sidebar-button"}
[Synfuel Surge](#passenger-transport-overview-synfuel-scenario){class="sidebar-button selected"}

Row {data-height=300}
-----------------------------------------------------------------------

### Transport scenario {data-width=100}
```{r}
valueBox("Synfuel Surge")
```


### Emissions {data-width=100}
```{r}
valueBox(plotlist$SynSurge$emiscen, icon = "fa-cloud")
```


### Scenario description {data-width=200}

Synthetic fuels gain importance in the liquid fuels production. Absence of policies oriented to promote electric and hydrogen vehicles, while internal combustion engines lead the market.
More information can be found in the [Assumptions].

<!-- Dividing the page in two columns-->
Row {data-heigth=500}
-----------------------------------------------------------------------

### Distance traveled per capita
```{r}
plotlist$SynSurge$plot$ESmodecap_pass
```

### Total Passenger Transport Energy Services Demand
```{r}
plotlist$SynSurge$plot$ESmodeabs
```


Row {data-heigth=500}
-----------------------------------------------------------------------

### Transport Passenger Final Energy Demand

```{r}
plotlist$SynSurge$plot$EJpassfuels
```

### Passenger transport emissions supply and demand

```{r}
plotlist$SynSurge$plot$emip
```


Assumptions {data-icon="glyphicon glyphicon-th-list"}
=====================================

Column {data-width= 450}
-----------------------------------------------------------------------

### Baseline (No Carbon Pricing) {data-height=200}
</ul style="padding-left:20px"> 
  <li class="shift"> Structurally conservative: continuation of historic consumer preferences for conventional combustion engine cars. </li>
  <li class="shift"> No policies to promote alternative vehicles </li>
  <li class="shift"> Slow build-up of electric recharging stations </li>
</ul>


### Conventional Case {data-height=200}

</ul style="padding-left:20px">
  <li class="shift"> Carbon pricing </li>
  <li class="shift"> Structurally conservative: continuation of historic consumer preferences for conventional combustion engine cars </li>
  <li class="shift"> No policies to promote alternative vehicles </li>
  <li class="shift"> Slow build-up of electric recharging stations </li>
</ul>


### Hydrogen Hype {data-height=200}

</ul style="padding-left:20px">
  <li class="shift"> Carbon pricing </li>
  <li class="shift"> Fast build-up of hydrogen refuelling stations </li>
  <li class="shift"> Rebates-feebates scheme: FCEVs receive 5000&euro; subsidies for purchases in 2020, around 3300&euro; in 2025 and 1700&euro; in 2030. 1000&euro; mark-up cost on internal combustion engines are applied in 2020, 700&euro; in 2025 and 300&euro; in 2030 </li>
  <li class="shift"> Increasing dis-preference for internal combustion engines due to tightening regulation </li>
  <li class="shift"> Policy push for FCEVs: Support policies induce a shift from dis-preference to preference of hydrogen vehicles, e.g. incentives to carmakers and car retailers to provide hidrogen vehicles </li>
  <li class="shift"> Hydrogen from electricity is at least 95&#37; of the total hydrogen, with electricity from renewable resources reaching around 90&#37; of the electricity production in 2050 </li>
  <li class="shift"> Slow build-up of electric recharging stations </li>
</ul>


### Electric Era {data-height=200}

</ul style="padding-left:20px">
  <li class="shift"> Carbon pricing </li>
  <li class="shift"> Rebates-feebates scheme: BEVs receive 5000&euro; subsidies for purchases in 2020, around 3300&euro; in 2025 and 1700&euro; in 2030. 1000&euro; mark-up cost on internal combustion engines are applied in 2020, 700&euro; in 2025 and 300&euro; in 2030 </li>
  <li class="shift"> Increasing dis-preference for internal combustion engines due to tightening regulation </li>
</ul>


### Synfuel Surge {data-height=200}

</ul style="padding-left:20px">
  <li class="shift"> Carbon pricing </li>
  <li class="shift"> Structurally conservative: continuation of historic consumer preferences for conventional combustion engine cars </li>
  <li class="shift"> Synfuels are forced in the liquids mix  blending mandates reaching 20&#37; of liquids fuels in transportation by 2035 </li>
  <li class="shift"> Hydrogen from electricity is at least 95&#37; of the total hydrogen, with electricity from renewable resources reaching around 90&#37; of the electricity production in 2050</li>
  <li class="shift"> CO<sub>2</sub> emissions from other sources (e.g., industrial installations) are captured and reused to produce syntethic fuels (Carbon Capture and Utilization) </li>
</ul>




<!-- creating information tooltip -->
```{r, results='asis'}
for(i in 1:nrow(helpTooltip_df)){
  cat(helpTooltip(helpTooltip_df[i,]))
}
```

<!-- #### additional html, js and CSS #### -->

<!-- js -->

<script type="text/javascript">
  var is_chrome = (typeof window.chrome === "object" && navigator.appVersion.indexOf('Edge') === -1);
</script>


<!-- Adding js function to add "memory" to the nav bar navigation   -->
```{r}
navBarMemory = function(topMenuLabel, sideBarClass){
  result = ""
  result = paste0(result,"<script type='text/javascript'>\n");
  result = paste0(result,"$(document).ready(function () {\n");
  result = paste0(result,"	$(\"",sideBarClass," a\").click(function(){\n");
  result = paste0(result,"	console.log($(this).attr('href'));\n");  
  result = paste0(result,"	console.log($(\".nav.navbar-nav.navbar-left a:contains('",topMenuLabel,"')\").attr('href'));\n"); 
  result = paste0(result,"	  $(\".nav.navbar-nav.navbar-left a:contains('",topMenuLabel,"')\").attr('href', $(this).attr('href'));\n");
  result = paste0(result,"	  if(!is_chrome){\n");
  result = paste0(result,"	    window.FlexDashboardUtils.showPage($(this).attr('href'));\n");
  result = paste0(result,"	  }\n"); 
  result = paste0(result,"	})\n");
  result = paste0(result,"})\n");
  result = paste0(result,"</script>");
  return(result)
}
```

```{r, results='asis'}
  cat(navBarMemory("Passenger transport overview",".sidebarOverview"))
  cat(navBarMemory("LDVs",".sidebarLDV"))
```

<!-- ADVANCED: using CSS to define the appearance of the side bar --> 

<!-- CSS -->
<style type="text/css">
  <!-- title font of panels -->  
  .chart-title {  /* chart_title  */
   font-size: 30px;
   font-family: Algerian;
  }
   
  .sidebar-button {  /* sidebar size  */
     display: inline-block;
     font-size: 20px;
     height: 30px;
     padding-top: 20px
  }
  
  .sidebar-button, .sidebar-button:hover {
    text-decoration: none;
  }
  
  .sidebar-button.selected, .sidebar-button.selected:hover {
    opacity: 1;
  }
  
  .sidebar-button {
    opacity: 0.7;
  }
  
  .sidebar-button:hover {
    opacity: 0.4;
  }
  
  /*legend*/
  .tooltipContainer {
    padding: 5px;
  }
  
  .tooltipDescription {
    width: fit-content;
    margin: 5px auto;
  }
  
  .legendContainer {
	}

  .legendTable {
    margin:auto;
    text-align: left;
    border-collapse: separate;
    border-spacing: 2px;
	}

  .legendText {
    padding: 4px 20px;
  }

  .legendTable tr:nth-child(odd) {
	  background-color: #1d1e1f; /* Background-color of odd rows */
  }

  .legendTable tr:nth-child(even) {
	  background-color: #32353a; /* Background-color of even rows */
  }

  .square {
    height: 16px; 
    width: 16px; 
    margin: 4px 12px;
  }

  .circle {
    height: 100%; 
    width: 100%; 
    border-radius: 50%; 
    display: inline-block;
  }
  
  .line{
    width: 80%; 
    min-width: 22px;
    border: 1px solid #fff;
    margin: auto;
  }