Reorganized navbar

Updated search field, new user menu

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

@@ -1,17 +1,43 @@
 <nav class="navbar navbar-dark sticky-top bg-primary flex-md-nowrap p-0 shadow">
-  <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" routerLink="/dashboard">
+  <button class="navbar-toggler d-md-none collapsed border-0" type="button" data-toggle="collapse"
-    <img src="assets/logo-dark-notext.svg" height="18px" class="mr-2">
-    <ng-container i18n="app title">Paperless-ng</ng-container>
-  </a>
-  <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"
     (click)="isMenuCollapsed = !isMenuCollapsed">
     <span class="navbar-toggler-icon"></span>
   </button>
-  <form (ngSubmit)="search()" class="w-100 m-1">
+  <a class="navbar-brand col-auto col-md-3 col-lg-2 mr-0 px-3 py-3 order-sm-0" routerLink="/dashboard">
-    <input class="form-control form-control-dark" type="text" placeholder="Search for documents" aria-label="Search"
+    <img src="assets/logo-dark-notext.svg" height="18px" class="mr-2">
-      [formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (selectItem)="itemSelected($event)" i18n-placeholder>
+    <ng-container i18n="app title">Paperless-ng</ng-container>
-  </form>
+  </a>
+  <div class="search-form-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 mr-sm-auto order-3 order-sm-1">
+    <form (ngSubmit)="search()" class="form-inline flex-grow-1">
+      <input class="form-control form-control-sm" type="text" placeholder="Search documents" aria-label="Search"
+        [formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (selectItem)="itemSelected($event)" i18n-placeholder>
+      <svg width="1em" height="1em">
+        <use xlink:href="assets/bootstrap-icons.svg#search"/>
+      </svg>
+    </form>
+  </div>
+  <ul ngbNav class="order-sm-3">
+    <li ngbDropdown class="nav-item dropdown">
+      <button class="btn text-light" id="userDropdown" ngbDropdownToggle>
+        <svg width="1.3em" height="1.3em">
+          <use xlink:href="assets/bootstrap-icons.svg#person-circle"/>
+        </svg>
+      </button>
+      <div ngbDropdownMenu class="dropdown-menu-right shadow mr-2" aria-labelledby="userDropdown">
+          <a ngbDropdownItem class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()">
+            <svg class="sidebaricon" fill="currentColor">
+              <use xlink:href="assets/bootstrap-icons.svg#gear"/>
+            </svg>&nbsp;<ng-container i18n>Settings</ng-container>
+          </a>
+          <a ngbDropdownItem class="nav-link" href="accounts/logout/">
+            <svg class="sidebaricon" fill="currentColor">
+              <use xlink:href="assets/bootstrap-icons.svg#door-open"/>
+            </svg>&nbsp;<ng-container i18n>Logout</ng-container>
+          </a>
+      </div>
+    </li>
+  </ul>
 </nav>
 
 <div class="container-fluid">
@@ -105,13 +131,6 @@
               </svg>&nbsp;<ng-container i18n>Logs</ng-container>
             </a>
           </li>
-          <li class="nav-item">
-            <a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#gear"/>
-              </svg>&nbsp;<ng-container i18n>Settings</ng-container>
-            </a>
-          </li>
           <li class="nav-item">
             <a class="nav-link" href="admin/">
               <svg class="sidebaricon" fill="currentColor">
@@ -139,13 +158,6 @@
               </svg>&nbsp;<ng-container i18n>GitHub</ng-container>
             </a>
           </li>
-          <li class="nav-item">
-            <a class="nav-link" href="accounts/logout/">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#door-open"/>
-              </svg>&nbsp;<ng-container i18n>Logout</ng-container>
-            </a>
-          </li>
         </ul>
       </div>
     </nav>

src-ui/src/app/components/app-frame/app-frame.component.scss

@@ -72,17 +72,42 @@
   padding-top: .75rem;
   padding-bottom: .75rem;
   font-size: 1rem;
-  background-color: rgba(0, 0, 0, .25);
-  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
 }
 
-.navbar .navbar-toggler {
+.navbar .search-form-container {
-  top: .25rem;
+  max-width: 550px;
-  right: 1rem;
+  position: relative;
-}
 
-.navbar .form-control {
+  svg {
-  padding: .75rem 1rem;
+    position: absolute;
-  border-width: 0;
+    left: 1.8em;
-  border-radius: 0;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  &:focus-within {
+    svg {
+      display: none;
+    }
+  }
+
+  .form-control {
+    color: rgba(255, 255, 255, 0.5);
+    background-color: rgba(0, 0, 0, 0.2);
+    padding-left: 1.8rem;
+    border-color: rgba(255, 255, 255, 0.5);
+    transition: flex 0.3s ease;
+    max-width: 600px;
+    min-width: 300px; // 1/2 max
+
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.5);
+    }
+
+    &:focus {
+      background-color: #fff;
+      color: initial;
+      flex-grow: 1;
+      padding-left: 0.5rem;
+    }
+  }
 }