Hide the reset filters button on the home page & fixed spacing issue when showDiscoverFilters is disabled

Author: alexandrevryghem

src/app/home-page/home-page.component.html

@@ -1,8 +1,8 @@
 <ds-themed-home-news></ds-themed-home-news>
 <div [ngClass]="showDiscoverFilters ? 'container-fluid' : 'container'">
-  <ds-page-with-sidebar [sidebarContent]="sidebar" [sideBarWidth]="3" [class]="showDiscoverFilters ? 'row mx-3' : ''">
+  <ds-page-with-sidebar [sidebarContent]="sidebar" [sideBarWidth]="showDiscoverFilters ? 3 : 0" [class]="showDiscoverFilters ? 'row mx-3' : ''">
     <div [class.col-sm-12]="showDiscoverFilters">
-      <button *ngIf="(isXsOrSm$ | async) && sidebarService.isCollapsed" (click)="sidebarService.expand()"
+      <button *ngIf="showDiscoverFilters && (isXsOrSm$ | async) && sidebarService.isCollapsed" (click)="sidebarService.expand()"
               class="btn btn-outline-primary d-block ml-auto mb-3">
         <i class="fas fa-sliders"></i> {{ 'search.sidebar.open' | translate }}
       </button>

src/app/shared/search/search-filters/search-filters.component.html

@@ -7,4 +7,6 @@ <h2 *ngIf="!inPlaceSearch">{{filterLabel+'.filters.head' | translate}}</h2>
 </div>
 <ds-advanced-search *ngIf="appConfig.search.advancedFilters.enabled"
     [inPlaceSearch]="inPlaceSearch"></ds-advanced-search>
-<a class="btn btn-primary" [routerLink]="[searchLink]" [queryParams]="clearParams | async" queryParamsHandling="merge" role="button"><i class="fas fa-undo"></i> {{"search.filters.reset" | translate}}</a>
+<a *ngIf="inPlaceSearch" class="btn btn-primary" [routerLink]="[searchLink]" [queryParams]="clearParams | async" queryParamsHandling="merge" role="button">
+  <i class="fas fa-undo"></i> {{"search.filters.reset" | translate}}
+</a>

src/app/shared/sidebar/page-with-sidebar.component.html

@@ -2,12 +2,13 @@
   <div class="row">
     <div class="row-with-sidebar row-offcanvas row-offcanvas-left"
          [@pushInOut]="(isSidebarCollapsed$ | async) ? 'collapsed' : 'expanded'">
-      <div id="{{id}}-sidebar-content"
+      <div *ngIf="sideBarWidth > 0" id="{{id}}-sidebar-content"
            [class.invisible]="(isSidebarCollapsed$ | async) === true && (isXsOrSm$ | async) === true"
            class="col-12 col-md-{{sideBarWidth}} sidebar-content {{sidebarClasses | async}}">
         <ng-container *ngTemplateOutlet="sidebarContent"></ng-container>
       </div>
       <div class="col-12 col-md-{{12 - sideBarWidth}}"
+           [class.px-0]="sideBarWidth === 0"
            [class.invisible]="(isSidebarCollapsed$ | async) !== true && (isXsOrSm$ | async) === true">
         <ng-content></ng-content>
       </div>

src/app/shared/sidebar/page-with-sidebar.component.ts

@@ -1,5 +1,6 @@
 import {
   AsyncPipe,
+  NgIf,
   NgTemplateOutlet,
 } from '@angular/common';
 import {
@@ -21,7 +22,11 @@ import { SidebarService } from './sidebar.service';
   templateUrl: './page-with-sidebar.component.html',
   animations: [pushInOut],
   standalone: true,
-  imports: [NgTemplateOutlet, AsyncPipe],
+  imports: [
+    AsyncPipe,
+    NgTemplateOutlet,
+    NgIf,
+  ],
 })
 /**
  * This component takes care of displaying the sidebar properly on all viewports. It does not