{"id":3413,"date":"2025-11-13T09:57:31","date_gmt":"2025-11-13T02:57:31","guid":{"rendered":"https:\/\/portal-atlasx.cdg.co.th\/home\/?post_type=docs&#038;p=3413"},"modified":"2025-11-13T09:57:31","modified_gmt":"2025-11-13T02:57:31","slug":"menu","status":"publish","type":"docs","link":"https:\/\/portal-atlasx.cdg.co.th\/home\/docs\/atlasx-web-template\/configuration\/menu\/","title":{"rendered":"Menu"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\" id=\"menu-configuration\">Menu Configuration<\/h1>\n\n\n\n<p>\u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07 Menu \u0e17\u0e35\u0e48 navigation bar \u0e41\u0e25\u0e30 sidebar \u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e04\u0e48\u0e32\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e44\u0e14\u0e49\u0e1c\u0e48\u0e32\u0e19\u0e44\u0e1f\u0e25\u0e4c config \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e32\u0e17\u0e33\u0e01\u0e32\u0e23 build Angular App \u0e01\u0e47\u0e08\u0e30\u0e44\u0e14\u0e49 menu \u0e15\u0e32\u0e21\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/portal-atlasx.cdg.co.th\/share\/Portal%20Docs\/Default\/Web%20Template\/menu-config-desktop.png\" alt=\"Menu Configuration Desktop\" title=\"null\"\/><\/figure>\n\n\n\n<p><small>Menu Configuration Desktop<\/small><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/portal-atlasx.cdg.co.th\/share\/Portal%20Docs\/Default\/Web%20Template\/menu-config-mobile.png\" alt=\"Menu Configuration Mobile\" title=\"null\"\/><\/figure>\n\n\n\n<p><small>Menu Configuration Mobile<\/small><\/p>\n\n\n\n<p>\u0e23\u0e27\u0e21\u0e16\u0e36\u0e07\u0e40\u0e23\u0e32\u0e22\u0e31\u0e07\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e01\u0e33\u0e2b\u0e19\u0e14 menu \u0e43\u0e2b\u0e49\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e44\u0e14\u0e49\u0e15\u0e32\u0e21\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e02\u0e2d\u0e07\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 \u0e42\u0e14\u0e22\u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e40\u0e09\u0e1e\u0e32\u0e30 menu \u0e17\u0e35\u0e48\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e21\u0e35\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"menu-configuration-1\">Menu Configuration<\/h2>\n\n\n\n<p>\u0e43\u0e19\u0e01\u0e32\u0e23\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32 menu \u0e08\u0e30\u0e41\u0e1a\u0e48\u0e07\u0e2d\u0e2d\u0e01\u0e40\u0e1b\u0e47\u0e19 4 \u0e2a\u0e48\u0e27\u0e19\u0e2b\u0e25\u0e31\u0e01 \u0e46 \u0e04\u0e37\u0e2d<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigation Bar<\/li>\n\n\n\n<li>Sidebar<\/li>\n\n\n\n<li>Mobile Navigation Bar<\/li>\n\n\n\n<li>Mobile Sidebar<\/li>\n<\/ol>\n\n\n\n<p>\u0e0b\u0e36\u0e48\u0e07\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e08\u0e30\u0e2d\u0e22\u0e39\u0e48\u0e17\u0e35\u0e48\u0e44\u0e1f\u0e25\u0e4c&nbsp;<code>ClientApp\/src\/app\/core\/config\/menu-config.ts<\/code>&nbsp;\u0e0b\u0e36\u0e48\u0e07\u0e40\u0e23\u0e32\u0e44\u0e14\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e02\u0e2d\u0e07 config \u0e44\u0e27\u0e49\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>export interface MenuConfigModel {\n  navItemGroup?: NavItemGroup[]\n  siderItems?: SiderItems[]\n  mobileNavItems?: MenuItem[]\n  mobileSubMenuItems?: TreeNode&lt;MenuItem>[]\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #AF00DB\">export<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">interface<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">MenuConfigModel<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">navItemGroup<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">NavItemGroup<\/span><span style=\"color: #000000\">[]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">siderItems<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">SiderItems<\/span><span style=\"color: #000000\">[]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">mobileNavItems<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">MenuItem<\/span><span style=\"color: #000000\">[]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">mobileSubMenuItems<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">TreeNode<\/span><span style=\"color: #000000\">&lt;<\/span><span style=\"color: #267F99\">MenuItem<\/span><span style=\"color: #000000\">&gt;[]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"navigation-bar-configuration\">Navigation Bar Configuration<\/h2>\n\n\n\n<p>\u0e43\u0e19\u0e01\u0e32\u0e23\u0e01\u0e33\u0e2b\u0e19\u0e14 menu \u0e43\u0e19 Navigation Bar \u0e40\u0e23\u0e32\u0e08\u0e30\u0e41\u0e1a\u0e48\u0e07\u0e2d\u0e2d\u0e01\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e25\u0e38\u0e48\u0e21 \u0e42\u0e14\u0e22\u0e41\u0e15\u0e48\u0e25\u0e30\u0e01\u0e25\u0e38\u0e48\u0e21\u0e08\u0e30\u0e16\u0e39\u0e01\u0e01\u0e31\u0e49\u0e19\u0e14\u0e49\u0e27\u0e22 separator \u0e0b\u0e36\u0e48\u0e07\u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e2a\u0e49\u0e19\u0e02\u0e35\u0e14 \u0e46 \u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e01\u0e25\u0e38\u0e48\u0e21\u0e14\u0e31\u0e07\u0e23\u0e39\u0e1b<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/portal-atlasx.cdg.co.th\/share\/Portal%20Docs\/Default\/Web%20Template\/navbar-config-group.png\" alt=\"Menu Configuration Desktop\" title=\"null\"\/><\/figure>\n\n\n\n<p>\u0e0b\u0e36\u0e48\u0e07 property \u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14 \u0e01\u0e25\u0e38\u0e48\u0e21\u0e02\u0e2d\u0e07 Navigation Bar \u0e04\u0e37\u0e2d&nbsp;<code>navItemGroup: NavItemGroup[]<\/code>&nbsp;\u0e0b\u0e36\u0e48\u0e07\u0e21\u0e35\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>export interface NavItemGroup {\n  items?: NavItem[]\n  position: 'start' | 'end'\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #AF00DB\">export<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">interface<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">NavItemGroup<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">items<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">NavItem<\/span><span style=\"color: #000000\">[]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">position<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&#39;start&#39;<\/span><span style=\"color: #000000\"> | <\/span><span style=\"color: #A31515\">&#39;end&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u0e2a\u0e31\u0e07\u0e40\u0e01\u0e15\u0e44\u0e14\u0e49\u0e27\u0e48\u0e32\u0e08\u0e30\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e44\u0e1b\u0e14\u0e49\u0e27\u0e22 properties 2 \u0e15\u0e31\u0e27\u0e04\u0e37\u0e2d&nbsp;<code>items<\/code>&nbsp;\u0e41\u0e25\u0e30&nbsp;<code>position<\/code>&nbsp;\u0e2b\u0e21\u0e32\u0e22\u0e04\u0e27\u0e32\u0e21\u0e27\u0e48\u0e32\u0e01\u0e25\u0e38\u0e48\u0e21\u0e02\u0e2d\u0e07 Navigation Bar \u0e08\u0e30\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e44\u0e1b\u0e14\u0e49\u0e27\u0e22 menu \u0e2d\u0e30\u0e44\u0e23\u0e1a\u0e49\u0e32\u0e07\u0e2d\u0e35\u0e01\u0e17\u0e31\u0e49\u0e07\u0e22\u0e31\u0e07\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e44\u0e14\u0e49\u0e27\u0e48\u0e32\u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25 menu \u0e17\u0e35\u0e48\u0e14\u0e49\u0e32\u0e19\u0e0b\u0e49\u0e32\u0e22\u0e2b\u0e23\u0e37\u0e2d\u0e14\u0e49\u0e32\u0e19\u0e02\u0e27\u0e32\u0e02\u0e2d\u0e07 Navigation Bar<\/p>\n\n\n\n<p>\u0e0b\u0e36\u0e48\u0e07&nbsp;<code>items: NavItem[]<\/code>&nbsp;\u0e08\u0e30\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e44\u0e1b\u0e14\u0e49\u0e27\u0e22 properties \u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>export interface MenuItem {\n  title?: string\n  icon?: PrimeIcons\n  functionId?: string\n  url?: string\n}\n\nexport interface NavItem extends MenuItem {\n  dropdownItems?: NavDropdownItem[]\n  showInTablet?: boolean\n  type: 'link' | 'dropdown'\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #AF00DB\">export<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">interface<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">MenuItem<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">title<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">string<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">icon<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">PrimeIcons<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">functionId<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">string<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">url<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">string<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #AF00DB\">export<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">interface<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">NavItem<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">extends<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">MenuItem<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">dropdownItems<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">NavDropdownItem<\/span><span style=\"color: #000000\">[]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">showInTablet<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">boolean<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">type<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&#39;link&#39;<\/span><span style=\"color: #000000\"> | <\/span><span style=\"color: #A31515\">&#39;dropdown&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>menu \u0e41\u0e15\u0e48\u0e25\u0e30\u0e15\u0e31\u0e27\u0e08\u0e30\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e44\u0e1b\u0e14\u0e49\u0e27\u0e22 properties \u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>title<\/code>\u00a0: \u0e0a\u0e37\u0e48\u0e2d\u0e02\u0e2d\u0e07 menu<\/li>\n\n\n\n<li><code>icon<\/code>\u00a0: \u0e44\u0e2d\u0e04\u0e2d\u0e19\u0e02\u0e2d\u0e07 menu \u0e0b\u0e36\u0e48\u0e07\u0e08\u0e30\u0e43\u0e0a\u0e49\u0e44\u0e2d\u0e04\u0e2d\u0e19\u0e08\u0e32\u0e01\u00a0<a href=\"https:\/\/www.primefaces.org\/primeng-v12-lts\/#\/icons\" target=\"_blank\" rel=\"noreferrer noopener\">PrimeIcons<\/a><\/li>\n\n\n\n<li><code>functionId<\/code>\u00a0: id \u0e02\u0e2d\u0e07 menu \u0e17\u0e35\u0e48\u0e40\u0e01\u0e47\u0e1a\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e02\u0e2d\u0e07 UM \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e01\u0e32\u0e23\u0e21\u0e2d\u0e07\u0e40\u0e2b\u0e47\u0e19\u0e02\u0e2d\u0e07 menu \u0e44\u0e14\u0e49\u0e08\u0e32\u0e01 id \u0e19\u0e35\u0e49<\/li>\n\n\n\n<li><code>url<\/code>\u00a0: url \u0e02\u0e2d\u0e07 menu \u0e17\u0e35\u0e48\u0e08\u0e30 redirect \u0e44\u0e1b \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e40\u0e1b\u0e47\u0e19 angular path \u0e2b\u0e23\u0e37\u0e2d external url \u0e01\u0e47\u0e44\u0e14\u0e49<\/li>\n\n\n\n<li><code>dropdownItems<\/code>\u00a0: \u0e01\u0e33\u0e2b\u0e19\u0e14 menu \u0e22\u0e48\u0e2d\u0e22\u0e17\u0e35\u0e48\u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e43\u0e19 dropdown \u0e02\u0e2d\u0e07 menu \u0e19\u0e35\u0e49 (\u0e40\u0e09\u0e1e\u0e32\u0e30\u00a0<code>type<\/code>\u00a0\u0e40\u0e1b\u0e47\u0e19\u00a0<code>dropdown<\/code>\u00a0\u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19)<\/li>\n\n\n\n<li><code>showInTablet<\/code>\u00a0: \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e27\u0e48\u0e32\u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07 menu \u0e19\u0e35\u0e49\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e17\u0e35\u0e48\u0e21\u0e35\u0e02\u0e19\u0e32\u0e14\u0e15\u0e32\u0e21\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19 tablet \u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48<\/li>\n\n\n\n<li><code>type<\/code>\u00a0: \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e27\u0e48\u0e32 menu \u0e19\u0e35\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17 link \u0e2b\u0e23\u0e37\u0e2d dropdown<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<h5 class=\"wp-block-heading\">Note<\/h5>\n\n\n\n<p>\u0e2b\u0e32\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e0a\u0e37\u0e48\u0e2d menu \u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a UM \u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e01\u0e33\u0e2b\u0e19\u0e14&nbsp;<code>functionId<\/code>&nbsp;\u0e41\u0e25\u0e49\u0e27\u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e33\u0e2b\u0e19\u0e14&nbsp;<code>title<\/code>&nbsp;\u0e44\u0e14\u0e49 template \u0e08\u0e30\u0e44\u0e1b\u0e14\u0e36\u0e07\u0e0a\u0e37\u0e48\u0e2d menu \u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a UM \u0e41\u0e17\u0e19<\/p>\n<\/blockquote>\n\n\n\n<p>\u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07&nbsp;<code>dropdownItems<\/code>&nbsp;\u0e08\u0e30\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e44\u0e1b\u0e14\u0e49\u0e27\u0e22 properties \u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>export interface NavDropdownItem {\n  title?: string\n  icon?: PrimeIcons\n  functionId?: string\n  url?: string\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #AF00DB\">export<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">interface<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">NavDropdownItem<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">title<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">string<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">icon<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">PrimeIcons<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">functionId<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">string<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">url<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">string<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19\u0e01\u0e31\u0e1a&nbsp;<code>NavItem<\/code>&nbsp;\u0e41\u0e15\u0e48\u0e44\u0e21\u0e48\u0e21\u0e35 property&nbsp;<code>type<\/code>&nbsp;\u0e41\u0e25\u0e30&nbsp;<code>dropdownItems<\/code>&nbsp;\u0e40\u0e1e\u0e23\u0e32\u0e30\u0e40\u0e1b\u0e47\u0e19 menu \u0e22\u0e48\u0e2d\u0e22\u0e02\u0e2d\u0e07 dropdown \u0e41\u0e25\u0e30\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e21\u0e35 dropdown \u0e0b\u0e49\u0e2d\u0e19\u0e01\u0e31\u0e19\u0e44\u0e14\u0e49<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<h5 class=\"wp-block-heading\">Note<\/h5>\n\n\n\n<p>\ud83d\ude80 \u0e43\u0e19 AtlasX Web Template (Canberra) \u0e08\u0e30\u0e21\u0e35\u0e01\u0e32\u0e23\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e17\u0e33 dropdown \u0e0b\u0e49\u0e2d\u0e19\u0e17\u0e31\u0e1a\u0e01\u0e31\u0e19<\/p>\n<\/blockquote>\n\n\n\n<p>\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e01\u0e32\u0e23\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e04\u0e48\u0e32\u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a&nbsp;<code>navItemGroup<\/code>\u0e04\u0e25\u0e34\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e42\u0e04\u0e49\u0e14<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>navItemGroup: [\n    {\n      items: &#91;\n        {\n          title: 'Home',\n          icon: PrimeIcons.HOME,\n          url: '\/',\n          type: 'link',\n          showInTablet: true,\n        },\n        {\n          title: 'Product',\n          url: 'http:\/\/portal-atlasx.cdg.co.th',\n          type: 'link',\n        },\n      &#93;,\n      position: 'start',\n    },\n    {\n      items: [\n        {\n          title: 'Standard Tools',\n          functionId: 'STD-01',\n          type: 'dropdown',\n          dropdownItems: &#91;\n            {\n              functionId: 'STD-01',\n            },\n            {\n              functionId: 'STD-02',\n            },\n          &#93;,\n        },\n        {\n          functionId: 'GIS-01',\n          type: 'dropdown',\n          dropdownItems: &#91;\n            {\n              functionId: 'GIS-02',\n              icon: PrimeIcons.MAP,\n              url: '\/',\n            },\n          &#93;,\n        },\n      ],\n      position: 'start',\n    },\n    {\n      items: [\n        {\n          title: 'Dropdown-1',\n          type: 'dropdown',\n          showInTablet: true,\n          dropdownItems: &#91;\n            {\n              title: 'Dropdown-1-1',\n              url: '\/',\n            },\n          &#93;,\n        },\n        {\n          title: 'Dropdown-2',\n          type: 'dropdown',\n          dropdownItems: &#91;\n            {\n              title: 'Dropdown-2-1',\n              url: '\/',\n            },\n          &#93;,\n        },\n      ],\n      position: 'end',\n    },\n  ],<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #000000\">navItemGroup: [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">items:<\/span><span style=\"color: #000000\"> &#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">title:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Home&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">icon:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">PrimeIcons<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #0070C1\">HOME<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;\/&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">type:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;link&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">showInTablet:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">true<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">title:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Product&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;http:\/\/portal-atlasx.cdg.co.th&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">type:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;link&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      &#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">position:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;start&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">items:<\/span><span style=\"color: #000000\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">title:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Standard Tools&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">functionId:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;STD-01&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">type:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;dropdown&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">dropdownItems:<\/span><span style=\"color: #000000\"> &#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              <\/span><span style=\"color: #001080\">functionId:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;STD-01&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              <\/span><span style=\"color: #001080\">functionId:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;STD-02&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          &#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">functionId:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;GIS-01&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">type:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;dropdown&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">dropdownItems:<\/span><span style=\"color: #000000\"> &#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              <\/span><span style=\"color: #001080\">functionId:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;GIS-02&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              <\/span><span style=\"color: #001080\">icon:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">PrimeIcons<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #0070C1\">MAP<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;\/&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          &#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      ],<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">position:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;start&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">items:<\/span><span style=\"color: #000000\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">title:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Dropdown-1&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">type:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;dropdown&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">showInTablet:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">true<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">dropdownItems:<\/span><span style=\"color: #000000\"> &#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              <\/span><span style=\"color: #001080\">title:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Dropdown-1-1&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;\/&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          &#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">title:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Dropdown-2&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">type:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;dropdown&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          <\/span><span style=\"color: #001080\">dropdownItems:<\/span><span style=\"color: #000000\"> &#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              <\/span><span style=\"color: #001080\">title:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Dropdown-2-1&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;\/&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          &#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      ],<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">position:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;end&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  ],<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07 menu \u0e17\u0e35\u0e48\u0e44\u0e21\u0e48\u0e21\u0e35\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e41\u0e25\u0e30 menu \u0e17\u0e35\u0e48\u0e21\u0e35\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/portal-atlasx.cdg.co.th\/share\/Portal%20Docs\/Default\/Web%20Template\/navbar-menu-without-permission.png\" alt=\"Navbar Menu without Permission\" title=\"null\"\/><\/figure>\n\n\n\n<p><small>Navbar Menu without Permission<\/small><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/portal-atlasx.cdg.co.th\/share\/Portal%20Docs\/Default\/Web%20Template\/navbar-menu-with-permission.png\" alt=\"Navbar Menu with Permission\" title=\"null\"\/><\/figure>\n\n\n\n<p><small>Navbar Menu with Permission<\/small><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"sidebar-configuration\">Sidebar Configuration<\/h2>\n\n\n\n<p>\u0e43\u0e19\u0e01\u0e32\u0e23\u0e01\u0e33\u0e2b\u0e19\u0e14 menu \u0e43\u0e19 SideBar \u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e41\u0e15\u0e48\u0e25\u0e30 menu \u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>export interface SiderItems {\n  item?: SiderItem\n  position: 'start' | 'end'\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #AF00DB\">export<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">interface<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">SiderItems<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">item<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">SiderItem<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">position<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&#39;start&#39;<\/span><span style=\"color: #000000\"> | <\/span><span style=\"color: #A31515\">&#39;end&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u0e2a\u0e31\u0e07\u0e40\u0e01\u0e15\u0e44\u0e14\u0e49\u0e27\u0e48\u0e32\u0e08\u0e30\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e44\u0e1b\u0e14\u0e49\u0e27\u0e22 properties 2 \u0e15\u0e31\u0e27\u0e04\u0e37\u0e2d&nbsp;<code>item<\/code>&nbsp;\u0e41\u0e25\u0e30&nbsp;<code>position<\/code>&nbsp;\u0e0b\u0e36\u0e48\u0e07\u0e01\u0e47\u0e04\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e01\u0e33\u0e2b\u0e19\u0e14 menu \u0e27\u0e48\u0e32\u0e21\u0e35\u0e2a\u0e48\u0e27\u0e19\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e2d\u0e30\u0e44\u0e23\u0e1a\u0e49\u0e32\u0e07\u0e2d\u0e35\u0e01\u0e17\u0e31\u0e49\u0e07\u0e22\u0e31\u0e07\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e44\u0e14\u0e49\u0e27\u0e48\u0e32\u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25 menu \u0e17\u0e35\u0e48\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19\u0e2b\u0e23\u0e37\u0e2d\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e02\u0e2d\u0e07 Sider<\/p>\n\n\n\n<p>\u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07&nbsp;<code>item<\/code>&nbsp;\u0e08\u0e30\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e44\u0e1b\u0e14\u0e49\u0e27\u0e22 properties \u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>import { PrimeIcons, TreeNode } from 'primeng\/api'\n\nexport interface MenuItem {\n  title?: string\n  icon?: PrimeIcons\n  functionId?: string\n  url?: string\n}\n\nexport interface SiderItem extends MenuItem {\n  subMenu?: TreeNode&lt;MenuItem>[]\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #AF00DB\">import<\/span><span style=\"color: #000000\"> { <\/span><span style=\"color: #001080\">PrimeIcons<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #001080\">TreeNode<\/span><span style=\"color: #000000\"> } <\/span><span style=\"color: #AF00DB\">from<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;primeng\/api&#39;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #AF00DB\">export<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">interface<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">MenuItem<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">title<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">string<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">icon<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">PrimeIcons<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">functionId<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">string<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">url<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">string<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #AF00DB\">export<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">interface<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">SiderItem<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">extends<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">MenuItem<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">subMenu<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">TreeNode<\/span><span style=\"color: #000000\">&lt;<\/span><span style=\"color: #267F99\">MenuItem<\/span><span style=\"color: #000000\">&gt;[]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>menu \u0e41\u0e15\u0e48\u0e25\u0e30\u0e15\u0e31\u0e27\u0e08\u0e30\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e44\u0e1b\u0e14\u0e49\u0e27\u0e22 properties \u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>title<\/code>\u00a0: \u0e0a\u0e37\u0e48\u0e2d\u0e02\u0e2d\u0e07 menu<\/li>\n\n\n\n<li><code>icon<\/code>\u00a0: \u0e44\u0e2d\u0e04\u0e2d\u0e19\u0e02\u0e2d\u0e07 menu \u0e0b\u0e36\u0e48\u0e07\u0e08\u0e30\u0e43\u0e0a\u0e49\u0e44\u0e2d\u0e04\u0e2d\u0e19\u0e08\u0e32\u0e01\u00a0<a href=\"https:\/\/www.primefaces.org\/primeng-v12-lts\/#\/icons\" target=\"_blank\" rel=\"noreferrer noopener\">PrimeIcons<\/a><\/li>\n\n\n\n<li><code>functionId<\/code>\u00a0: id \u0e02\u0e2d\u0e07 menu \u0e17\u0e35\u0e48\u0e40\u0e01\u0e47\u0e1a\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e02\u0e2d\u0e07 UM \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e01\u0e32\u0e23\u0e21\u0e2d\u0e07\u0e40\u0e2b\u0e47\u0e19\u0e02\u0e2d\u0e07 menu \u0e44\u0e14\u0e49\u0e08\u0e32\u0e01 id \u0e19\u0e35\u0e49<\/li>\n\n\n\n<li><code>url<\/code>\u00a0: url \u0e02\u0e2d\u0e07 menu \u0e17\u0e35\u0e48\u0e08\u0e30 redirect \u0e44\u0e1b \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e40\u0e1b\u0e47\u0e19 angular path \u0e2b\u0e23\u0e37\u0e2d external url \u0e01\u0e47\u0e44\u0e14\u0e49<\/li>\n\n\n\n<li><code>subMenu<\/code>\u00a0: \u0e01\u0e33\u0e2b\u0e19\u0e14 sub menu \u0e02\u0e2d\u0e07 menu \u0e19\u0e35\u0e49 \u0e0b\u0e36\u0e48\u0e07\u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e43\u0e2b\u0e49\u0e2d\u0e22\u0e39\u0e48\u0e43\u0e19\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e02\u0e2d\u0e07\u00a0<code>TreeNode&lt;MenuItem>[]<\/code>\u00a0\u0e02\u0e2d\u0e07 PrimeNG<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<h5 class=\"wp-block-heading\">Note<\/h5>\n\n\n\n<p>\u0e2b\u0e32\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e0a\u0e37\u0e48\u0e2d menu \u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a UM \u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e01\u0e33\u0e2b\u0e19\u0e14&nbsp;<code>functionId<\/code>&nbsp;\u0e41\u0e25\u0e49\u0e27\u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e33\u0e2b\u0e19\u0e14&nbsp;<code>title<\/code>&nbsp;\u0e44\u0e14\u0e49 template \u0e08\u0e30\u0e44\u0e1b\u0e14\u0e36\u0e07\u0e0a\u0e37\u0e48\u0e2d menu \u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a UM \u0e41\u0e17\u0e19<\/p>\n<\/blockquote>\n\n\n\n<p>\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e04\u0e48\u0e32\u0e43\u0e19&nbsp;<code>subMenu<\/code>&nbsp;\u0e08\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49 (\u0e1a\u0e32\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19)<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>export interface TreeNode&lt;MenuItem> {\n  label?: string\n  data?: MenuItem\n  children?: TreeNode&lt;MenuItem>[]\n  expanded?: boolean\n  type?: string\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #AF00DB\">export<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">interface<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">TreeNode<\/span><span style=\"color: #000000\">&lt;<\/span><span style=\"color: #267F99\">MenuItem<\/span><span style=\"color: #000000\">&gt; {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">label<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">string<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">data<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">MenuItem<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">children<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">TreeNode<\/span><span style=\"color: #000000\">&lt;<\/span><span style=\"color: #267F99\">MenuItem<\/span><span style=\"color: #000000\">&gt;[]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">expanded<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">boolean<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">type<\/span><span style=\"color: #000000\">?: <\/span><span style=\"color: #267F99\">string<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>label<\/code>\u00a0: \u0e0a\u0e37\u0e48\u0e2d\u0e02\u0e2d\u0e07 sub menu<\/li>\n\n\n\n<li><code>data<\/code>\u00a0: \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e02\u0e2d\u0e07 sub menu \u0e0b\u0e36\u0e48\u0e07\u0e08\u0e30\u0e40\u0e1b\u0e47\u0e19\u00a0<code>MenuItem<\/code>\u00a0\u0e17\u0e35\u0e48\u0e40\u0e23\u0e32\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e44\u0e27\u0e49\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19<\/li>\n\n\n\n<li><code>children<\/code>\u00a0: \u0e01\u0e33\u0e2b\u0e19\u0e14 sub menu \u0e02\u0e2d\u0e07 sub menu \u0e19\u0e35\u0e49 \u0e0b\u0e36\u0e48\u0e07\u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e43\u0e2b\u0e49\u0e2d\u0e22\u0e39\u0e48\u0e43\u0e19\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e02\u0e2d\u0e07\u00a0<code>TreeNode&lt;MenuItem>[]<\/code>\u00a0\u0e02\u0e2d\u0e07 PrimeNG<\/li>\n\n\n\n<li><code>expanded<\/code>\u00a0: \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e27\u0e48\u0e32 sub menu \u0e19\u0e35\u0e49\u0e08\u0e30\u0e40\u0e1b\u0e34\u0e14\u0e2d\u0e22\u0e39\u0e48\u0e2b\u0e23\u0e37\u0e2d\u0e1b\u0e34\u0e14\u0e2d\u0e22\u0e39\u0e48<\/li>\n\n\n\n<li><code>type<\/code>\u00a0: \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e02\u0e2d\u0e07 sub menu (\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e40\u0e09\u0e1e\u0e32\u0e30 Node \u0e17\u0e35\u0e48\u0e25\u0e36\u0e01\u0e2a\u0e38\u0e14\u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19)<\/li>\n<\/ul>\n\n\n\n<p>\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e01\u0e32\u0e23\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e04\u0e48\u0e32\u0e43\u0e19&nbsp;<code>subMenu<\/code>&nbsp;\u0e08\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49\u0e04\u0e25\u0e34\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e42\u0e04\u0e49\u0e14<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>siderItems: [\n  {\n    item: {\n      title: 'Dashboard',\n        icon: PrimeIcons.TH_LARGE,\n        url: '\/dashboard',\n      },\n      position: 'start',\n    },\n    {\n      item: {\n        title: 'Report',\n        icon: PrimeIcons.FILE_PDF,\n        subMenu: [\n          {\n            label: 'Report 1',\n            expanded: true,\n            children: [\n              {\n                label: 'Sub Report 1-1',\n                data: {\n                  url: '\/sub-report-1-1',\n                },\n                type: 'link',\n              },\n              {\n                label: 'Sub Report 1-1',\n                expanded: true,\n                children: &#91;\n                  {\n                    label: 'Sub Report 1-2',\n                    data: {\n                      url: '\/sub-report-1-2',\n                    },\n                    type: 'link',\n                  },\n                &#93;,\n              },\n            ],\n          },\n          {\n            label: 'Report 2',\n            expanded: true,\n            children: [\n              {\n                label: 'Sub Report 2-1',\n                data: {\n                  url: '\/sub-report-2-1',\n                },\n                type: 'link',\n              },\n              {\n                label: 'Sub Report 2-1',\n                expanded: true,\n                children: &#91;\n                  {\n                    label: 'Sub Report 2-2',\n                    data: {\n                      url: '\/sub-report-2-2',\n                    },\n                    type: 'link',\n                  },\n                  {\n                    label: 'Sub Report 2-2',\n                    data: {\n                      url: '\/sub-report-2-2',\n                    },\n                    type: 'link',\n                  },\n                  {\n                    label: 'Sub Report 2-2',\n                    data: {\n                      url: '\/sub-report-2-2',\n                    },\n                    type: 'link',\n                  },\n                &#93;,\n              },\n            ],\n          },\n        ],\n      },\n      position: 'start',\n    },\n    {\n      item: {\n        title: 'Data List',\n        icon: PrimeIcons.FOLDER,\n        url: '\/mis',\n      },\n      position: 'start',\n    },\n    {\n      item: {\n        title: 'Function List',\n        icon: PrimeIcons.COG,\n        subMenu: [\n          {\n            label: '\u0e23\u0e30\u0e1a\u0e1a\u0e20\u0e39\u0e21\u0e34\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c \u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28',\n            expanded: true,\n            children: [\n              {\n                data: {\n                  functionId: 'GIS-01',\n                },\n                expanded: true,\n                children: [\n                  {\n                    label: 'Simple Search',\n                    data: {\n                      url: '\/gis\/simple-search'\n                    },\n                    type: 'link'\n                  },\n                  {\n                    data: {\n                      functionId: 'GIS-02',\n                    },\n                    children: &#91;\n                      {\n                        data: {\n                          functionId: 'GIS-04',\n                          url: 'https:\/\/portal-atlasx.cdg.co.th',\n                        },\n                        type: 'link',\n                      },\n                    &#93;,\n                  },\n                  {\n                    data: {\n                      functionId: 'GIS-03',\n                      url: 'https:\/\/portal-atlasx.cdg.co.th',\n                    },\n                    type: 'link',\n                  },\n                ],\n              },\n              {\n                data: {\n                  functionId: 'GIS-05',\n                  url: 'https:\/\/portal-atlasx.cdg.co.th',\n                },\n                type: 'link',\n              },\n            ],\n          },\n          {\n            label: '\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19',\n            expanded: true,\n            children: &#91;\n              {\n                data: {\n                  functionId: 'UM-01',\n                  url: 'https:\/\/portal-atlasx.cdg.co.th',\n                },\n                type: 'link',\n              },\n              {\n                data: {\n                  functionId: 'UM-02',\n                  url: 'https:\/\/portal-atlasx.cdg.co.th',\n                },\n                type: 'link',\n              },\n              {\n                data: {\n                  functionId: 'UM-03',\n                  url: 'https:\/\/portal-atlasx.cdg.co.th',\n                },\n                type: 'link',\n              },\n            &#93;,\n          },\n        ],\n      },\n      position: 'start',\n    },\n  ],<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #000000\">siderItems: [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #001080\">item:<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">title:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Dashboard&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #001080\">icon:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">PrimeIcons<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #0070C1\">TH_LARGE<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;\/dashboard&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">position:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;start&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">item:<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #001080\">title:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Report&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #001080\">icon:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">PrimeIcons<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #0070C1\">FILE_PDF<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #001080\">subMenu:<\/span><span style=\"color: #000000\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #001080\">label:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Report 1&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #001080\">expanded:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">true<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #001080\">children:<\/span><span style=\"color: #000000\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">label:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Sub Report 1-1&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">data:<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;\/sub-report-1-1&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">type:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;link&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">label:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Sub Report 1-1&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">expanded:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">true<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">children:<\/span><span style=\"color: #000000\"> &#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #001080\">label:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Sub Report 1-2&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #001080\">data:<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                      <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;\/sub-report-1-2&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #001080\">type:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;link&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                &#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            ],<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #001080\">label:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Report 2&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #001080\">expanded:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">true<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #001080\">children:<\/span><span style=\"color: #000000\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">label:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Sub Report 2-1&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">data:<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;\/sub-report-2-1&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">type:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;link&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">label:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Sub Report 2-1&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">expanded:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">true<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">children:<\/span><span style=\"color: #000000\"> &#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #001080\">label:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Sub Report 2-2&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #001080\">data:<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                      <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;\/sub-report-2-2&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #001080\">type:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;link&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #001080\">label:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Sub Report 2-2&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #001080\">data:<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                      <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;\/sub-report-2-2&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #001080\">type:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;link&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #001080\">label:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Sub Report 2-2&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #001080\">data:<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                      <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;\/sub-report-2-2&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #001080\">type:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;link&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                &#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            ],<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        ],<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">position:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;start&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">item:<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #001080\">title:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Data List&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #001080\">icon:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">PrimeIcons<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #0070C1\">FOLDER<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;\/mis&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">position:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;start&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">item:<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #001080\">title:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Function List&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #001080\">icon:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">PrimeIcons<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #0070C1\">COG<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #001080\">subMenu:<\/span><span style=\"color: #000000\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #001080\">label:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;\u0e23\u0e30\u0e1a\u0e1a\u0e20\u0e39\u0e21\u0e34\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c \u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #001080\">expanded:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">true<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #001080\">children:<\/span><span style=\"color: #000000\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">data:<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  <\/span><span style=\"color: #001080\">functionId:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;GIS-01&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">expanded:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">true<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">children:<\/span><span style=\"color: #000000\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #001080\">label:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;Simple Search&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #001080\">data:<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                      <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;\/gis\/simple-search&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #001080\">type:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;link&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #001080\">data:<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                      <\/span><span style=\"color: #001080\">functionId:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;GIS-02&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #001080\">children:<\/span><span style=\"color: #000000\"> &#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                      {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                        <\/span><span style=\"color: #001080\">data:<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                          <\/span><span style=\"color: #001080\">functionId:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;GIS-04&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                          <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;https:\/\/portal-atlasx.cdg.co.th&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                        },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                        <\/span><span style=\"color: #001080\">type:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;link&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                      },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    &#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #001080\">data:<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                      <\/span><span style=\"color: #001080\">functionId:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;GIS-03&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                      <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;https:\/\/portal-atlasx.cdg.co.th&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #001080\">type:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;link&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                ],<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">data:<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  <\/span><span style=\"color: #001080\">functionId:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;GIS-05&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;https:\/\/portal-atlasx.cdg.co.th&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">type:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;link&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            ],<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #001080\">label:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #001080\">expanded:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">true<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #001080\">children:<\/span><span style=\"color: #000000\"> &#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">data:<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  <\/span><span style=\"color: #001080\">functionId:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;UM-01&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;https:\/\/portal-atlasx.cdg.co.th&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">type:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;link&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">data:<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  <\/span><span style=\"color: #001080\">functionId:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;UM-02&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;https:\/\/portal-atlasx.cdg.co.th&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">type:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;link&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">data:<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  <\/span><span style=\"color: #001080\">functionId:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;UM-03&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                  <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;https:\/\/portal-atlasx.cdg.co.th&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #001080\">type:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;link&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">              },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            &#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">          },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        ],<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">position:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;start&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  ],<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07 menu \u0e17\u0e35\u0e48\u0e44\u0e21\u0e48\u0e21\u0e35\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e41\u0e25\u0e30 menu \u0e17\u0e35\u0e48\u0e21\u0e35\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/portal-atlasx.cdg.co.th\/share\/Portal%20Docs\/Default\/Web%20Template\/sider-menu-without-permission.png\" alt=\"Sider Menu without Permission\" title=\"null\"\/><\/figure>\n\n\n\n<p><small>Sider Menu without Permission<\/small><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/portal-atlasx.cdg.co.th\/share\/Portal%20Docs\/Default\/Web%20Template\/sider-menu-with-permission.png\" alt=\"Sider Menu with Permission\" title=\"null\"\/><\/figure>\n\n\n\n<p><small>Sider Menu with Permission<\/small><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"mobile-navigation-bar-configuration\">Mobile Navigation Bar Configuration<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"mobile-sidebar-configuration\">Mobile Sidebar Configuration<\/h2>\n","protected":false},"featured_media":0,"parent":3410,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nav_title":"","positive":"","negative":"","footnotes":""},"docs_category":[],"class_list":["post-3413","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs\/3413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/comments?post=3413"}],"version-history":[{"count":1,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs\/3413\/revisions"}],"predecessor-version":[{"id":3414,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs\/3413\/revisions\/3414"}],"up":[{"embeddable":true,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs\/3410"}],"wp:attachment":[{"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/media?parent=3413"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs_category?post=3413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}