
        <aside class="main-sidebar col-12 col-md-3 col-lg-2 px-0">
            <div class="main-navbar">
              <nav class="navbar align-items-stretch navbar-light bg-white flex-md-nowrap border-bottom p-0">
                <a class="navbar-brand w-100 mr-0" href="https://appseed.us/admin-dashboards/flask-dashboard-shards" style="line-height: 25px;">
                  <div class="d-table m-auto">
                    <img id="main-logo" class="d-inline-block align-top mr-1" style="max-width: 25px;" src="/static/assets/img/shards-dashboards-logo.svg" alt="Shards Dashboard">
                    <span class="d-none d-md-inline ml-1">Flask Shards Dashboard</span>
                  </div>
                </a>
                <a class="toggle-sidebar d-sm-inline d-md-none d-lg-none">
                  <i class="material-icons">&#xE5C4;</i>
                </a>
              </nav>
            </div>
            <form action="#" class="main-sidebar__search w-100 border-right d-sm-flex d-md-none d-lg-none">
              <div class="input-group input-group-seamless ml-3">
                <div class="input-group-prepend">
                  <div class="input-group-text">
                    <i class="fas fa-search"></i>
                  </div>
                </div>
                <input class="navbar-search form-control" type="text" placeholder="Search for something..." aria-label="Search"> </div>
            </form>

            {% if current_user.is_authenticated %}
              <div class="nav-wrapper">
                <ul class="nav flex-column">
                  <li class="nav-item">
                    <a class="nav-link active" href="/">
                      <i class="material-icons">edit</i>
                      <span>Dashboard</span>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link " href="/blog-posts">
                      <i class="material-icons">vertical_split</i>
                      <span>Blog Posts</span>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link " href="/new-post">
                      <i class="material-icons">note_add</i>
                      <span>Add New Post</span>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link " href="/ui-components">
                      <i class="material-icons">view_module</i>
                      <span>Forms &amp; Components</span>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link " href="/ui-tables">
                      <i class="material-icons">table_chart</i>
                      <span>Tables</span>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/user-profile">
                      <i class="material-icons">person</i>
                      <span>User Profile</span>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link " href="/page-500">
                      <i class="material-icons">error</i>
                      <span>Error 500</span>
                    </a>
                  </li>
                </ul>
              </div>
            {% endif %}

        </aside>
  