refs #6082 navBar

src/components/NavBar.vue

@@ -6,6 +6,7 @@ import UserPanel from 'components/UserPanel.vue';
 import { useState } from 'src/composables/useState';
 import { useStateStore } from 'stores/useStateStore';
 import PinnedModules from './PinnedModules.vue';
+import { useQuasar } from 'quasar';
 
 const { t } = useI18n();
 const session = useSession();
@@ -14,6 +15,7 @@ const state = useState();
 const user = state.getUser();
 const token = session.getToken();
 const appName = 'Lilium';
+const quasar = useQuasar();
 
 onMounted(() => stateStore.setMounted());
 </script>
@@ -34,7 +36,13 @@ onMounted(() => stateStore.setMounted());
                 </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,13 +64,20 @@ onMounted(() => stateStore.setMounted());
             <QSpace />
             <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
                 <div id="actions-prepend"></div>
-                <QBtn id="pinnedModules" icon="apps" flat dense rounded>
+                <QBtn
+                    class="pinnedModules"
+                    id="pinnedModules"
+                    icon="apps"
+                    flat
+                    dense
+                    rounded
+                >
                     <QTooltip bottom>
                         {{ t('globals.pinnedModules') }}
                     </QTooltip>
                     <PinnedModules />
                 </QBtn>
-                <QBtn rounded dense flat no-wrap id="user">
+                <QBtn class="user-button" rounded dense flat no-wrap id="user">
                     <QAvatar size="lg">
                         <QImg
                             :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
@@ -80,3 +95,24 @@ onMounted(() => stateStore.setMounted());
         </QToolbar>
     </QHeader>
 </template>
+
+<style lang="scss" scoped>
+.user-button {
+    display: flex;
+    align-items: center;
+    padding: 8px; /* Ajusta el valor de padding según tus necesidades */
+
+    /* Estilos específicos para dispositivos móviles */
+    @media (max-width: 768px) {
+        padding: 2px; /* Reduce el padding en dispositivos móviles */
+        margin-left: 1px;
+    }
+}
+
+.pinnedModules {
+    @media (max-width: 768px) {
+        padding: 2px; /* Reduce el padding en dispositivos móviles */
+        margin-left: 1px;
+    }
+}
+</style>