Shiny App (using shinydashboard) : page goes weird after login
<p>I create a shiny application but I want users to login to access the application. Then I find a way to create the login page by this:
<a href="https://stackoverflow.com/questions/28987622/starting-shiny-app-after-password-input">Starting Shiny app after password input</a>. But I have a problem that my APP using the package "shinydashboard", and after login the page goes weird. I'm not familiar with HTML things. Does any one knows how to fix this problem?
Codes are below:</p>

<pre><code>library(shiny)
library(shinydashboard)
Logged = FALSE;
my_username &lt;- "test"
my_password &lt;- "test"

ui1 &lt;- function(){
tagList(
div(id = "login",
    wellPanel(textInput("userName", "Username"),
              passwordInput("passwd", "Password"),
              br(),actionButton("Login", "Log in"))),
tags$style(type="text/css", "#login {font-size:10px;   text-align: left;position:absolute;top: 40%;left: 50%;margin-top: -100px;margin-left: -150px;}")
)}

ui2 &lt;- function(){
tagList(
dashboardPage(
  dashboardHeader(title = "MY Web APP"),
  dashboardSidebar(    
    sidebarMenu(
      menuItem("menu1", tabName = "menu1", icon = icon("bank"),
               badgeColor = "blue"),
      menuItem("menu2", tabName = "menu2", icon = icon("bar-chart"))
    )),
  dashboardBody(
    tabItems(
      # First tab content
      tabItem(tabName = "menu1",
              fluidRow(
                sidebarLayout(
                  sidebarPanel(
                    selectInput("pet1","PET:",c("dog","cat","pig"),selected = "dog"),
                    fileInput(inputId = "iFile", label = "Upload Excel:", 
                              accept="application/vnd.ms-excel"),
                    actionButton("go","Go!"),
                    downloadButton('downloadData', 'Download')
                  ),

                  # Show a plot of the generated distribution
                  mainPanel(
                    tabsetPanel(
                      tabPanel("summary", tableOutput("summary1")), 
                      tabPanel("Curve", plotlyOutput("curve1"))
                    )
                  )
                )
              )
      ),

      # Second tab content
      tabItem(tabName = "menu2",
              fluidRow(
                sidebarLayout(
                  sidebarPanel(
                    selectInput("pet1","PET:",c("dog","cat","pig"),selected = "dog"),
                    fileInput(inputId = "iFile", label = "Upload Excel:", 
                              accept="application/vnd.ms-excel"),
                    actionButton("go","Go!"),
                    downloadButton('downloadData', 'Download')
                  ),

                  # Show a plot of the generated distribution
                  mainPanel(
                    tabsetPanel(
                      tabPanel("summary", tableOutput("summary1")), 
                      tabPanel("Curve", plotlyOutput("curve1"))
                    )
                  )
                )
              )
      )
    )
  ),
  skin = "purple"
  )
 )  
}

ui = (htmlOutput("page"))
server = (function(input, output,session) {

USER &lt;- reactiveValues(Logged = Logged)

observe({ 
if (USER$Logged == FALSE) {
  if (!is.null(input$Login)) {
    if (input$Login &gt; 0) {
      Username &lt;- isolate(input$userName)
      Password &lt;- isolate(input$passwd)
      Id.username &lt;- which(my_username == Username)
      Id.password &lt;- which(my_password == Password)
      if (length(Id.username) &gt; 0 &amp; length(Id.password) &gt; 0) {
        if (Id.username == Id.password) {
          USER$Logged &lt;- TRUE
        } 
      }
    } 
  }
}    
})
observe({
if (USER$Logged == FALSE) {

  output$page &lt;- renderUI({
    div(class="outer",do.call(bootstrapPage,c("",ui1())))
  })
}
if (USER$Logged == TRUE) 
{
  output$page &lt;- renderUI({
    div(class="outer",do.call(navbarPage,c(inverse=TRUE,ui2())))
  })
}
})
})

runApp(list(ui = ui, server = server))
</code></pre>

<p>After login the page should be like this:
<a href="https://i.stack.imgur.com/Nl0uk.png" rel="nofollow noreferrer">enter image description here</a></p>

<p>Not like this:
<a href="https://i.stack.imgur.com/UDWoL.png" rel="nofollow noreferrer">enter image description here</a></p>