60ba32f6.7bd8a775.js

"use strict";(self.webpackChunkadminforth=self.webpackChunkadminforth||[]).push([[4149],{5592:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>d,contentTitle:()=>a,default:()=>u,frontMatter:()=>r,metadata:()=>t,toc:()=>l});const t=JSON.parse('{"id":"tutorial/Customization/menuConfiguration","title":"Menu Configuration","description":"Icons","source":"@site/docs/tutorial/03-Customization/10-menuConfiguration.md","sourceDirName":"tutorial/03-Customization","slug":"/tutorial/Customization/menuConfiguration","permalink":"/docs/tutorial/Customization/menuConfiguration","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":10,"frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Actions","permalink":"/docs/tutorial/Customization/Actions"},"next":{"title":"Data API","permalink":"/docs/tutorial/Customization/dataApi"}}');var o=i(4848),s=i(8453);const r={},a="Menu Configuration",d={},l=[{value:"Icons",id:"icons",level:2},{value:"Grouping",id:"grouping",level:2},{value:"Visibility of menu items",id:"visibility-of-menu-items",level:2},{value:"Gap",id:"gap",level:2},{value:"Divider",id:"divider",level:2},{value:"Heading",id:"heading",level:2},{value:"Badge",id:"badge",level:2},{value:"Refreshing the badges",id:"refreshing-the-badges",level:3}];function c(e){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"menu-configuration",children:"Menu Configuration"})}),"\n",(0,o.jsx)(n.h2,{id:"icons",children:"Icons"}),"\n",(0,o.jsxs)(n.p,{children:["Adminforth uses ",(0,o.jsx)(n.a,{href:"https://iconify.design/",children:"Iconify"})," icons everywhere, including the menu."]}),"\n",(0,o.jsxs)(n.p,{children:["You can set an icon for each menu item using the ",(0,o.jsx)(n.code,{children:"icon"})," field."]}),"\n",(0,o.jsxs)(n.p,{children:["You can use any icon from the ",(0,o.jsx)(n.a,{href:"https://icon-sets.iconify.design/",children:"Iconify Gallery"})," in the format ",(0,o.jsx)(n.code,{children:"<setname>:<icon>"}),". For example, ",(0,o.jsx)(n.code,{children:"flowbite:brain-solid"}),"."]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"Icons for AdminForth",src:i(8719).A+"",width:"2215",height:"1532"})}),"\n",(0,o.jsxs)(n.blockquote,{children:["\n",(0,o.jsxs)(n.p,{children:["\ud83d\udc4b With deep respect to Alex Kozack who created great ",(0,o.jsx)(n.a,{href:"https://github.com/cawa-93/iconify-prerendered",children:"iconify-prerendered"})," MIT package used by AdminForth. It uses a scheduled job to prerender all icons from Iconify to icons font and then publish them to npm"]}),"\n"]}),"\n",(0,o.jsx)(n.h2,{id:"grouping",children:"Grouping"}),"\n",(0,o.jsx)(n.p,{children:"You can created a group of menu items with open or close:"}),"\n",(0,o.jsx)(n.p,{children:'E.g. create group "Blog" with Items who link to resource "posts" and "categories":'}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:"title='./index.ts'",children:"  {\n    ...\n    menu: {\n      {\n        label: 'Blog',\n        icon: 'flowbite:brain-solid',\n        open: true,\n        children: [\n          {\n            label: 'Posts',\n            icon: 'flowbite:book-open-outline',\n            resourceId: 'posts',\n          },\n          {\n            label: 'Categories',\n            icon: 'flowbite:folder-duplicate-outline',\n            resourceId: 'categories',\n          },\n        ],\n      },\n      {\n        label: 'Users',\n        icon: 'flowbite:folder-duplicate-outline',\n        resourceId: 'adminuser',\n      },\n    },\n    ...\n  }\n"})}),"\n",(0,o.jsxs)(n.p,{children:["If it is rare Group you can make it ",(0,o.jsx)(n.code,{children:"open: false"})," so it would not take extra space in menu, but admin users will be able to open it by clicking on the group name."]}),"\n",(0,o.jsx)(n.h2,{id:"visibility-of-menu-items",children:"Visibility of menu items"}),"\n",(0,o.jsx)(n.p,{children:"You might want to hide some menu items from the menu for some users."}),"\n",(0,o.jsxs)(n.p,{children:["To do it use ",(0,o.jsx)(n.code,{children:"visible"})," field in the menu item configuration:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:"title='./index.ts'",children:"{\n  ...\n  menu: [\n    {\n      label: 'Categories',\n      icon: 'flowbite:folder-duplicate-outline',\n      resourceId: 'categories',\n//diff-add\n      visible: adminUser => adminUser.dbUser.role === 'admin'\n    },\n  ],\n  ...\n}\n"})}),"\n",(0,o.jsxs)(n.blockquote,{children:["\n",(0,o.jsxs)(n.p,{children:["\ud83d\udc46 Please note that this will just hide menu item for non ",(0,o.jsx)(n.code,{children:"admin"})," users, but resource pages will still be available by direct\nURLs. To limit access, you should also use ",(0,o.jsx)(n.a,{href:"/docs/tutorial/Customization/limitingAccess/#disable-full-access-to-resource-based-on-logged-in-user-record-or-role",children:"allowedActions"})," field in the resource configuration in addition to this."]}),"\n"]}),"\n",(0,o.jsx)(n.h2,{id:"gap",children:"Gap"}),"\n",(0,o.jsx)(n.p,{children:"You can put one or several gaps between menu items:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:"title='./index.ts'",children:"{\n  ...\n  menu: [\n    {\n      label: 'Posts',\n      icon: 'flowbite:book-open-outline',\n      resourceId: 'posts',\n    },\n    {\n      type: 'gap',\n    },\n    {\n      type: 'gap',\n    },\n    {\n      label: 'Categories',\n      icon: 'flowbite:folder-duplicate-outline',\n      resourceId: 'categories',\n    },\n  ],\n  ...\n}\n"})}),"\n",(0,o.jsx)(n.h2,{id:"divider",children:"Divider"}),"\n",(0,o.jsx)(n.p,{children:"To split menu items with a line you can use a divider:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:"title='./index.ts'",children:"{\n  ...\n  menu: [\n    {\n      label: 'Posts',\n      icon: 'flowbite:book-open-outline',\n      resourceId: 'posts',\n    },\n    {\n      type: 'divider',\n    },\n    {\n      label: 'Categories',\n      icon: 'flowbite:folder-duplicate-outline',\n      resourceId: 'categories',\n    },\n  ]\n  ...\n}\n"})}),"\n",(0,o.jsx)(n.h2,{id:"heading",children:"Heading"}),"\n",(0,o.jsx)(n.p,{children:"You can add a heading to the menu:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:"title='./index.ts'",children:"{\n  ...\n  menu: [\n    {\n      type: 'heading',\n      label: 'Editings',\n    },\n    {\n      label: 'Posts',\n      icon: 'flowbite:book-open-outline',\n      resourceId: 'posts',\n    },\n    {\n      label: 'Categories',\n      icon: 'flowbite:folder-duplicate-outline',\n      resourceId: 'categories',\n    },\n  ],\n  ...\n}\n"})}),"\n",(0,o.jsx)(n.h2,{id:"badge",children:"Badge"}),"\n",(0,o.jsxs)(n.p,{children:["You can add a badge near the menu item title (e.g. to get count of unread messages). To do this, you need to add a ",(0,o.jsx)(n.code,{children:"badge"})," field to the menu item configuration:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:"title='./index.ts'",children:"{\n  ...\n  menu: [\n    {\n      label: 'Posts',\n      icon: 'flowbite:book-open-outline',\n      resourceId: 'posts',\n      badge: async (adminUser: AdminUser) => {\n        return 10\n      },\n      badgeTooltip: 'New posts',  // explain user what this badge means\n      ...\n    },\n  ],\n  ...\n}\n"})}),"\n",(0,o.jsx)(n.p,{children:'Badge function is async, but all badges are loaded in "lazy" to not block the menu rendering.'}),"\n",(0,o.jsx)(n.h3,{id:"refreshing-the-badges",children:"Refreshing the badges"}),"\n",(0,o.jsx)(n.p,{children:"Most times you need to refresh the badge from some backend API or hook. To do this you can do next:"}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:["Add ",(0,o.jsx)(n.code,{children:"itemId"})," to menu item to identify it:"]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:"title='./index.ts'",children:"{\n  ...\n  menu: [\n    {\n      label: 'Posts',\n      icon: 'flowbite:book-open-outline',\n      resourceId: 'posts',\n//diff-add\n      itemId: 'postsMenuItem',\n      badge: async (adminUser: AdminUser) => {\n        return 10\n      },\n      badgeTooltip: 'Unverified posts',  // explain user what this badge means\n      ...\n    },\n  ],\n  ...\n}\n"})}),"\n",(0,o.jsxs)(n.ol,{start:"2",children:["\n",(0,o.jsx)(n.li,{children:"On backend point where you need to refresh the badge, you can publish a message to the websocket topic:"}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:"title='./index.ts'",children:"{\n  resourceId: 'posts',\n  table: 'posts',\n  hooks: {\n    edit: {\n//diff-add\n      afterSave: async ({ record, adminUser, resource, adminforth }) => {\n//diff-add\n        const newCount = await adminforth.resource('posts').count(Filters.EQ('verified', false));\n//diff-add\n        adminforth.websocket.publish(`/opentopic/update-menu-badge/postsMenuItem`, { badge: newCount });\n//diff-add\n        return { ok: true }\n//diff-add\n      }\n    }\n  }\n}\n"})}),"\n",(0,o.jsxs)(n.blockquote,{children:["\n",(0,o.jsxs)(n.p,{children:["\ud83d\udc46 Please note that any ",(0,o.jsx)(n.code,{children:"/opentopic/"})," publish can be listened by anyone without authorization. If count published in this channel might be\na subject of security or privacy concerns, you should add ",(0,o.jsx)(n.a,{href:"/docs/tutorial/Customization/websocket/#publish-authorization",children:"publish authorization"})," to the topic."]}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:"More rare case when you need to refresh menu item from the frontend component. You can achieve this by calling the next method:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-typescript",children:"import adminforth from '@/adminforth';\n\nadminforth.menu.refreshMenuBadges()\n"})})]})}function u(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},8719:(e,n,i)=>{i.d(n,{A:()=>t});const t=i.p+"assets/images/image-14-ca7b83c5452ac54e6ddb41bac6c0c64c.png"},8453:(e,n,i)=>{i.d(n,{R:()=>r,x:()=>a});var t=i(6540);const o={},s=t.createContext(o);function r(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]);