title: How to add a left vertical sidebar to the default template of a .Net Core Web Application in Visual Studio 2019
body: <p>I want to add a left vertical sidebar to the default bootstrap template of an .Net Core 3.1. This sidebar must be visible only for registered users, after the login.
  <a href="https://i.stack.imgur.com/JuK1n.png" rel="nofollow noreferrer">ScreenShot of the default .Net Core Web Application</a></p>
  <p>Here is the code of the _Layout.cshtml:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt;@ViewData["Title"] - Agalber.Hostel.Backoffice&lt;/title&gt;
      &lt;link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /&gt;
      &lt;link rel="stylesheet" href="~/css/site.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"&gt;
              &lt;div class="container"&gt;
                  &lt;a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index"&gt;&lt;img src="~/logoagalber.png" alt="AGALBER" width="102" height="46" /&gt;&lt;/a&gt;
                  &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                          aria-expanded="false" aria-label="Toggle navigation"&gt;
                      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse"&gt;
                      &lt;partial name="_LoginPartial" /&gt;
                      &lt;ul class="navbar-nav flex-grow-1"&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index"&gt;Home&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy"&gt;Privacy&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
      &lt;div class="container"&gt;
          &lt;main role="main" class="pb-3"&gt;
              @RenderBody()
          &lt;/main&gt;
      &lt;/div&gt;
  
      &lt;footer class="border-top footer text-muted"&gt;
          &lt;div class="container"&gt;
              &amp;copy; 2020 - Agalber.Hostel.Backoffice - &lt;a asp-area="" asp-controller="Home" asp-action="Privacy"&gt;Privacy&lt;/a&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
      &lt;script src="~/lib/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
      &lt;script src="~/js/site.js" asp-append-version="true"&gt;&lt;/script&gt;
      @RenderSection("Scripts", required: false)
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>And here is the content of the site.css file.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
  for details on configuring this project to bundle and minify static web assets. */
  
  a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
  }
  
  /* Provide sufficient contrast against white background */
  a {
    color: #0366d6;
  }
  
  .btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
  }
  
  .nav-pills .nav-link.active, .nav-pills .show &gt; .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
  }
  
  /* Sticky footer styles
  -------------------------------------------------- */
  html {
    font-size: 14px;
  }
  @media (min-width: 768px) {
    html {
      font-size: 16px;
    }
  }
  
  .border-top {
    border-top: 1px solid #e5e5e5;
  }
  .border-bottom {
    border-bottom: 1px solid #e5e5e5;
  }
  
  .box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
  }
  
  button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
  }
  
  /* Sticky footer styles
  -------------------------------------------------- */
  html {
    position: relative;
    min-height: 100%;
  }
  
  body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
  }
  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Can anyone help me with this issue?</p>