update sidebar config to show hide groups and items based on condition

src/components/Sidebar.vue

@@ -52,7 +52,6 @@
           <div v-if="group.items && isActiveGroup(group)">
             <div
               v-for="item in group.items"
-              v-show="item.visible"
               :key="item.label"
               class="
                 mt-1
@@ -115,7 +114,8 @@ export default {
   },
   async mounted() {
     this.companyName = await sidebarConfig.getTitle();
-    this.groups = sidebarConfig.groups.filter((group) => {
+    let groups = sidebarConfig.getGroups();
+    groups = groups.filter((group) => {
       if (
         group.route === '/get-started' &&
         frappe.SystemSettings.hideGetStarted
@@ -125,6 +125,28 @@ export default {
       return true;
     });
 
+    // use the hidden property in the routes config to show/hide the elements
+    // filter doens't work with async function so using reduce
+    for (let group of groups) {
+      if (group.items) {
+        group.items = await group.items.reduce(async (acc, item) => {
+          if (item.hidden) {
+            const hidden = await item.hidden();
+            if (hidden) {
+              return acc;
+            } else {
+              return (await acc).concat(item);
+            }
+          }
+
+          return (await acc).concat(item);
+        }, []);
+      }
+    }
+
+
+    this.groups = groups;
+
     this.setActiveGroup();
     router.afterEach(() => {
       this.setActiveGroup();

src/sidebarConfig.js

@@ -7,7 +7,7 @@ const config = {
     const { companyName } = await frappe.getSingle('AccountingSettings');
     return companyName;
   },
-  groups: [
+  getGroups: () => [
     {
       title: _('Get Started'),
       route: '/get-started',
@@ -27,13 +27,11 @@ const config = {
           label: _('Invoices'),
           route: '/list/SalesInvoice',
           doctype: 'SalesInvoice',
-          visible: 1,
         },
         {
           label: _('Customers'),
           route: '/list/Customer',
           doctype: 'Customer',
-          visible: 1,
         },
       ],
     },
@@ -46,13 +44,11 @@ const config = {
           label: _('Bills'),
           route: '/list/PurchaseInvoice',
           doctype: 'PurchaseInvoice',
-          visible: 1,
         },
         {
           label: _('Suppliers'),
           route: '/list/Supplier',
           doctype: 'Supplier',
-          visible: 1,
         },
       ],
     },
@@ -65,19 +61,16 @@ const config = {
           label: _('Items'),
           route: '/list/Item',
           doctype: 'Item',
-          visible: 1,
         },
         {
           label: _('Payments'),
           route: '/list/Payment',
           doctype: 'Payment',
-          visible: 1,
         },
         {
           label: _('Journal Entry'),
           route: '/list/JournalEntry',
           doctype: 'JournalEntry',
-          visible: 1,
         },
       ],
     },
@@ -89,39 +82,33 @@ const config = {
         {
           label: _('General Ledger'),
           route: '/report/general-ledger',
-          visible: 1,
         },
         {
           label: _('Profit And Loss'),
           route: '/report/profit-and-loss',
-          visible: 1,
         },
         {
           label: _('Balance Sheet'),
           route: '/report/balance-sheet',
-          visible: 1,
         },
         {
           label: _('Trial Balance'),
           route: '/report/trial-balance',
-          visible: 1,
         },
         {
           label: _('GSTR1'),
           route: '/report/gstr-1',
-          visible: async () => {
+          hidden: async () => {
             const { country } = await frappe.getSingle('AccountingSettings');
-            if (country === 'India') return 1;
+            return country !== 'India';
-            return 0;
           },
         },
         {
           label: _('GSTR2'),
           route: '/report/gstr-2',
-          visible: async () => {
+          hidden: async () => {
             const { country } = await frappe.getSingle('AccountingSettings');
-            if (country === 'India') return 1;
+            return country !== 'India';
-            return 0;
           },
         },
       ],
@@ -134,18 +121,15 @@ const config = {
         {
           label: _('Chart of Accounts'),
           route: '/chart-of-accounts',
-          visible: 1,
         },
         {
           label: _('Taxes'),
           route: '/list/Tax',
           doctype: 'Tax',
-          visible: 1,
         },
         {
           label: _('Settings'),
           route: '/settings',
-          visible: 1,
         },
       ],
     },