dhis2_generate_ui_navigation_layout
Generate navigation and layout patterns for DHIS2 applications, including header bars, sidebars, breadcrumbs, and tabs with responsive design options.
Instructions
Generate @dhis2/ui navigation and layout patterns (header bar, sidebar, breadcrumbs, tabs)
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| componentName | No | Component name | |
| includeHeaderBar | No | Include HeaderBar | |
| includeSidebar | No | Include sidebar Menu | |
| includeBreadcrumbs | No | Include Breadcrumbs | |
| includeTabs | No | Include TabBar | |
| includeResponsive | No | Include responsive CSS | |
| useAlerts | No | Include useAlert example for feedback | |
| rtl | No | Add RTL considerations |
Implementation Reference
- src/webapp-generators.ts:1443-1510 (handler)The core handler function that generates React JSX code for a DHIS2 UI navigation layout using @dhis2/ui components, including optional header, sidebar, breadcrumbs, tabs, and responsive design.
export function generateUINavigationLayout(args: any): string { const { componentName = 'NavigationLayout', includeHeaderBar = true, includeSidebar = true, includeBreadcrumbs = true, includeTabs = true, includeResponsive = true } = args; return `# @dhis2/ui Navigation & Layout: ${componentName} ## Implementation \`\`\`jsx import React from 'react'; import { Menu, MenuItem, TabBar, Tab, Breadcrumbs, BreadcrumbsItem } from '@dhis2/ui'; ${includeHeaderBar ? "import { HeaderBar } from '@dhis2/ui';" : ''} export const ${componentName} = () => { const [active, setActive] = React.useState('dashboard'); return ( <div className="layout"> ${includeHeaderBar ? '<HeaderBar appName="My DHIS2 App" />' : ''} <div className="content"> ${includeSidebar ? ` <aside className="sidebar"> <Menu> <MenuItem label="Dashboard" active={active==='dashboard'} onClick={() => setActive('dashboard')} /> <MenuItem label="Data Entry" active={active==='data-entry'} onClick={() => setActive('data-entry')} /> <MenuItem label="Reports" active={active==='reports'} onClick={() => setActive('reports')} /> </Menu> </aside> ` : ''} <main className="main"> ${includeBreadcrumbs ? ` <Breadcrumbs> <BreadcrumbsItem>Home</BreadcrumbsItem> <BreadcrumbsItem>Section</BreadcrumbsItem> <BreadcrumbsItem>Page</BreadcrumbsItem> </Breadcrumbs> ` : ''} ${includeTabs ? ` <TabBar> <Tab selected>Overview</Tab> <Tab>Details</Tab> <Tab>Settings</Tab> </TabBar> ` : ''} </main> </div> </div> ); }; // Basic layout styles const styles = \`.layout { display: flex; flex-direction: column; height: 100vh; } .content { display: grid; grid-template-columns: ${includeSidebar ? '240px 1fr' : '1fr'}; flex: 1; min-height: 0; } .sidebar { border-right: 1px solid #e5e7eb; padding: 12px; overflow: auto; } .main { padding: 16px; overflow: auto; } ${includeResponsive ? '@media (max-width: 768px) { .content { grid-template-columns: 1fr; } .sidebar { display:none; } }' : ''}\`; \`\`\` `; } - src/index.ts:1088-1095 (registration)The MCP server tool dispatch case that registers and handles calls to 'dhis2_generate_ui_navigation_layout' by invoking the generateUINavigationLayout function.
case 'dhis2_generate_ui_navigation_layout': const navArgs = args as any; const navCode = generateUINavigationLayout(navArgs); return { content: [ { type: 'text', text: navCode } ] }; - src/permission-system.ts:172-172 (registration)Permission mapping in TOOL_PERMISSIONS that requires 'canUseUITools' permission for the tool.
['dhis2_generate_ui_navigation_layout', 'canUseUITools'],