EP/Appsmith-NavBar-UI-Package
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Farbänderung

Browse Source
This commit is contained in:
Admin
2026-07-28 06:48:10 +00:00
parent d25bf62941
commit 9c96ddd466
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/Home/widgets/ModuleContainer/NavBar.json
+2 -2
View File
@@ -67,7 +67,7 @@
"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}",
"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: #e0ecf5;\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: #18527B;\n color: #ffffff;\n}\n\n.nav-item:hover .nav-icon,\n.nav-item:hover .nav-title {\n color: #ffffff;\n}\n\n/* Aktive Seite: konstanter dunkler blauer Hintergrund */\n.nav-item.selected {\n background-color: #18527B;\n border-radius: 0.375rem;\n color: #ffffff;\n}\n\n.nav-item.selected .nav-title {\n color: #ffffff;\n text-decoration: none;\n}\n\n.nav-item.selected .nav-icon {\n color: #ffffff;\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 #18527B;\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: #e0ecf5;\n border-color: #18527B;\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": "<div id=\"root\"></div>",
"js": "import React from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';\nimport ReactDOM from 'https://cdn.jsdelivr.net/npm/[email protected]/+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});"
},
@@ -75,7 +75,7 @@
"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}",
"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: #e0ecf5;\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: #18527B;\n color: #ffffff;\n}\n\n.nav-item:hover .nav-icon,\n.nav-item:hover .nav-title {\n color: #ffffff;\n}\n\n/* Aktive Seite: konstanter dunkler blauer Hintergrund */\n.nav-item.selected {\n background-color: #18527B;\n border-radius: 0.375rem;\n color: #ffffff;\n}\n\n.nav-item.selected .nav-title {\n color: #ffffff;\n text-decoration: none;\n}\n\n.nav-item.selected .nav-icon {\n color: #ffffff;\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 #18527B;\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: #e0ecf5;\n border-color: #18527B;\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": "<div id=\"root\"></div>",
"js": "import React from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';\nimport ReactDOM from 'https://cdn.jsdelivr.net/npm/[email protected]/+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 <div className=\"navbar\">\n <div className=\"nav-left\">\n <button\n className=\"apps-button\"\n onClick={openApps}\n title=\"alle Apps\"\n aria-label=\"alle Apps\"\n type=\"button\"\n >\n <svg\n className=\"apps-icon\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"5\" cy=\"5\" r=\"2.5\" />\n <circle cx=\"12\" cy=\"5\" r=\"2.5\" />\n <circle cx=\"19\" cy=\"5\" r=\"2.5\" />\n <circle cx=\"5\" cy=\"12\" r=\"2.5\" />\n <circle cx=\"12\" cy=\"12\" r=\"2.5\" />\n <circle cx=\"19\" cy=\"12\" r=\"2.5\" />\n <circle cx=\"5\" cy=\"19\" r=\"2.5\" />\n <circle cx=\"12\" cy=\"19\" r=\"2.5\" />\n <circle cx=\"19\" cy=\"19\" r=\"2.5\" />\n </svg>\n </button>\n\n {navItems.map((item) => (\n <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 >\n <div className=\"nav-icon\">{item.icon}</div>\n <span className=\"nav-title\">{item.title}</span>\n </a>\n ))}\n </div>\n\n <div className=\"nav-right\">\n <div className=\"user-button\" onClick={openUserModal} title=\"Account Info\">\n <div className=\"user-circle\">\n <svg\n className=\"user-icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <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 />\n <path\n d=\"M4 21c0-4.418 3.582-8 8-8s8 3.582 8 8\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n </div>\n </div>\n </div>\n );\n}\n\nappsmith.onReady(() => {\n ReactDOM.render(<MainNavBar />, document.getElementById(\"root\"));\n});"
},