diff --git a/eliis-front-end/package-lock.json b/eliis-front-end/package-lock.json index 4b200fc..34e643f 100644 --- a/eliis-front-end/package-lock.json +++ b/eliis-front-end/package-lock.json @@ -17,8 +17,6 @@ "@mdi/react": "^1.6.1", "@mui/material": "^5.14.13", "@testing-library/jest-dom": "^5.17.0", - "@testing-library/react": "^13.4.0", - "@testing-library/user-event": "^13.5.0", "axios": "^1.5.1", "bootstrap": "^5.3.2", "cdbreact": "^1.5.18", @@ -33,6 +31,10 @@ "react-router-dom": "^6.16.0", "react-scripts": "^5.0.1", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "@testing-library/react": "^14.0.0", + "@testing-library/user-event": "^14.5.1" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -4171,7 +4173,7 @@ "version": "9.3.3", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz", "integrity": "sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==", - "peer": true, + "dev": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -4190,7 +4192,7 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "peer": true, + "dev": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -4205,7 +4207,7 @@ "version": "5.1.3", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==", - "peer": true, + "dev": true, "dependencies": { "deep-equal": "^2.0.5" } @@ -4214,7 +4216,7 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "peer": true, + "dev": true, "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -4230,7 +4232,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "peer": true, + "dev": true, "dependencies": { "color-name": "~1.1.4" }, @@ -4242,13 +4244,13 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "peer": true + "dev": true }, "node_modules/@testing-library/dom/node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "peer": true, + "dev": true, "engines": { "node": ">=8" } @@ -4257,7 +4259,7 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "peer": true, + "dev": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -4348,121 +4350,30 @@ } }, "node_modules/@testing-library/react": { - "version": "13.4.0", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz", - "integrity": "sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==", + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.0.0.tgz", + "integrity": "sha512-S04gSNJbYE30TlIMLTzv6QCTzt9AqIF5y6s6SzVFILNcNvbV/jU96GeiTPillGQo+Ny64M/5PV7klNYYgv5Dfg==", + "dev": true, "dependencies": { "@babel/runtime": "^7.12.5", - "@testing-library/dom": "^8.5.0", + "@testing-library/dom": "^9.0.0", "@types/react-dom": "^18.0.0" }, "engines": { - "node": ">=12" + "node": ">=14" }, "peerDependencies": { "react": "^18.0.0", "react-dom": "^18.0.0" } }, - "node_modules/@testing-library/react/node_modules/@testing-library/dom": { - "version": "8.20.1", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.1.tgz", - "integrity": "sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==", - "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "aria-query": "5.1.3", - "chalk": "^4.1.0", - "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.5.0", - "pretty-format": "^27.0.2" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/@testing-library/react/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/@testing-library/react/node_modules/aria-query": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", - "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==", - "dependencies": { - "deep-equal": "^2.0.5" - } - }, - "node_modules/@testing-library/react/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/@testing-library/react/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/@testing-library/react/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" - }, - "node_modules/@testing-library/react/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "engines": { - "node": ">=8" - } - }, - "node_modules/@testing-library/react/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/@testing-library/user-event": { - "version": "13.5.0", - "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz", - "integrity": "sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==", - "dependencies": { - "@babel/runtime": "^7.12.5" - }, + "version": "14.5.1", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.1.tgz", + "integrity": "sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==", + "dev": true, "engines": { - "node": ">=10", + "node": ">=12", "npm": ">=6" }, "peerDependencies": { @@ -4488,7 +4399,8 @@ "node_modules/@types/aria-query": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.2.tgz", - "integrity": "sha512-PHKZuMN+K5qgKIWhBodXzQslTo5P+K/6LqeKXS6O/4liIDdZqaX5RXrCK++LAw+y/nptN48YmUMFiQHRSWYwtQ==" + "integrity": "sha512-PHKZuMN+K5qgKIWhBodXzQslTo5P+K/6LqeKXS6O/4liIDdZqaX5RXrCK++LAw+y/nptN48YmUMFiQHRSWYwtQ==", + "dev": true }, "node_modules/@types/babel__core": { "version": "7.20.2", @@ -7439,6 +7351,7 @@ "version": "2.2.2", "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.2.tgz", "integrity": "sha512-xjVyBf0w5vH0I42jdAZzOKVldmPgSulmiyPRywoyq7HXC9qdgo17kxJE+rdnif5Tz6+pIrpJI8dCpMNLIGkUiA==", + "dev": true, "dependencies": { "array-buffer-byte-length": "^1.0.0", "call-bind": "^1.0.2", @@ -7927,6 +7840,7 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz", "integrity": "sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==", + "dev": true, "dependencies": { "call-bind": "^1.0.2", "get-intrinsic": "^1.1.3", @@ -10107,6 +10021,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==", + "dev": true, "dependencies": { "call-bind": "^1.0.2", "has-tostringtag": "^1.0.0" @@ -12975,6 +12890,7 @@ "version": "1.5.0", "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", + "dev": true, "bin": { "lz-string": "bin/bin.js" } @@ -13444,6 +13360,7 @@ "version": "1.1.5", "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz", "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==", + "dev": true, "dependencies": { "call-bind": "^1.0.2", "define-properties": "^1.1.3" @@ -16888,6 +16805,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz", "integrity": "sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==", + "dev": true, "dependencies": { "internal-slot": "^1.0.4" }, diff --git a/eliis-front-end/package.json b/eliis-front-end/package.json index 909c4cc..eb49a88 100644 --- a/eliis-front-end/package.json +++ b/eliis-front-end/package.json @@ -12,8 +12,6 @@ "@mdi/react": "^1.6.1", "@mui/material": "^5.14.13", "@testing-library/jest-dom": "^5.17.0", - "@testing-library/react": "^13.4.0", - "@testing-library/user-event": "^13.5.0", "axios": "^1.5.1", "bootstrap": "^5.3.2", "cdbreact": "^1.5.18", @@ -52,5 +50,9 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "@testing-library/react": "^14.0.0", + "@testing-library/user-event": "^14.5.1" } } diff --git a/eliis-front-end/src/components/buttons/button/CustomButton.css b/eliis-front-end/src/components/buttons/button/CustomButton.css deleted file mode 100644 index 72050d7..0000000 --- a/eliis-front-end/src/components/buttons/button/CustomButton.css +++ /dev/null @@ -1,5 +0,0 @@ -/* CustomButton.css */ -.custom-button { - width: 100%; - margin-bottom: 10px; -} diff --git a/eliis-front-end/src/components/buttons/button/CustomButton.js b/eliis-front-end/src/components/buttons/button/CustomButton.js deleted file mode 100644 index f71242e..0000000 --- a/eliis-front-end/src/components/buttons/button/CustomButton.js +++ /dev/null @@ -1,10 +0,0 @@ -// CustomButton.js -import React from 'react'; -import Button from 'react-bootstrap/Button'; -import './CustomButton.css'; // Import the CSS file - -function CustomButton({ label }) { - return ; -} - -export default CustomButton; diff --git a/eliis-front-end/src/components/buttons/dropdown/Dropdown.css b/eliis-front-end/src/components/buttons/dropdown/Dropdown.css deleted file mode 100644 index f1eb4b8..0000000 --- a/eliis-front-end/src/components/buttons/dropdown/Dropdown.css +++ /dev/null @@ -1,6 +0,0 @@ -/* DropdownMenu.css */ -.dropdown-menu { - width: 100%; - margin-bottom: 10px; - } - \ No newline at end of file diff --git a/eliis-front-end/src/components/buttons/dropdown/Dropdown.js b/eliis-front-end/src/components/buttons/dropdown/Dropdown.js deleted file mode 100644 index 4891f04..0000000 --- a/eliis-front-end/src/components/buttons/dropdown/Dropdown.js +++ /dev/null @@ -1,18 +0,0 @@ -// DropdownMenu.js -import React from 'react'; -import DropdownButton from 'react-bootstrap/DropdownButton'; -import Dropdown from 'react-bootstrap/Dropdown'; - -function DropdownMenu({ id, title, items }) { - return ( - - {items.map((item, index) => ( - - {item.label} - - ))} - - ); -} - -export default DropdownMenu; diff --git a/eliis-front-end/src/components/sidebar/Sidebar.css b/eliis-front-end/src/components/sidebar/Sidebar.css index 4539dce..36bc94a 100644 --- a/eliis-front-end/src/components/sidebar/Sidebar.css +++ b/eliis-front-end/src/components/sidebar/Sidebar.css @@ -20,6 +20,7 @@ /* Makes the casing of buttons round */ .rounded-lg { border-radius: 0.5rem; + } /* Makes icons from black --> white */ .text-white { @@ -35,6 +36,12 @@ align-items: center; margin-right: 8px; } +.dropdown-open { + margin-bottom: calc(2.4rem + 2rem * var(--nav-links, 1.7)); +} +.chevron-icon { + margin-left: auto !important; +} /* Styling for whole side navigation bar */ .sidebar { color: #444; @@ -67,3 +74,20 @@ transition: filter .2s ease-in,transform .2s ease-in-out; } } + +.custom-dropdown-toggle { + color: #444 !important; /* Set text color to black */ + background-color: transparent !important; /* Set background color to transparent */ + border: none !important; /* Remove border */ +} + +.custom-dropdown-toggle:hover { + background-color: transparent !important; /* Set background color to transparent on hover */ +} + +.custom-dropdown-toggle::after { + border: none !important; /* Remove the caret icon */ + content: none !important; /* Remove any content (caret icon) */ +} + + diff --git a/eliis-front-end/src/components/sidebar/Sidebar.js b/eliis-front-end/src/components/sidebar/Sidebar.js index c110354..c21b4dc 100644 --- a/eliis-front-end/src/components/sidebar/Sidebar.js +++ b/eliis-front-end/src/components/sidebar/Sidebar.js @@ -16,8 +16,11 @@ import { mdiContacts, mdiTextBoxCheck, mdiLifebuoy, + mdiChevronRight, + mdiChevronDown, } from '@mdi/js'; import './Sidebar.css'; +import Dropdown from 'react-bootstrap/Dropdown'; const Sidebar = () => { const menuItems = [ @@ -37,20 +40,124 @@ const Sidebar = () => { { to: '/help', icon: mdiLifebuoy, label: 'Help' }, ]; + const getDropdownItems = (label) => { + switch (label) { + case 'Diary': + return ( + <> + Diary example + + ); + case 'Plans': + return ( + <> + Plans Action 1 + Plans Action 2 + + ); + case 'Work schedule': + return ( + <> + Work schedule Action 1 + Work schedule Action 2 + + ); + case 'Events': + return ( + <> + Calendar + List view + + ); + case 'Food menu': + return ( + <> + Food menu Action 1 + Food menu Action 2 + + ); + case 'Applications': + return ( + <> + Applications Action 1 + Applications Action 2 + + ); + case 'Contacts': + return ( + <> + Contacts Action 1 + Contacts Action 2 + + ); + case 'Surveys': + return ( + <> + Surveys Action 1 + Surveys Action 2 + + ); + case 'Help': + return ( + <> + Help Action 1 + Help Action 2 + + ); + default: + return null; + } + }; + + const ButtonLink = ({ to, label, icon }) => { + const isDropdown = ['Diary', 'Plans', 'Work schedule', 'Events', 'Food menu', 'Applications', 'Contacts', 'Surveys', 'Help'].includes(label); + + // Local state to track the toggle status + const [isDropdownOpen, setDropdownOpen] = React.useState(false); + + const handleDropdownToggle = () => { + setDropdownOpen(!isDropdownOpen); + }; + + if (isDropdown) { + return ( + + +
+
+ +
+ {label} + +
+ + + {getDropdownItems(label)} + + + ); + } + + return ( + +
+
+ +
+ {label} +
+ + ); + }; + + return ( -
+