diff --git a/datasources/MySQL Bildschirmbuchung.json b/datasources/MySQL Bildschirmbuchung.json
new file mode 100644
index 0000000..b155ae9
--- /dev/null
+++ b/datasources/MySQL Bildschirmbuchung.json
@@ -0,0 +1,6 @@
+{
+ "gitSyncId": "6a54b983d3076fb3cf8e67f0_0423eb63-d957-414e-bb5b-166c94a4408a",
+ "isAutoGenerated": false,
+ "name": "MySQL Bildschirmbuchung",
+ "pluginId": "mysql-plugin"
+}
\ No newline at end of file
diff --git a/metadata.json b/metadata.json
new file mode 100644
index 0000000..8f1344c
--- /dev/null
+++ b/metadata.json
@@ -0,0 +1,6 @@
+{
+ "artifactJsonType": "PACKAGE",
+ "clientSchemaVersion": 2,
+ "fileFormatVersion": 5,
+ "serverSchemaVersion": 12
+}
\ No newline at end of file
diff --git a/modules/Home/Home.json b/modules/Home/Home.json
new file mode 100644
index 0000000..429a39e
--- /dev/null
+++ b/modules/Home/Home.json
@@ -0,0 +1,55 @@
+{
+ "gitSyncId": "6a60d720eeb7b478efb4cf2e_177f5bcb-e8ae-4c83-a63a-b47961ef8910",
+ "moduleUUID": "df3b5e28-9a87-4e91-ba97-6016b27b93b9",
+ "type": "UI_MODULE",
+ "unpublishedModule": {
+ "inputsForm": [
+ {
+ "children": [
+ {
+ "controlType": "INPUT_TEXT",
+ "defaultValue": "{{ {page: NavBar_Variables1.pagename, navItems: [\n\t{id: 1, title: 'Home'},\n\t{id: 2, title: 'Page2', icon: '1️⃣'},\n\t{id: 3, title: 'Page3', icon: '2️⃣'},\n\t{id: 4, title: 'Page4', icon: '3️⃣'}\n]\n\t }}}",
+ "id": "hjrjvwqzvh",
+ "label": "Pages",
+ "propertyName": "inputs.Pages"
+ }
+ ],
+ "id": "jlrjjbqgji",
+ "sectionName": ""
+ }
+ ],
+ "layouts": [
+ {
+ "dsl": {
+ "backgroundColor": "none",
+ "bottomRow": 380,
+ "canExtend": true,
+ "containerStyle": "none",
+ "detachFromLayout": true,
+ "dynamicBindingPathList": [],
+ "dynamicTriggerPathList": [],
+ "leftColumn": 0,
+ "minHeight": 597,
+ "parentColumnSpace": 1,
+ "parentRowSpace": 1,
+ "rightColumn": 1242,
+ "snapColumns": 64,
+ "snapRows": 124,
+ "topRow": 0,
+ "type": "CANVAS_WIDGET",
+ "version": 94,
+ "widgetId": "0",
+ "widgetName": "MainContainer"
+ }
+ }
+ ],
+ "name": "Home",
+ "outputsForm": [
+ {
+ "children": [],
+ "id": "rlsjwsfkzs",
+ "sectionName": ""
+ }
+ ]
+ }
+}
\ No newline at end of file
diff --git a/modules/Home/queries/Query1/Query1.txt b/modules/Home/queries/Query1/Query1.txt
new file mode 100644
index 0000000..e69de29
diff --git a/modules/Home/queries/Query1/metadata.json b/modules/Home/queries/Query1/metadata.json
new file mode 100644
index 0000000..b142990
--- /dev/null
+++ b/modules/Home/queries/Query1/metadata.json
@@ -0,0 +1,33 @@
+{
+ "gitSyncId": "ce18bbf0-d0cc-4ca5-b3e9-1e360e102013_6f339d33-8030-4b23-8f31-6dd907cb7ec3",
+ "id": "Home_Query1",
+ "isPublic": false,
+ "pluginId": "mysql-plugin",
+ "pluginType": "DB",
+ "unpublishedAction": {
+ "actionConfiguration": {
+ "body": "",
+ "encodeParamsToggle": true,
+ "paginationType": "NONE",
+ "pluginSpecifiedTemplates": [
+ {
+ "value": true
+ }
+ ],
+ "timeoutInMillisecond": 10000
+ },
+ "confirmBeforeExecute": false,
+ "contextType": "MODULE",
+ "datasource": {
+ "id": "MySQL Bildschirmbuchung",
+ "isAutoGenerated": false,
+ "name": "MySQL Bildschirmbuchung",
+ "pluginId": "mysql-plugin"
+ },
+ "dynamicBindingPathList": [],
+ "moduleId": "Home",
+ "name": "Query1",
+ "runBehaviour": "MANUAL",
+ "userSetOnLoad": false
+ }
+}
\ No newline at end of file
diff --git a/modules/Home/widgets/Account_Info/Account_Info.json b/modules/Home/widgets/Account_Info/Account_Info.json
new file mode 100644
index 0000000..05d53f3
--- /dev/null
+++ b/modules/Home/widgets/Account_Info/Account_Info.json
@@ -0,0 +1,84 @@
+{
+ "animateLoading": true,
+ "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
+ "bottomRow": 260,
+ "boxShadow": "none",
+ "canEscapeKeyClose": true,
+ "canOutsideClickClose": true,
+ "children": [
+ {
+ "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
+ "bottomRow": 240,
+ "boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}",
+ "canExtend": true,
+ "detachFromLayout": true,
+ "dynamicBindingPathList": [
+ {
+ "key": "borderRadius"
+ },
+ {
+ "key": "boxShadow"
+ }
+ ],
+ "dynamicHeight": "AUTO_HEIGHT",
+ "flexLayers": [],
+ "isDisabled": false,
+ "isLoading": false,
+ "isVisible": true,
+ "key": "kc121zvuo2",
+ "leftColumn": 0,
+ "maxDynamicHeight": 9000,
+ "minDynamicHeight": 4,
+ "minHeight": 240,
+ "minWidth": 450,
+ "mobileBottomRow": 240,
+ "mobileLeftColumn": 0,
+ "mobileRightColumn": 325.125,
+ "mobileTopRow": 0,
+ "needsErrorInfo": false,
+ "parentColumnSpace": 1,
+ "parentId": "nd7v2tmkot",
+ "parentRowSpace": 1,
+ "renderMode": "CANVAS",
+ "responsiveBehavior": "fill",
+ "rightColumn": 325.125,
+ "shouldScrollContents": false,
+ "topRow": 0,
+ "type": "CANVAS_WIDGET",
+ "version": 1,
+ "widgetId": "4an5i483uc",
+ "widgetName": "Canvas1"
+ }
+ ],
+ "detachFromLayout": true,
+ "dynamicBindingPathList": [
+ {
+ "key": "borderRadius"
+ }
+ ],
+ "dynamicHeight": "AUTO_HEIGHT",
+ "height": 240,
+ "isCanvas": true,
+ "isLoading": false,
+ "key": "2gvz10nl09",
+ "leftColumn": 12,
+ "maxDynamicHeight": 9000,
+ "minDynamicHeight": 24,
+ "mobileBottomRow": 44,
+ "mobileLeftColumn": 12,
+ "mobileRightColumn": 36,
+ "mobileTopRow": 20,
+ "needsErrorInfo": false,
+ "parentColumnSpace": 13.546875,
+ "parentId": "0",
+ "parentRowSpace": 10,
+ "renderMode": "CANVAS",
+ "rightColumn": 36,
+ "shouldScrollContents": true,
+ "topRow": 20,
+ "type": "MODAL_WIDGET",
+ "version": 2,
+ "widgetId": "nd7v2tmkot",
+ "widgetName": "Account_Info",
+ "width": 456
+}
\ No newline at end of file
diff --git a/modules/Home/widgets/Account_Info/Close_Button.json b/modules/Home/widgets/Account_Info/Close_Button.json
new file mode 100644
index 0000000..b7f1a56
--- /dev/null
+++ b/modules/Home/widgets/Account_Info/Close_Button.json
@@ -0,0 +1,44 @@
+{
+ "animateLoading": true,
+ "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
+ "bottomRow": 4,
+ "boxShadow": "none",
+ "buttonColor": "{{appsmith.theme.colors.primaryColor}}",
+ "buttonVariant": "TERTIARY",
+ "dynamicBindingPathList": [
+ {
+ "key": "buttonColor"
+ },
+ {
+ "key": "borderRadius"
+ }
+ ],
+ "dynamicTriggerPathList": [
+ {
+ "key": "onClick"
+ }
+ ],
+ "iconName": "cross",
+ "iconSize": 24,
+ "isDisabled": false,
+ "isLoading": false,
+ "isVisible": true,
+ "key": "bbjnqcfkkj",
+ "leftColumn": 57,
+ "minWidth": 50,
+ "mobileBottomRow": 4,
+ "mobileLeftColumn": 58,
+ "mobileRightColumn": 64,
+ "mobileTopRow": 0,
+ "needsErrorInfo": false,
+ "onClick": "{{closeModal(Account_Info.name);}}",
+ "parentId": "4an5i483uc",
+ "renderMode": "CANVAS",
+ "responsiveBehavior": "hug",
+ "rightColumn": 63,
+ "topRow": 0,
+ "type": "ICON_BUTTON_WIDGET",
+ "version": 1,
+ "widgetId": "2hyco2umu4",
+ "widgetName": "Close_Button"
+}
\ No newline at end of file
diff --git a/modules/Home/widgets/Account_Info/Rollenverwaltung.json b/modules/Home/widgets/Account_Info/Rollenverwaltung.json
new file mode 100644
index 0000000..09f14fa
--- /dev/null
+++ b/modules/Home/widgets/Account_Info/Rollenverwaltung.json
@@ -0,0 +1,44 @@
+{
+ "animateLoading": true,
+ "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
+ "bottomRow": 22,
+ "boxShadow": "none",
+ "buttonColor": "{{appsmith.theme.colors.primaryColor}}",
+ "buttonStyle": "PRIMARY_BUTTON",
+ "buttonVariant": "PRIMARY",
+ "disabledWhenInvalid": false,
+ "dynamicBindingPathList": [
+ {
+ "key": "buttonColor"
+ },
+ {
+ "key": "borderRadius"
+ }
+ ],
+ "dynamicTriggerPathList": [],
+ "isDefaultClickDisabled": true,
+ "isDisabled": false,
+ "isLoading": false,
+ "isVisible": true,
+ "key": "06pxj7dxa9",
+ "leftColumn": 1,
+ "minWidth": 120,
+ "mobileBottomRow": 22,
+ "mobileLeftColumn": 47,
+ "mobileRightColumn": 63,
+ "mobileTopRow": 18,
+ "needsErrorInfo": false,
+ "parentId": "4an5i483uc",
+ "placement": "CENTER",
+ "recaptchaType": "V3",
+ "renderMode": "CANVAS",
+ "resetFormOnClick": false,
+ "responsiveBehavior": "hug",
+ "rightColumn": 30,
+ "text": "Rollenverwaltung",
+ "topRow": 18,
+ "type": "BUTTON_WIDGET",
+ "version": 1,
+ "widgetId": "gcj7dugv9l",
+ "widgetName": "Rollenverwaltung"
+}
\ No newline at end of file
diff --git a/modules/Home/widgets/Account_Info/Text1.json b/modules/Home/widgets/Account_Info/Text1.json
new file mode 100644
index 0000000..d84032d
--- /dev/null
+++ b/modules/Home/widgets/Account_Info/Text1.json
@@ -0,0 +1,48 @@
+{
+ "animateLoading": true,
+ "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
+ "bottomRow": 5,
+ "dynamicBindingPathList": [
+ {
+ "key": "truncateButtonColor"
+ },
+ {
+ "key": "fontFamily"
+ },
+ {
+ "key": "borderRadius"
+ }
+ ],
+ "dynamicHeight": "AUTO_HEIGHT",
+ "dynamicTriggerPathList": [],
+ "fontFamily": "{{appsmith.theme.fontFamily.appFont}}",
+ "fontSize": "1.25rem",
+ "fontStyle": "BOLD",
+ "isLoading": false,
+ "isVisible": true,
+ "key": "ukcxudtsju",
+ "leftColumn": 1,
+ "maxDynamicHeight": 9000,
+ "minDynamicHeight": 4,
+ "minWidth": 450,
+ "mobileBottomRow": 5,
+ "mobileLeftColumn": 1,
+ "mobileRightColumn": 41,
+ "mobileTopRow": 1,
+ "needsErrorInfo": false,
+ "overflow": "NONE",
+ "parentId": "4an5i483uc",
+ "renderMode": "CANVAS",
+ "responsiveBehavior": "fill",
+ "rightColumn": 41,
+ "shouldTruncate": false,
+ "text": "Account Info",
+ "textAlign": "LEFT",
+ "textColor": "#231F20",
+ "topRow": 1,
+ "truncateButtonColor": "{{appsmith.theme.colors.primaryColor}}",
+ "type": "TEXT_WIDGET",
+ "version": 1,
+ "widgetId": "6s4jxkg8gz",
+ "widgetName": "Text1"
+}
\ No newline at end of file
diff --git a/modules/Home/widgets/ModuleContainer/ModuleContainer.json b/modules/Home/widgets/ModuleContainer/ModuleContainer.json
new file mode 100644
index 0000000..670a678
--- /dev/null
+++ b/modules/Home/widgets/ModuleContainer/ModuleContainer.json
@@ -0,0 +1,89 @@
+{
+ "animateLoading": true,
+ "backgroundColor": "#f1f5f9",
+ "borderColor": "#f1f5f9",
+ "borderRadius": "0.375rem",
+ "borderWidth": "1",
+ "bottomRow": 8,
+ "boxShadow": "none",
+ "children": [
+ {
+ "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
+ "bottomRow": 80,
+ "boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}",
+ "canExtend": true,
+ "containerStyle": "none",
+ "detachFromLayout": true,
+ "dynamicBindingPathList": [
+ {
+ "key": "borderRadius"
+ },
+ {
+ "key": "boxShadow"
+ }
+ ],
+ "dynamicHeight": "AUTO_HEIGHT",
+ "flexLayers": [],
+ "isLoading": false,
+ "isVisible": true,
+ "key": "r3wzanaizh",
+ "leftColumn": 0,
+ "maxDynamicHeight": 9000,
+ "minDynamicHeight": 4,
+ "minHeight": 100,
+ "minWidth": 450,
+ "mobileBottomRow": 100,
+ "mobileLeftColumn": 0,
+ "mobileRightColumn": 403.5,
+ "mobileTopRow": 0,
+ "needsErrorInfo": false,
+ "parentColumnSpace": 1,
+ "parentId": "module-container-0",
+ "parentRowSpace": 1,
+ "renderMode": "CANVAS",
+ "responsiveBehavior": "fill",
+ "rightColumn": 403.5,
+ "showOnboardingText": true,
+ "topRow": 0,
+ "type": "CANVAS_WIDGET",
+ "version": 1,
+ "widgetId": "module-canvas-0",
+ "widgetName": "ModuleContainerCanvas"
+ }
+ ],
+ "containerStyle": "card",
+ "dragDisabled": true,
+ "dynamicBindingPathList": [],
+ "dynamicHeight": "FIXED",
+ "enhancements": true,
+ "flexVerticalAlignment": "stretch",
+ "isCanvas": true,
+ "isDeletable": false,
+ "isLoading": false,
+ "isRenameDisabled": true,
+ "isVisible": true,
+ "key": "5p2qm9b2xx",
+ "leftColumn": 0,
+ "maxDynamicHeight": 9000,
+ "minDynamicHeight": 10,
+ "minWidth": 450,
+ "mobileBottomRow": 10,
+ "mobileLeftColumn": 0,
+ "mobileRightColumn": 24,
+ "mobileTopRow": 0,
+ "needsErrorInfo": false,
+ "parentColumnSpace": 16.609375,
+ "parentId": "0",
+ "parentRowSpace": 10,
+ "renderMode": "CANVAS",
+ "responsiveBehavior": "fill",
+ "rightColumn": 64,
+ "shouldScrollContents": false,
+ "suppressAutoComplete": true,
+ "suppressDebuggerError": false,
+ "topRow": 0,
+ "type": "MODULE_CONTAINER_WIDGET",
+ "version": 1,
+ "widgetId": "module-container-0",
+ "widgetName": "ModuleContainer"
+}
\ No newline at end of file
diff --git a/modules/Home/widgets/ModuleContainer/NavBar.json b/modules/Home/widgets/ModuleContainer/NavBar.json
new file mode 100644
index 0000000..4c2104e
--- /dev/null
+++ b/modules/Home/widgets/ModuleContainer/NavBar.json
@@ -0,0 +1,85 @@
+{
+ "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