html created using shiny/shinydashboard source codes not rendering properly

shiny
,
1

I am trying to create an HTML page which should have a similar appearance as the following shiny app

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  skin = "purple",
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody()
)

server <- function(input, output) { }
shinyApp(ui, server)

I used Ctrl+u to view the page source, copied the code and also the source codes from github corresponding to shiny and shinydashboard packages. After fixing path to css and js files the HTML codes looks like below:

<!DOCTYPE html>
<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="application/shiny-singletons"></script>
    <script type="application/html-dependencies">
        json2[2014.02.04];jquery[3.4.1];shiny[1.4.0.2];font-awesome[5.3.1];bootstrap[3.4.1];AdminLTE[2.0.6];shinydashboard[0.7.1]
    </script>
    <script src="shared/json2-min.js"></script>
    <script src="shared/jquery.min.js"></script>
    <link href="shared/shiny.css" rel="stylesheet" />
    <script src="shared/shiny.min.js"></script>
    <link href="shared/font-awesome/css/all.min.css" rel="stylesheet" />
    <link href="shared/font-awesome/css/v4-shims.min.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="shared/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="shared/bootstrap/js/bootstrap.min.js"></script>
    <script src="shared/bootstrap/shim/html5shiv.min.js"></script>
    <script src="shared/bootstrap/shim/respond.min.js"></script>
    <link href="shinydashboard/AdminLTE/AdminLTE.min.css" rel="stylesheet" />
    <link href="shinydashboard/AdminLTE/_all-skins.min.css" rel="stylesheet" />
    <link href="shinydashboard/AdminLTE/app.min.js" rel="stylesheet" />
    <link href="shinydashboard/shinydashboard.css" rel="stylesheet" />
    <script src="shinydashboard/shinydashboard.min.js"></script>

</head>

<body class="skin-purple" style="min-height: 611px;">
    <div class="wrapper">
        <header class="main-header">
            <span class="logo"></span>
            <nav class="navbar navbar-static-top" role="navigation">
                <span style="display:none;">
                    <i class="fa fa-bars"></i>
                </span>
                <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                    <span class="sr-only">Toggle navigation</span>
                </a>
                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav"></ul>
                </div>
            </nav>
        </header>
        <aside id="sidebarCollapsed" class="main-sidebar" data-collapsed="false">
            <section id="sidebarItemExpanded" class="sidebar"></section>
        </aside>
        <div class="content-wrapper">
            <section class="content"></section>
        </div>
    </div>
</body>

</html>

However, it is not rendering as expected. The output is opaque and the sidebar toggle is not functioning. Code with its dependencies is available in the link below
ftp://ftp.lrz.de/transfer/App_dir/
What could be the reason? I will appreciate suggestions to figure out the cause.

2

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.