Merged in feat/SW-342-filtering-and-sorting-mobile (pull request #919)

Feat/SW-342 filtering and sorting mobile

* feat(SW-342): add sort and filter on mobile

* Use zustand for state management

* Add count and translations

* Clear filters

* Small fixes

* Fixes


Approved-by: Pontus Dreij

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css

@@ -20,10 +20,13 @@
   gap: var(--Spacing-x1);
 }
 
+.sorter {
+  display: none;
+}
+
 .sideBar {
   display: flex;
   flex-direction: column;
-  max-width: 340px;
 }
 
 .link {
@@ -47,6 +50,10 @@
   gap: var(--Spacing-x3);
 }
 
+.filter {
+  display: none;
+}
+
 @media (min-width: 768px) {
   .main {
     padding: var(--Spacing-x5);
@@ -58,6 +65,11 @@
       var(--Spacing-x5);
   }
 
+  .sorter {
+    display: block;
+    width: 339px;
+  }
+
   .title {
     margin: 0 auto;
     display: flex;
@@ -65,6 +77,14 @@
     align-items: center;
     justify-content: space-between;
   }
+
+  .sideBar {
+    max-width: 340px;
+  }
+  .filter {
+    display: block;
+  }
+
   .link {
     display: flex;
     padding-bottom: var(--Spacing-x6);

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx

@@ -74,9 +74,11 @@ export default async function SelectHotelPage({
             <Subtitle>{city.name}</Subtitle>
             <Preamble>{hotels.length} hotels</Preamble>
           </div>
-          <HotelSorter />
+          <div className={styles.sorter}>
+            <HotelSorter discreet />
+          </div>
         </div>
-        <MobileMapButtonContainer city={searchParams.city} />
+        <MobileMapButtonContainer filters={filterList} />
       </header>
       <main className={styles.main}>
         <div className={styles.sideBar}>
@@ -118,7 +120,7 @@ export default async function SelectHotelPage({
               />
             </div>
           )}
-          <HotelFilter filters={filterList} />
+          <HotelFilter filters={filterList} className={styles.filter} />
         </div>
         <div className={styles.hotelList}>
           {!hotels.length && (