Catalog mobile adjustments

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

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?`,

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?',

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?`,

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?',

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 => {

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;
         }
     }
 });