Merge pull request 'refs #6082 navBar' (!74) from 6082-refactNavBar into dev

Reviewed-on: verdnatura/salix-front#74
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

src/components/NavBar.vue

@@ -38,7 +38,13 @@ const pinnedModulesRef = ref();
                 </QTooltip>
             </QBtn>
             <RouterLink to="/">
-                <QBtn class="q-ml-xs" color="primary" flat round>
+                <QBtn
+                    class="q-ml-xs"
+                    color="primary"
+                    flat
+                    round
+                    v-if="!quasar.platform.is.mobile"
+                >
                     <QAvatar square size="md">
                         <QImg
                             src="~/assets/logo_icon.svg"
@@ -56,7 +62,7 @@ const pinnedModulesRef = ref();
                 <QBadge label="Beta" align="top" />
             </QToolbarTitle>
             <QSpace />
-            <div id="searchbar"></div>
+            <div id="searchbar" class="searchbar"></div>
             <QSpace />
             <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
                 <div id="actions-prepend"></div>
@@ -70,13 +76,27 @@ const pinnedModulesRef = ref();
                         {{ t('Go to Salix') }}
                     </QTooltip>
                 </QBtn>
-                <QBtn id="pinnedModules" icon="apps" flat dense rounded>
+                <QBtn
+                    :class="{ 'q-pa-none': quasar.platform.is.mobile }"
+                    id="pinnedModules"
+                    icon="apps"
+                    flat
+                    dense
+                    rounded
+                >
                     <QTooltip bottom>
                         {{ t('globals.pinnedModules') }}
                     </QTooltip>
                     <PinnedModules ref="pinnedModulesRef" />
                 </QBtn>
-                <QBtn rounded dense flat no-wrap id="user">
+                <QBtn
+                    :class="{ 'q-pa-none': quasar.platform.is.mobile }"
+                    rounded
+                    dense
+                    flat
+                    no-wrap
+                    id="user"
+                >
                     <QAvatar size="lg">
                         <QImg
                             :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
@@ -95,6 +115,11 @@ const pinnedModulesRef = ref();
     </QHeader>
 </template>
 
+<style lang="scss" scoped>
+.searchbar {
+    width: max-content;
+}
+</style>
 <i18n>
 en:
     Go to Salix: Go to Salix

src/components/PinnedModules.vue

@@ -35,19 +35,13 @@ async function redirect() {
 <template>
     <QMenu anchor="bottom left" max-width="300px" max-height="400px">
         <div v-if="pinnedModules.length >= 0" class="row justify-around q-pa-md">
-            <QBtn
-                flat
-                stack
-                size="lg"
-                icon="more_up"
-                class="col-5"
-                @click="redirect($route.params.id)"
-            >
-                <div class="text-center button-text">Salix</div>
+            <QBtn flat stack size="lg" icon="more_up" @click="redirect($route.params.id)">
+                <div class="button-text">Salix</div>
             </QBtn>
-            <QBtn flat stack size="lg" icon="home" class="col-5" to="/">
-                <div class="text-center button-text">{{ t('Home') }}</div>
+            <QBtn flat stack size="lg" icon="home" to="/">
+                <div class="button-text">{{ t('Home') }}</div>
             </QBtn>
+
             <div class="row col-12 justify-around q-mt-md">
                 <QBtn
                     flat

src/components/ui/VnSearchbar.vue

@@ -2,6 +2,8 @@
 import { onMounted, ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useArrayData } from 'composables/useArrayData';
+import { useQuasar } from 'quasar';
+const quasar = useQuasar();
 
 const props = defineProps({
     dataKey: {
@@ -93,7 +95,7 @@ async function search() {
             autofocus
         >
             <template #prepend>
-                <QIcon name="search" />
+                <QIcon name="search" v-if="!quasar.platform.is.mobile" />
             </template>
             <template #append>
                 <QIcon
@@ -112,13 +114,9 @@ async function search() {
 </template>
 
 <style lang="scss" scoped>
-.q-field {
-    width: 250px;
-}
-
 @media screen and (min-width: $breakpoint-sm-max) {
     .q-field {
-        width: 400px;
+        width: 450px;
     }
 }