html - Rmarkdown, pin author name to bottom of sidebar

Question

I am writing an html document using rmarkdown. I am want to pin the author (and maybe date) to the bottom left (in the sidebar).
I kind of know that I need to somehow get this style to work

 .sidebar-footer{
height: 50px;
position: absolute;
width: 100%;
bottom: 0;
list-style-type: none;
padding-bottom:5.5em;
}

My rmd file is:

---
title: "project"
author: "Name"
date: "11/12/2020"
output:
  html_document:
    toc: true
    toc_float: true
    toc_collapsed: true
    toc_depth: 3
    theme: lumen
    highlight: default
    css: www/css/master.css
---
```{css}
tocify.sidebar-footer{
height: 50px;
position: absolute;
width: 100%;
bottom: 0;
list-style-type: none;
padding-bottom:5.5em;
}
```


<div style="sidebar-footer"> hello 
</div>

# Level one

```{r}
plot(1:10,2:11)
```

## level two

### level three

# level one a

And my custom css is

#TOC{   
    margin: 0 !important;
    height: 100%;
    border: none;
    padding: 0;
    background-color: #f8f8f8;
    left: 0;
    border-right: 1px solid #e7e7e7}
      
.tocify{
  background-color: #f8f8f8;
  border-radius: 0px;
}

.list-group-item{
  background-color: #f8f8f8;
}

div.tocify {
    width: 20%;
    max-width: 260px;
    max-height: 100% !important;
}

I am not overly familiar with the workings of html and css, so would appreciate any help. R has default css that are generate the floating toc etc

question from:https://stackoverflow.com/questions/65516791/rmarkdown-pin-author-name-to-bottom-of-sidebar

Answer 1

Guess that would be easier if you work with shiny and shinydashboard.

Here's a full example.

First you need to prepare a new shiny web app. From RStudio > File > New File > Shiny Web App (1 below) and then select single file app (2 below).

Finally copy/paste the following code.

## app.R ##
library(shiny)
library(shinydashboard)

author <- "John Doe"

ui <- dashboardPage(
    dashboardHeader(title = "TestApp"),
    dashboardSidebar(HTML(paste0(
        "<div style='position: absolute; bottom: 5px;'>",
        author,"<br>",Sys.Date(),
        "</div>"
        ))
        ),
    dashboardBody("Hello")
)

server <- function(input, output) { }

shinyApp(ui, server)