feat(discover): 💄 Moved the advanced search to the nav bar for better discovery

src/Ombi/.vscode/settings.json

@@ -10,5 +10,8 @@
     "cSpell.words": [
         "usermanagement"
     ],
-    "discord.enabled": true
+    "discord.enabled": true,
+    "conventionalCommits.scopes": [
+        "discover"
+    ]
 }

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html

@@ -9,8 +9,7 @@
             <span  mat-list-item  *ngFor="let nav of navItems">
 
                 <div class="menu-spacing mat-ripple" mat-ripple *ngIf="(nav.requiresAdmin && isAdmin || !nav.requiresAdmin) && nav.enabled">
-
-
+                    <!-- External -->
                     <a [disableRipple]="true" mat-list-item  id="{{nav.id}}" *ngIf="nav.externalLink" [href]="nav.link" target="_blank"
                         matTooltip="{{nav.toolTipMessage | translate}}" matTooltipPosition="right"
                         [routerLinkActive]="'active-list-item'">
@@ -19,7 +18,12 @@
                             style="padding-left: 5px; padding-right: 5px;" aria-hidden="true"></i>
                         &nbsp;{{nav.name | translate}}
                     </a>
-                    <a [disableRipple]="true"  mat-list-item  id="{{nav.id}}" *ngIf="!nav.externalLink" [routerLink]="nav.link" [style]="nav.color"
+
+                    <!-- Internal -->
+                    <ng-container *ngIf="nav.id === 'nav-discover'">
+                        <em class="advanced-search fa-lg fas fa-filter " (click)="openAdvancedSearch()" [routerLinkActive]="'active-advanced'" [routerLink]="nav.link"></em>
+                    </ng-container>
+                    <a [disableRipple]="true" mat-list-item id="{{nav.id}}" *ngIf="!nav.externalLink" [routerLink]="nav.link" [style]="nav.style"
                         [routerLinkActive]="'active-list-item'">
 
                         <i class="fa-lg {{nav.icon}} icon-spacing"></i>
@@ -28,7 +32,7 @@
                 </div>
             </span>
 
-            <span mat-list-item  >
+            <span mat-list-item >
             <a mat-list-item [disableRipple]="true" id="nav-openMobile" [routerLinkActive]="'active-list-item'"
                 aria-label="Toggle sidenav" (click)="openMobileApp($event);">
                 <i class="fa-lg fas fa-mobile-alt  icon-spacing"></i>
@@ -78,7 +82,6 @@
                         <mat-slide-toggle id="filterMusic" class="mat-menu-item slide-menu" [checked]="searchFilter.music"
                             (click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.Music)">
                             {{ 'NavigationBar.Filter.Music' | translate}}</mat-slide-toggle>
-                            <button class="advanced-search"  mat-raised-button color="accent" (click)="openAdvancedSearch()">Advanced Search</button>
                         <!-- <mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.people"
                             (click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.People)">
                             {{ 'NavigationBar.Filter.People' | translate}}</mat-slide-toggle> -->

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss

@@ -233,7 +233,14 @@
 }
 
 .advanced-search {
-    margin-left: 10px;
+    float:right;
+    margin-top: 6%;
+    margin-right: 10%;
+    cursor: pointer;
+}
+.active-advanced {
+    color:$ombi-background-accent;
+        background: $ombi-active;
 }
 
 ::ng-deep .dialog-responsive {

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts

@@ -91,7 +91,7 @@ export class MyNavComponent implements OnInit {
       this.filterService.changeFilter(this.searchFilter);
     }
     this.navItems = [
-      { id: "nav-discover", name: "NavigationBar.Discover", icon: "fas fa-bolt", link: "/discover", requiresAdmin: false, enabled: true },
+      { id: "nav-discover", name: "NavigationBar.Discover", icon: "fas fa-bolt", style:"z-index:-1;", link: "/discover", requiresAdmin: false, enabled: true },
       { id: "nav-requests", name: "NavigationBar.Requests", icon: "fas fa-stream", link: "/requests-list", requiresAdmin: false, enabled: true },
       { id: "nav-issues", name: "NavigationBar.Issues", icon: "fas fa-exclamation-triangle", link: "/issues", requiresAdmin: false, enabled: this.issuesEnabled },
       { id: "nav-userManagement", name: "NavigationBar.UserManagement", icon: "fas fa-users", link: "/usermanagement", requiresAdmin: true, enabled: true },