material_side_nav: Create a side-nav that contains UI content

In shinymaterial: Implement Material Design in Shiny Applications

Description

UI content can be placed in side-nav.

Usage

material_side_nav(
  ...,
  fixed = FALSE,
  image_source = NULL,
  background_color = NULL
)

Arguments

...	The UI elements to place in the side-nav.
fixed	Boolean. Set to TRUE to keep side-nav open on large screens.
image_source	String. The background image file name. Place the image in a folder labeled 'www' at the same level as the application (server.R & ui.R).
background_color	Side-nav background color. Leave blank for the default color. Visit https://materializecss.com/color.html for a list of available colors.

Examples

material_side_nav(
  fixed = FALSE,
  image_source = "example_image.jpg",
  background_color = "blue lighten-4",
  shiny::tags$h1("Side-Nav Content")
)

Example output

<style type="text/css"></style>
<ul id="slide-out" class="side-nav blue lighten-4">
  <li>
    <div style="height:160px" class="userView">
      <div class="background">
        <img style="height:160px;width:300px" src="example_image.jpg"/>
      </div>
    </div>
  </li>
  <h1>Side-Nav Content</h1>
</ul>
<script>   $(document).ready(function () {

       $('.nav-wrapper').prepend('<a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>');
       $(".button-collapse").sideNav();
   })</script>

shinymaterial documentation built on Sept. 1, 2020, 1:07 a.m.