From 514af4f11e3c9e7d80e0ee4c0ce62bf061008474 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 1 Oct 2024 17:01:40 -0300
Subject: [PATCH] Catalog mobile adjustments

---
 src/components/ui/VnSearchBar.vue  | 10 ++++++++++
 src/i18n/ca-ES/index.js            |  1 +
 src/i18n/en-US/index.js            |  3 ++-
 src/i18n/fr-FR/index.js            |  1 +
 src/i18n/pt-PT/index.js            |  1 +
 src/pages/Ecomerce/CatalogView.vue | 17 +++++++++++++++--
 src/stores/app.js                  |  4 ++++
 7 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/VnSearchBar.vue b/src/components/ui/VnSearchBar.vue
index 375e9e8f..c4de44f3 100644
--- a/src/components/ui/VnSearchBar.vue
+++ b/src/components/ui/VnSearchBar.vue
@@ -70,6 +70,7 @@ onMounted(() => {
         bg-color="white"
         is-outlined
         :clearable="false"
+        class="searchbar"
     >
         <template #prepend>
             <QIcon name="search" class="cursor-pointer" @click="search()" />
@@ -77,6 +78,15 @@ onMounted(() => {
     </VnInput>
 </template>
 
+<style lang="scss" scoped>
+@import 'src/css/responsive';
+
+.searchbar {
+    @include mobile {
+        max-width: 120px;
+    }
+}
+</style>
 <i18n lang="yaml">
 en-US:
     search: Search
diff --git a/src/i18n/ca-ES/index.js b/src/i18n/ca-ES/index.js
index 0e033814..41f2a1a8 100644
--- a/src/i18n/ca-ES/index.js
+++ b/src/i18n/ca-ES/index.js
@@ -119,6 +119,7 @@ export default {
     confirmDelete: 'Estàs segur que vols esborrar la línia?',
     emptyList: 'Llista buida',
     logInAsGuest: `Accedir com a convidat`,
+    logIn: 'Iniciar sessió',
     haveForgottenPassword: '¿Has oblidat la teva contrasenya?',
     signUp: 'Registrar-me',
     notACustomerYet: `Encara no ets client?`,
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
index e3f546f8..47a25a50 100644
--- a/src/i18n/en-US/index.js
+++ b/src/i18n/en-US/index.js
@@ -153,7 +153,8 @@ export default {
     save: 'Save',
     cancel: 'Cancel',
     of: 'of',
-    loginAsGuest: 'Login as guest',
+    logInAsGuest: 'Login as guest',
+    logIn: 'Log in',
     haveForgottenPassword: 'Have you forgotten your password?',
     signUp: 'Sign up',
     notACustomerYet: 'Not a customer yet?',
diff --git a/src/i18n/fr-FR/index.js b/src/i18n/fr-FR/index.js
index 6c04a77f..57590f43 100644
--- a/src/i18n/fr-FR/index.js
+++ b/src/i18n/fr-FR/index.js
@@ -120,6 +120,7 @@ export default {
     emptyList: 'Vider la liste',
     confirmDelete: 'Voulez-vous vraiment supprimer la ligne?',
     logInAsGuest: `Entrez en tant qu'invité`,
+    logIn: 'Se connecter',
     haveForgottenPassword: 'Avez-vous oublié votre mot de passe?',
     signUp: `S'inscrire`,
     notACustomerYet: `Pas encore client?`,
diff --git a/src/i18n/pt-PT/index.js b/src/i18n/pt-PT/index.js
index abaf4f49..18b5cdc2 100644
--- a/src/i18n/pt-PT/index.js
+++ b/src/i18n/pt-PT/index.js
@@ -117,6 +117,7 @@ export default {
     confirmDelete: 'Tens certeza que queres eliminar esta linha?',
     emptyList: 'Lista vazia',
     logInAsGuest: 'Entrar como convidado',
+    logIn: 'Iniciar sessão',
     haveForgottenPassword: 'Esqueceu a senha?',
     signUp: 'Registar',
     notACustomerYet: 'Ainda não é cliente?',
diff --git a/src/pages/Ecomerce/CatalogView.vue b/src/pages/Ecomerce/CatalogView.vue
index 1faa5674..4a365038 100644
--- a/src/pages/Ecomerce/CatalogView.vue
+++ b/src/pages/Ecomerce/CatalogView.vue
@@ -1,6 +1,6 @@
 <template>
     <Teleport v-if="isHeaderMounted" to="#actions">
-        <div class="q-gutter-x-sm row">
+        <div class="row">
             <VnSearchBar :search-term="search" @on-search-error="items = []" />
             <QBtn
                 :icon="viewTypeButtonContent.icon"
@@ -24,6 +24,15 @@
                     {{ t('shoppingCart') }}
                 </QTooltip>
             </QBtn>
+            <QBtn
+                v-if="!isDesktop"
+                flat
+                dense
+                round
+                icon="menu"
+                aria-label="Menu"
+                @click="toggleRightDrawer()"
+            />
         </div>
     </Teleport>
     <div style="padding-bottom: 5em">
@@ -290,7 +299,7 @@ const appStore = useAppStore();
 const userStore = useUserStore();
 const route = useRoute();
 const router = useRouter();
-const { isHeaderMounted, rightDrawerOpen, basketOrderId } =
+const { isHeaderMounted, rightDrawerOpen, basketOrderId, isDesktop } =
     storeToRefs(appStore);
 const { isGuest } = storeToRefs(userStore);
 const { notify } = useNotify();
@@ -915,6 +924,10 @@ const redirectToBasket = () => {
     router.push({ name: 'basket' });
 };
 
+const toggleRightDrawer = () => {
+    rightDrawerOpen.value = !rightDrawerOpen.value;
+};
+
 watch(
     () => route.query.search,
     val => {
diff --git a/src/stores/app.js b/src/stores/app.js
index ed16085e..8a856ad2 100644
--- a/src/stores/app.js
+++ b/src/stores/app.js
@@ -155,6 +155,10 @@ export const useAppStore = defineStore('hedera', {
         isTablet() {
             const $q = useQuasar();
             return $q?.screen?.width <= 1024;
+        },
+        isDesktop() {
+            const $q = useQuasar();
+            return $q?.screen?.width > 1024;
         }
     }
 });