Allow facetPaneVisible prop to function without smart facets (#499)

* Allow facetPaneVisible prop to function even without smart facets

* Make facetPaneVisible property reflected to attr

* Remove unused import in app-root

Author: latonv

src/app-root.ts

@@ -16,7 +16,6 @@ import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manag
 import type { CollectionBrowser } from '../src/collection-browser';
 
 import '../src/collection-browser';
-import { StringField } from '@internetarchive/iaux-item-metadata';
 
 @customElement('app-root')
 export class AppRoot extends LitElement {
@@ -490,6 +489,7 @@ export class AppRoot extends LitElement {
       </div>
       <div id="collection-browser-container">
         <collection-browser
+          facetPaneVisible
           .baseNavigationUrl=${'https://archive.org'}
           .baseImageUrl=${'https://archive.org'}
           .searchService=${this.searchService}

src/collection-browser.ts

@@ -239,7 +239,7 @@ export class CollectionBrowser
    */
   @property({ type: String }) facetLoadStrategy: FacetLoadStrategy = 'eager';
 
-  @property({ type: Boolean }) facetPaneVisible = false;
+  @property({ type: Boolean, reflect: true }) facetPaneVisible = false;
 
   @property({ type: Boolean }) clearResultsOnEmptyQuery = false;
 
@@ -678,14 +678,10 @@ export class CollectionBrowser
    */
   private get desktopLeftColumnTemplate(): TemplateResult {
     return html`
-      <div
-        id="left-column"
-        class="column"
-        ?hidden=${this.showSmartFacetBar && !this.facetPaneVisible}
-      >
+      <div id="left-column" class="column" ?hidden=${!this.facetPaneVisible}>
         ${this.facetTopViewSlot}
         <div id="facets-header-container">
-          <h2 id="facets-header" class="sr-only">Filters</h2>
+          <h2 id="facets-header" class="sr-only">${msg('Filters')}</h2>
           ${this.resultsCountTemplate} ${this.clearFiltersBtnTemplate(false)}
         </div>
         <div id="facets-container" aria-labelledby="facets-header">
@@ -739,7 +735,7 @@ export class CollectionBrowser
   private get rightColumnTemplate(): TemplateResult {
     const rightColumnClasses = classMap({
       column: true,
-      'full-width': this.showSmartFacetBar && !this.facetPaneVisible,
+      'full-width': !this.facetPaneVisible,
       'smart-results-spacing': !!this.showSmartResults,
     });