refs #5989 redirect and home

src/components/NavBar.vue

@@ -1,34 +1,23 @@
 <script setup>
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
-import UserPanel from 'components/UserPanel.vue';
 import { useState } from 'src/composables/useState';
 import { useStateStore } from 'stores/useStateStore';
+import { useQuasar } from 'quasar';
 import PinnedModules from './PinnedModules.vue';
-import { getUrl } from 'src/composables/getUrl';
-import { useRoute } from 'vue-router';
+import UserPanel from 'components/UserPanel.vue';
 
 const { t } = useI18n();
 const session = useSession();
 const stateStore = useStateStore();
+const quasar = useQuasar();
 const state = useState();
 const user = state.getUser();
 const token = session.getToken();
-const route = useRoute();
-
 onMounted(() => stateStore.setMounted());
 
-async function redirect() {
-    let section = route.path.substring(1);
-    if (!route.path.includes('/')) return (window.location.href = await getUrl(section));
-    section = section.substring(0, section.indexOf('/'));
-    if (route?.params?.id) {
-        window.location.href = await getUrl(`${section}/${route.params.id}/summary`);
-    } else {
-        window.location.href = await getUrl(section + '/index');
-    }
-}
+const pinnedModulesRef = ref();
 </script>
 
 <template>
@@ -69,11 +58,18 @@ async function redirect() {
             <QSpace />
             <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
                 <div id="actions-prepend"></div>
-                <QBtn @click="redirect($route.params.id)" icon="open_in_new"> </QBtn>
+                <QBtn
+                    flat
+                    v-if="!quasar.platform.is.mobile"
+                    @click="pinnedModulesRef.redirect($route.params.id)"
+                    icon="launch"
+                >
+                </QBtn>
                 <QBtn 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">
                     <QAvatar size="lg">

src/components/PinnedModules.vue

@@ -2,69 +2,91 @@
 import { onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useNavigationStore } from 'src/stores/useNavigationStore';
+import { getUrl } from 'src/composables/getUrl';
+import { useRoute } from 'vue-router';
 
 const navigation = useNavigationStore();
 const { t } = useI18n();
+const route = useRoute();
 
 onMounted(() => {
     navigation.fetchPinned();
 });
 
+defineExpose({
+    redirect,
+});
+
 const pinnedModules = computed(() => navigation.getPinnedModules());
+console.log(pinnedModules.value);
+
+async function redirect() {
+    let section = route.path.substring(1);
+    if (!route.path.includes('/')) return (window.location.href = await getUrl(section));
+    section = section.substring(0, section.indexOf('/'));
+    if (route?.params?.id) {
+        window.location.href = await getUrl(`${section}/${route.params.id}/summary`);
+    } else {
+        window.location.href = await getUrl(section + 'dashboard');
+    }
+}
 </script>
 
 <template>
-    <QMenu
-        anchor="bottom left"
-        class="row q-pa-md q-col-gutter-lg"
-        max-width="350px"
-        max-height="400px"
-    >
-        <template v-if="pinnedModules.length">
-            <div
-                v-for="item of pinnedModules"
-                :key="item.title"
-                class="row no-wrap q-pa-xs flex-item"
+    <QMenu anchor="bottom left" max-width="300px" max-height="400px">
+        <div v-if="pinnedModules.length" 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>
+            <QBtn flat stack size="lg" icon="home" class="col-5" to="/">
+                <div class="text-center button-text">{{ t('Home') }}</div>
+            </QBtn>
+            <div class="row col-12 justify-around q-mt-md">
                 <QBtn
-                    align="evenly"
-                    padding="16px"
                     flat
                     stack
                     size="lg"
                     :icon="item.icon"
                     color="primary"
-                    class="col-4 button"
+                    class="col-5"
                     :to="{ name: item.name }"
+                    v-for="item of pinnedModules"
+                    :key="item.title"
                 >
                     <div class="text-center text-primary button-text">
                         {{ t(item.title) }}
                     </div>
                 </QBtn>
             </div>
-        </template>
-        <template v-else>
+        </div>
+        <div v-else>
             <div
                 class="row no-wrap q-pa-xs flex-item text-center text-grey-5"
                 style="min-width: 200px"
             >
                 {{ t('globals.noPinnedModules') }}
             </div>
-        </template>
+        </div>
     </QMenu>
 </template>
 
 <style lang="scss" scoped>
-.flex-item {
-    width: 100px;
-}
-.button {
-    width: 100%;
-    line-height: normal;
-    align-items: center;
-}
 .button-text {
     font-size: 10px;
     margin-top: 5px;
 }
 </style>
+
+<i18n>
+en:
+    Home: Home
+es:
+    Home: Inicio
+</i18n>

src/pages/Dashboard/DashboardMain.vue

@@ -36,9 +36,7 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
                         <div class="text-grey-5" v-if="pinnedModules.length === 0">
                             {{ t('pinnedInfo') }}
                         </div>
-                        <QBtn @click="redirect($route.params.id)" icon="open_in_new">
-                        </QBtn>
-                        <template v-if="pinnedModules.length >= 0">
+                        <template v-if="pinnedModules.length">
                             <div
                                 v-for="item of pinnedModules"
                                 :key="item.title"