paperless-ngx/src-ui/src/app/components/app-frame/app-frame.component.html

<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
  <span class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Paperless</span>
  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse"
    data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <form (ngSubmit)="search()" class="w-100">
    <input class="form-control form-control-dark" type="text" placeholder="Search" aria-label="Search"
      [formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (selectItem)="itemSelected($event)">
  </form>
  <ul class="navbar-nav px-3">
    <li class="nav-item text-nowrap">
      <a class="nav-link" href="accounts/logout/">
        <svg class="buttonicon" fill="currentColor">
          <use xlink:href="assets/bootstrap-icons.svg#door-closed"/>
        </svg>
        Logout
      </a>
    </li>
  </ul>
</nav>

<div class="container-fluid">
  <div class="row">
    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
      <div class="sidebar-sticky pt-3">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link" routerLink="dashboard" routerLinkActive="active">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#house"/>
              </svg>
              Dashboard
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="documents" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#files"/>
              </svg>
              Documents
            </a>
          </li>
        </ul>

        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted" *ngIf='viewConfigService.getSideBarConfigs().length > 0'>
          <span>Saved views</span>
        </h6>
        <ul class="nav flex-column mb-2">
          <li class="nav-item w-100" *ngFor='let config of viewConfigService.getSideBarConfigs()'>
            <a class="nav-link text-truncate" routerLink="view/{{config.id}}" routerLinkActive="active">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#funnel"/>
              </svg>
              {{config.title}}
            </a>
          </li>
        </ul>

        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted" *ngIf='openDocuments.length > 0'>
          <span>Open documents</span>
        </h6>
        <ul class="nav flex-column mb-2">
          <li class="nav-item w-100" *ngFor='let d of openDocuments'>
            <a class="nav-link text-truncate" routerLink="documents/{{d.id}}" routerLinkActive="active">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
              </svg>
              {{d.title}}
            </a>
          </li>
        </ul>

        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
          <span>Manage</span>
        </h6>
        <ul class="nav flex-column mb-2">
          <li class="nav-item">
            <a class="nav-link" routerLink="correspondents" routerLinkActive="active">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#person"/>
              </svg>
              Correspondents
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="tags" routerLinkActive="active">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#tags"/>
              </svg>
              Tags
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="documenttypes" routerLinkActive="active">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#hash"/>
              </svg>
              Document types
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="logs" routerLinkActive="active">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#text-left"/>
              </svg>
              Logs
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="settings" routerLinkActive="active">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#gear"/>
              </svg>
              Settings
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="admin/">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#toggles"/>
              </svg>
              Admin
            </a>
          </li>
        </ul>
      </div>
    </nav>

    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
      <router-outlet></router-outlet>
    </main>
  </div>
</div>