{
"backgroundColor": "#FFFFFF",
"borderColor": "#E0DEDE",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"borderWidth": "1",
"bottomRow": 6,
"boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}",
"defaultModel": "{{inputs.Pages}}",
"dynamicBindingPathList": [
{
"key": "theme"
},
{
"key": "borderRadius"
},
{
"key": "boxShadow"
},
{
"key": "defaultModel"
}
],
"dynamicHeight": "FIXED",
"dynamicPropertyPathList": [
{
"key": "navigateTo"
},
{
"key": "openUserModal"
}
],
"dynamicTriggerPathList": [
{
"key": "navigateTo"
},
{
"key": "openUserModal"
},
{
"key": "openApps"
}
],
"events": [
"navigateTo",
"openUserModal",
"openApps"
],
"isCanvas": false,
"isLoading": false,
"isSearchWildcard": true,
"isVisible": true,
"key": "c1ezf1lufg",
"leftColumn": 0,
"maxDynamicHeight": 9000,
"minDynamicHeight": 4,
"mobileBottomRow": 31,
"mobileLeftColumn": 8,
"mobileRightColumn": 31,
"mobileTopRow": 1,
"navigateTo": "{{ navigateTo(pageName, {}, 'SAME_WINDOW') }}",
"needsErrorInfo": false,
"openApps": "{{navigateTo('https://dev.ep-reisen.app/app/app-hub/page1-6a61c812eeb7b478efb4d1fd', {}, 'SAME_WINDOW');}}",
"openUserModal": "{{ showModal(Account_Info.name) }}",
"parentColumnSpace": 13.234375,
"parentId": "module-canvas-0",
"parentRowSpace": 10,
"renderMode": "CANVAS",
"rightColumn": 64,
"srcDoc": {
"css": "@charset \"UTF-8\";\n.navbar {\n display: flex;\n background-color: #ffffff;\n height: 100%;\n padding-top: 0;\n align-items: center;\n width: 100%;\n}\n\n.nav-left {\n display: flex;\n align-items: center;\n gap: 0;\n flex: 1 1 auto;\n}\n\n.nav-right {\n display: flex;\n align-items: center;\n margin-left: auto;\n}\n\n.apps-button {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 10px;\n padding: 4px;\n border: none;\n background: transparent;\n border-radius: 0.375rem;\n color: #3f3f46;\n transition: background-color 0.15s ease, color 0.15s ease;\n}\n\n.apps-button:hover {\n background-color: #dbeafe;\n color: #3f3f46;\n}\n\n.apps-icon {\n display: block;\n width: 22px;\n height: 22px;\n flex: 0 0 auto;\n}\n\n.nav-item {\n cursor: pointer;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n margin-right: 14px;\n margin-left: 8px;\n color: #3f3f46;\n text-decoration: none;\n padding: 4px 10px;\n border-radius: 0.375rem;\n font-family: Inter, sans-serif;\n font-size: 15px;\n font-weight: 700;\n line-height: 1;\n transition: background-color 0.15s ease, color 0.15s ease;\n}\n\n/* Hover für alle Seiten */\n.nav-item:hover {\n background-color: #dbeafe;\n color: #3f3f46;\n}\n\n.nav-item:hover .nav-icon,\n.nav-item:hover .nav-title {\n color: #3f3f46;\n}\n\n/* Aktive Seite: konstanter hellblauer Hintergrund */\n.nav-item.selected {\n background-color: #dbeafe;\n border-radius: 0.375rem;\n color: #3f3f46;\n}\n\n.nav-item.selected .nav-title {\n color: #3f3f46;\n text-decoration: none;\n}\n\n.nav-item.selected .nav-icon {\n color: #3f3f46;\n}\n\n.nav-icon {\n font-size: 20px;\n line-height: 1;\n margin-bottom: 0;\n flex: 0 0 auto;\n}\n\n.nav-title {\n font-size: 15px;\n font-weight: 700;\n color: inherit;\n line-height: 1;\n}\n\n/* User-Button rechts */\n.user-button {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: auto;\n margin-right: 8px;\n}\n\n/* Kreis mit blauem Border als Hintergrund */\n.user-circle {\n width: 34px;\n height: 34px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #ffffff;\n color: #3f3f46;\n border: 1px solid #0084d4;\n overflow: hidden;\n position: relative;\n transition: background-color 0.15s ease, border-color 0.15s ease;\n}\n\n/* Hover: nur Hintergrund etwas heller, Kreis bleibt blau */\n.user-circle:hover {\n background-color: #dbeafe;\n border-color: #0084d4;\n}\n\n/* Icon-Farbe unverändert lassen */\n.user-circle:hover .user-icon {\n /* keine Farbänderung */\n}\n\n.user-icon {\n display: block;\n flex: 0 0 auto;\n width: 22px;\n height: 22px;\n}",
"html": "",
"js": "import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm';\nimport ReactDOM from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm';\nfunction MainNavBar() {\n const navItems = appsmith.model.navItems || [];\n const currentPage = String(appsmith.model.page || \"\").toLowerCase();\n const activeItemId = navItems.find(item => String(item.title || \"\").toLowerCase() === currentPage)?.id;\n const [selectedItem, setSelectedItem] = React.useState(activeItemId);\n React.useEffect(() => {\n const newActiveId = navItems.find(item => String(item.title || \"\").toLowerCase() === currentPage)?.id;\n setSelectedItem(newActiveId);\n }, [currentPage, navItems]);\n const handleItemClick = itemId => {\n const item = navItems.find(i => i.id === itemId);\n if (!item) {\n return;\n }\n const title = item.title;\n appsmith.triggerEvent('navigateTo', {\n pageName: title\n });\n };\n const openUserModal = () => {\n appsmith.triggerEvent('openUserModal');\n };\n const openApps = () => {\n appsmith.triggerEvent('openApps');\n };\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"navbar\"\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"nav-left\"\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"apps-button\",\n onClick: openApps,\n title: \"alle Apps\",\n \"aria-label\": \"alle Apps\",\n type: \"button\"\n }, /*#__PURE__*/React.createElement(\"svg\", {\n className: \"apps-icon\",\n viewBox: \"0 0 24 24\",\n fill: \"currentColor\",\n xmlns: \"http://www.w3.org/2000/svg\"\n }, /*#__PURE__*/React.createElement(\"circle\", {\n cx: \"5\",\n cy: \"5\",\n r: \"2.5\"\n }), /*#__PURE__*/React.createElement(\"circle\", {\n cx: \"12\",\n cy: \"5\",\n r: \"2.5\"\n }), /*#__PURE__*/React.createElement(\"circle\", {\n cx: \"19\",\n cy: \"5\",\n r: \"2.5\"\n }), /*#__PURE__*/React.createElement(\"circle\", {\n cx: \"5\",\n cy: \"12\",\n r: \"2.5\"\n }), /*#__PURE__*/React.createElement(\"circle\", {\n cx: \"12\",\n cy: \"12\",\n r: \"2.5\"\n }), /*#__PURE__*/React.createElement(\"circle\", {\n cx: \"19\",\n cy: \"12\",\n r: \"2.5\"\n }), /*#__PURE__*/React.createElement(\"circle\", {\n cx: \"5\",\n cy: \"19\",\n r: \"2.5\"\n }), /*#__PURE__*/React.createElement(\"circle\", {\n cx: \"12\",\n cy: \"19\",\n r: \"2.5\"\n }), /*#__PURE__*/React.createElement(\"circle\", {\n cx: \"19\",\n cy: \"19\",\n r: \"2.5\"\n }))), navItems.map(item => /*#__PURE__*/React.createElement(\"a\", {\n key: item.id,\n className: selectedItem === item.id ? 'nav-item selected' : 'nav-item',\n onClick: () => handleItemClick(item.id),\n title: item.title\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"nav-icon\"\n }, item.icon), /*#__PURE__*/React.createElement(\"span\", {\n className: \"nav-title\"\n }, item.title)))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"nav-right\"\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"user-button\",\n onClick: openUserModal,\n title: \"Account Info\"\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"user-circle\"\n }, /*#__PURE__*/React.createElement(\"svg\", {\n className: \"user-icon\",\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12 12c2.761 0 5-2.239 5-5s-2.239-5-5-5-5 2.239-5 5 2.239 5 5 5Z\",\n fill: \"currentColor\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M4 21c0-4.418 3.582-8 8-8s8 3.582 8 8\",\n fill: \"currentColor\"\n }))))));\n}\nappsmith.onReady(() => {\n ReactDOM.render(/*#__PURE__*/React.createElement(MainNavBar, null), document.getElementById(\"root\"));\n});"
},
"theme": "{{appsmith.theme}}",
"topRow": 0,
"type": "CUSTOM_WIDGET",
"uncompiledSrcDoc": {
"css": ".navbar {\n display: flex;\n background-color: #ffffff;\n height: 100%;\n padding-top: 0;\n align-items: center;\n width: 100%;\n}\n\n.nav-left {\n display: flex;\n align-items: center;\n gap: 0;\n flex: 1 1 auto;\n}\n\n.nav-right {\n display: flex;\n align-items: center;\n margin-left: auto;\n}\n\n.apps-button {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 10px;\n padding: 4px;\n border: none;\n background: transparent;\n border-radius: 0.375rem;\n color: #3f3f46;\n transition: background-color 0.15s ease, color 0.15s ease;\n}\n\n.apps-button:hover {\n background-color: #dbeafe;\n color: #3f3f46;\n}\n\n.apps-icon {\n display: block;\n width: 22px;\n height: 22px;\n flex: 0 0 auto;\n}\n\n.nav-item {\n cursor: pointer;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n margin-right: 14px;\n margin-left: 8px;\n color: #3f3f46;\n text-decoration: none;\n padding: 4px 10px;\n border-radius: 0.375rem;\n font-family: Inter, sans-serif;\n font-size: 15px;\n font-weight: 700;\n line-height: 1;\n transition: background-color 0.15s ease, color 0.15s ease;\n}\n\n/* Hover für alle Seiten */\n.nav-item:hover {\n background-color: #dbeafe;\n color: #3f3f46;\n}\n\n.nav-item:hover .nav-icon,\n.nav-item:hover .nav-title {\n color: #3f3f46;\n}\n\n/* Aktive Seite: konstanter hellblauer Hintergrund */\n.nav-item.selected {\n background-color: #dbeafe;\n border-radius: 0.375rem;\n color: #3f3f46;\n}\n\n.nav-item.selected .nav-title {\n color: #3f3f46;\n text-decoration: none;\n}\n\n.nav-item.selected .nav-icon {\n color: #3f3f46;\n}\n\n.nav-icon {\n font-size: 20px;\n line-height: 1;\n margin-bottom: 0;\n flex: 0 0 auto;\n}\n\n.nav-title {\n font-size: 15px;\n font-weight: 700;\n color: inherit;\n line-height: 1;\n}\n\n/* User-Button rechts */\n.user-button {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: auto;\n margin-right: 8px;\n}\n\n/* Kreis mit blauem Border als Hintergrund */\n.user-circle {\n width: 34px;\n height: 34px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #ffffff;\n color: #3f3f46;\n border: 1px solid #0084d4;\n overflow: hidden;\n position: relative;\n transition: background-color 0.15s ease, border-color 0.15s ease;\n}\n\n/* Hover: nur Hintergrund etwas heller, Kreis bleibt blau */\n.user-circle:hover {\n background-color: #dbeafe;\n border-color: #0084d4;\n}\n\n/* Icon-Farbe unverändert lassen */\n.user-circle:hover .user-icon {\n /* keine Farbänderung */\n}\n\n.user-icon {\n display: block;\n flex: 0 0 auto;\n width: 22px;\n height: 22px;\n}",
"html": "",
"js": "import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm';\nimport ReactDOM from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm';\n\nfunction MainNavBar() {\n const navItems = appsmith.model.navItems || [];\n const currentPage = String(appsmith.model.page || \"\").toLowerCase();\n\n const activeItemId = navItems.find(\n (item) => String(item.title || \"\").toLowerCase() === currentPage\n )?.id;\n\n const [selectedItem, setSelectedItem] = React.useState(activeItemId);\n\n React.useEffect(() => {\n const newActiveId = navItems.find(\n (item) => String(item.title || \"\").toLowerCase() === currentPage\n )?.id;\n setSelectedItem(newActiveId);\n }, [currentPage, navItems]);\n\n const handleItemClick = (itemId) => {\n const item = navItems.find((i) => i.id === itemId);\n if (!item) {\n return;\n }\n const title = item.title;\n appsmith.triggerEvent('navigateTo', { pageName: title });\n };\n\n const openUserModal = () => {\n appsmith.triggerEvent('openUserModal');\n };\n\n const openApps = () => {\n appsmith.triggerEvent('openApps');\n };\n\n return (\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n\n {navItems.map((item) => (\n handleItemClick(item.id)}\n title={item.title}\n >\n {item.icon}
\n {item.title}\n \n ))}\n \n\n
\n