Hide Reports from menu

src/layouts/MainLayout.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 
 import { storeToRefs } from 'pinia';
 import { useRouter } from 'vue-router';
@@ -10,13 +10,18 @@ import { useAppStore } from 'stores/app';
 const router = useRouter();
 const userStore = useUserStore();
 const appStore = useAppStore();
+const hiddenMenuItems = new Set(['Reports']);
 
 const { user, supplantedUser } = storeToRefs(userStore);
 const { menuEssentialLinks, title, subtitle, useRightDrawer, rightDrawerOpen } =
     storeToRefs(appStore);
 const actions = ref(null);
 const leftDrawerOpen = ref(false);
-
+const filteredMenuItems = computed(() =>
+    menuEssentialLinks.value.filter(
+        item => !hiddenMenuItems.has(item.description)
+    )
+);
 const toggleLeftDrawer = () => {
     leftDrawerOpen.value = !leftDrawerOpen.value;
 };
@@ -90,7 +95,7 @@ const logoutSupplantedUser = async () => {
                     />
                 </div>
             </div>
-            <QList v-for="item in menuEssentialLinks" :key="item.id">
+            <QList v-for="item in filteredMenuItems" :key="item.id">
                 <QItem v-if="!item.childs" :to="`/${item.path}`">
                     <QItemSection>
                         <QItemLabel>{{