fix mobile search, reorder menu

ngsw-config.json

@@ -2,7 +2,7 @@
   "$schema": "./node_modules/@angular/service-worker/config/schema.json",
   "index": "/index.html",
   "appData": {
-    "version": "1.5.1"
+    "version": "1.5.2"
   },
   "assetGroups": [
     {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "bstlboard",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "bstlboard",
-      "version": "1.5.1",
+      "version": "1.5.2",
       "license": "AGPL3",
       "dependencies": {
         "@angular-material-components/datetime-picker": "^9.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bstlboard",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "license": "AGPL3",
   "scripts": {
     "ng": "ng",

src/app/ui/main/main.ui.html

@@ -45,10 +45,10 @@
 </mat-toolbar>
 
 <mat-sidenav-container>
-  <mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'side' : 'over'" [(opened)]="opened"
+  <mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'side' : 'over'" [(opened)]="opened || searchFocus"
     (click)="!isBiggerScreen() && this.close()">
-    <mat-nav-list>
+    <mat-nav-list *ngIf="authenticated">
-      <ui-viewmenu *ngIf="authenticated"></ui-viewmenu>
+      <ui-viewmenu></ui-viewmenu>
       <mat-divider *ngIf="moderator"></mat-divider>
       <a *ngIf="moderator" routerLink="/moderation/entries" routerLinkActive="active" mat-list-item>
         <mat-icon matListItemIcon>report</mat-icon>
@@ -58,12 +58,18 @@
         <mat-icon matListItemIcon>feedback</mat-icon>
         <span>{{'moderation.comments' | i18n}}</span>
       </a>
-      <mat-divider *ngIf="authenticated"></mat-divider>
+      <mat-divider></mat-divider>
-      <a *ngIf="authenticated" routerLink="/bookmarks" routerLinkActive="active" mat-list-item>
+      <a routerLink="/bookmarks" routerLinkActive="active" mat-list-item>
         <mat-icon matListItemIcon>bookmarks</mat-icon>
         <span>{{'bookmarks' | i18n}}</span>
       </a>
-      <mat-divider *ngIf="authenticated"></mat-divider>
+    </mat-nav-list>
+    <mat-form-field *ngIf="authenticated" (click)="preventClose($event)">
+      <input matInput type="text" (change)="search($event.target && $event.target.value || undefined, $event)"
+        placeholder="{{'search' | i18n}}" (focus)="searchFocus = true" (blur)="searchFocus = false">
+    </mat-form-field>
+    <span class="spacer"></span>
+    <mat-nav-list>
       <a (click)="openExternal($event,'https://wiki.bstly.de/services/bstlboard#faq','_blank')"
         routerLinkActive="active" mat-list-item>
         <mat-icon matListItemIcon>help</mat-icon>
@@ -71,12 +77,6 @@
       </a>
     </mat-nav-list>
 
-    <mat-form-field *ngIf="authenticated" (click)="preventClose($event)">
-      <input matInput type="text" (change)="search($event.target && $event.target.value || undefined, $event)"
-        placeholder="{{'search' | i18n}}">
-    </mat-form-field>
-
-    <span class="spacer"></span>
     <mat-nav-list>
       <mat-divider></mat-divider>
       <a (click)="openExternal($event,'https://www.bstly.de/imprint/')" mat-list-item style="font-size: 0.7em;">

src/app/ui/main/main.ui.ts

@@ -27,6 +27,7 @@ export class UiMain {
   locales;
   authenticated: boolean = false;
   moderator: boolean = false;
+  searchFocus: boolean = false;
 
   touchThresh: number = 150;
   touchStartX: number;
@@ -105,13 +106,14 @@ export class UiMain {
   }
 
   search(text, event) {
-    if (text) {
-      this.router.navigate(["search"], { queryParams: { q: text } });
-    }
     event.target.value = '';
+    event.target.blur();
     if (!this.isBiggerScreen()) {
       this.close();
     }
+    if (text) {
+      this.router.navigate(["search"], { queryParams: { q: text } });
+    }
   }
 
   toggleDarkTheme() {