Improve Sidebar Menu's button and label placement

[latin-panda]

Describe the issue
During exploration testing we got 2 feedback for improving the Sidebar Menu.

Describe the improvement you'd like
1.. It would be nice to be able to close the hamburger menu from the same position without having to move the cursor to the left.

• Make the clickable area of the close icon bigger, that way, we don't need to change the alignment of the close icon and other icons in the sidebar.

1.mp4

2.. When I chose Bamanankan (Bambara) , on Desktop, the word for messages is too long, and it needs to be cut. I think it is great that nav bar still looks the same, but I was wondering if it ok to cut the work/phrase?

• Maybe wrap the label to second line and also add ellipsis if it still doesn't fit on second line (we do this with breadcrumbs)

Mobile is okay:

[GallyTi]

Hi @latin-panda I would like to contribute to this issue if I can.

Thank you

[latin-panda]

Thanks @GallyTi. We need a quick confirmation from our designer @n-orlowski to ensure the proposed solution is okay.

@n-orlowski, are these solutions explained okay? Checking because I think you had some thoughts on the second point about long names.

[GallyTi]

Hi @latin-panda. I'm very sorry to tell you this, but I was unable to run this project locally on my computer. Neither from WSL 2, nor from a VM of Ubuntu 22.04. I can't install the dependencies. I have been trying to run this project for about 5 hours. So I apologize, but unfortunately I can't participate in this project.

The main problem was with installing dependencies via: npm ci --legacy-peer-deps
where I obtained 51 vulnerabilities

when running npm run build-dev I get an error message:
"

[email protected] build-dev
./scripts/build/build-prepare.sh && npm run -- prefix shared-libs/cht-datasource build &
& npm run build-webapp-dev && ./scripts/build/copy-static-files.sh

build-prepare: cleaning build directory
node: internal/modules/cjs/loader : 435
throw err;

Error: Cannot find module '/home/gally/cht-core/node_modules/request-promise-native/lib/r
p. js'. Please verify that the package. json has a valid "main" entry
at tryPackage (node: internal/modules/cjs/loader : 427:19)
at Function. Module ._ findPath (node: internal/modules/cjs/loader : 640:18)
at Function. Module ._ resolveFilename (node: internal/modules/cjs/loader : 1014:27)
at Function. Module. load (node: internal/modules/cjs/loader : 873:27)
at Module.require (node: internal/modules/cjs/loader : 1100:19)
at require (node: internal/modules/cjs/helpers : 119:18)
at Object .< anonymous> (/home/gally/cht-core/scripts/build/index.js:4:13)
at Module ._ compile (node: internal/modules/cjs/loader : 1198:14)
at Object. Module ._ extensions. .js (node: internal/modules/cjs/loader : 1252:10)
at Module. load (node: internal/modules/cjs/loader : 1076:32) {
code: 'MODULE_NOT_FOUND',
path: '/home/gally/cht-core/node_modules/request-promise-native/package. json',
requestPath: 'request-promise-native'
"

Even when i was trying to install these dependencies i was not able to run this project localy.

[latin-panda]

@GallyTi, sorry to hear about the problems, I appreciate your efforts in setting up the environment.
I would like to understand the issues better:

1. What version of NodeJs and NPM have you installed? We recommend using NodeJS 20 and npm 10
2. Can you try running npm ci in the root folder of CHT? It will show many warnings and vulnerabilities but should not show errors. For example, this is my output after running the command:

3. If after running the command, errors show. Please post the screenshot here; then we can help assess the problem further

[GallyTi]

EDIT 1:
So i thought about clean install. So i removed cht-core and downloaded it again, after running right commends it looks like it is working, so yes it was a error on my side. But i don't know why I was getting those errors, because, when i was trying it first, i had a version 20 of node. After i was trying to install everything i asked a chatgpt, and he replied to downgrading a node.js so really. I don't know what happened.

So after reinstalling it is working properly

EDIT 2:
When i was trying to run cht-core from fresh in WSL2 and Ubuntu, I do get this error when running npm ci --legacy-peer-deps:

npm warn EBADENGINE Unsupported engine {
npm warn EBADENGINE package: '[email protected]',
npm warn EBADENGINE required: { node: '>=14 <17', npm: '>=6 <7' },
npm warn EBADENGINE current: { node: 'v20.18.0', npm: '10.8.2' }
npm warn EBADENGINE }
npm warn deprecated [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: This package is no longer supported. Please use @npmcli/package-json instead.
npm warn deprecated [email protected]: Please upgrade to latest, formidable@v2 or formidable@v3! Check these notes: https://bit.ly/2ZEqIau
npm error code 1
npm error git dep preparation failed
npm error command /home/gallyti/.nvm/versions/node/v20.18.0/bin/node /home/gallyti/.nvm/versions/node/v20.18.0/lib/node_modules/npm/bin/npm-cli.js install --force --cache=/home/gallyti/.npm --prefer-offline=false --prefer-online=false --offline=false --no-progress --no-save --no-audit --include=dev --include=peer --include=optional --no-package-lock-only --no-dry-run
npm error npm warn using --force Recommended protections disabled.
npm error npm warn old lockfile
npm error npm warn old lockfile The package-lock.json file was created with an old version of npm,
npm error npm warn old lockfile so supplemental metadata must be fetched from the registry.
npm error npm warn old lockfile
npm error npm warn old lockfile This is a one-time fix-up, please be patient...
npm error npm warn old lockfile
npm error npm warn deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm error npm warn deprecated [email protected]: This module moved to @hapi/sntp. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm error npm warn deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm error npm warn deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm error npm warn deprecated [email protected]: This package is no longer maintained
npm error npm warn deprecated [email protected]: This package is no longer maintained and vulnerability exists.
npm error npm warn deprecated [email protected]: request has been deprecated, see request/request#3142
npm error npm warn deprecated [email protected]: this package is now deprecated
npm error npm warn deprecated [email protected]: This module relies on Node.js's internals and will break at some point. Do not use it, and update to [email protected].
npm error npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm error npm warn deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm error npm warn deprecated [email protected]: Please use the native JSON object instead of JSON 3
npm error npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm error npm warn deprecated [email protected]: PhantomJS development have stopped, use puppeteer or similar
npm error npm warn deprecated [email protected]: This version of 'is-buffer' is out-of-date. You must update to v1.1.6 or newer
npm error npm warn deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm error npm warn deprecated [email protected]: this library is no longer supported
npm error npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm error npm warn deprecated [email protected]: This module moved to @hapi/hawk. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm error npm warn deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm error npm warn deprecated [email protected]: update to [email protected]
npm error npm warn deprecated [email protected]: catastrophic backtracking in regexes could potentially lead to REDOS attack, upgrade to 2.17.2 as soon as possible
npm error npm warn deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm error npm warn deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm error npm warn deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm error npm warn deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm error npm warn deprecated [email protected]: This package is no longer maintained and vulnerability exists.
npm error npm warn deprecated [email protected]: 0.x is no longer supported. Please upgrade to 6.x or higher.
npm error npm warn deprecated [email protected]: This module is no longer maintained, try this instead:
npm error npm warn deprecated npm i nyc
npm error npm warn deprecated Visit https://istanbul.js.org/integrations for other alternatives.
npm error npm warn deprecated [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm error npm warn deprecated [email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm error npm warn deprecated [email protected]: Use @unicode/unicode-5.2.0 instead.
npm error npm warn deprecated [email protected]: Use @unicode/unicode-7.0.0 instead.
npm error npm error code 1
npm error npm error path /home/gallyti/.npm/_cacache/tmp/git-cloneIfYNVf/node_modules/phantomjs-prebuilt
npm error npm error command failed
npm error npm error command sh -c node install.js
npm error npm error PhantomJS not found on PATH
npm error npm error Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-linux-x86_64.tar.bz2
npm error npm error Saving to /tmp/phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2
npm error npm error Receiving...
npm error npm error
npm error npm error Received 22866K total.
npm error npm error Extracting tar contents (via spawned process)
npm error npm error Error extracting archive
npm error npm error Phantom installation failed Error: Command failed: tar jxf /tmp/phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2
npm error npm error tar (child): bzip2: Cannot exec: No such file or directory
npm error npm error tar (child): Error is not recoverable: exiting now
npm error npm error tar: Child returned status 2
npm error npm error tar: Error is not recoverable: exiting now
npm error npm error
npm error npm error at genericNodeError (node:internal/errors:984:15)
npm error npm error at wrappedFn (node:internal/errors:538:14)
npm error npm error at ChildProcess.exithandler (node:child_process:422:12)
npm error npm error at ChildProcess.emit (node:events:519:28)
npm error npm error at maybeClose (node:internal/child_process:1105:16)
npm error npm error at Socket. (node:internal/child_process:457:11)
npm error npm error at Socket.emit (node:events:519:28)
npm error npm error at Pipe. (node:net:339:12) {
npm error npm error code: 2,
npm error npm error killed: false,
npm error npm error signal: null,
npm error npm error cmd: 'tar jxf /tmp/phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2'
npm error npm error } Error: Command failed: tar jxf /tmp/phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2
npm error npm error tar (child): bzip2: Cannot exec: No such file or directory
npm error npm error tar (child): Error is not recoverable: exiting now
npm error npm error tar: Child returned status 2
npm error npm error tar: Error is not recoverable: exiting now
npm error npm error
npm error npm error at genericNodeError (node:internal/errors:984:15)
npm error npm error at wrappedFn (node:internal/errors:538:14)
npm error npm error at ChildProcess.exithandler (node:child_process:422:12)
npm error npm error at ChildProcess.emit (node:events:519:28)
npm error npm error at maybeClose (node:internal/child_process:1105:16)
npm error npm error at Socket. (node:internal/child_process:457:11)
npm error npm error at Socket.emit (node:events:519:28)
npm error npm error at Pipe. (node:net:339:12)
npm error npm error A complete log of this run can be found in: /home/gallyti/.npm/_logs/2024-10-05T09_39_59_556Z-debug-0.log
npm error A complete log of this run can be found in: /home/gallyti/.npm/_logs/2024-10-05T09_39_51_128Z-debug-0.log
/home/gallyti/cht-core/scripts/build/index.js:210
return reject(new Error(${command} exited with ${code}));
^

Error: npm exited with 1
at ChildProcess. (/home/gallyti/cht-core/scripts/build/index.js:210:21)
at ChildProcess.emit (node:events:519:28)
at maybeClose (node:internal/child_process:1105:16)
at ChildProcess._handle.onexit (node:internal/child_process:305:5)

Node.js v20.18.0

Old message:
Yes, as you mentioned, i was on old Version of node.js 12.22.29.

So after updating a node.js to version 20.18.0
and npm on version:10.8.2

So then i run npm ci --legacy-peer-deps in ~/cht-core which resulted to install some deppendencies BUT:

As you can see the npm ci gives me this:

And when i tried to run a npm run build-dev I do get this:

So any recommendation? Thank you 😄

[latin-panda]

So i thought about clean install. So i removed cht-core and downloaded it again, after running right commends it looks like it is working, so yes it was a error on my side. But i don't know why I was getting those errors, because, when i was trying it first, i had a version 20 of node. After i was trying to install everything i asked a chatgpt, and he replied to downgrading a node.js so really. I don't know what happened.

So after reinstalling it is working properly

@GallyTi Thanks for trying it out again, I'm glad it's working now.
Looking at the logs you shared, this piece seems suspicious:

> npm error npm warn old lockfile The package-lock.json file was created with an old version of npm,
> npm error npm warn old lockfile so supplemental metadata must be fetched from the registry.

CHT has its own package-lock.js, which is very important because it ensures the installation of dependencies with the correct version by using npm ci command. At some point, something seemed to create a package-lock.json with an old version producing those errors; in most cases, this error is produced by something running npm install command. Removing node_modules folders, reverting any change in any of the CHT's package.json and package-lock.js files and then running npm ci in the root folder usually fixes that error.

[GallyTi]

So, i tried to install it as you described, and fully clean install, where i will attach 2 txt files with full terminal. Both of them are unsuccessful. So solution for windows is not working, i mean on my machine. Without opening these files you can see same problem for nstalling-cht-core-on-ubuntu-windows-log-from-terminal.txt ass you mentioned.

installing-cht-core-without-package-lock-json.txt
installing-cht-core-on-ubuntu-windows-log-from-terminal.txt

Btw, i can work on these changes in this issue, so i will wait for response from your designer. Thanks, for your support and sorry for troubles... @latin-panda :)

[n-orlowski]

Hi both, and thanks @GallyTi for picking this up!

For the first improvement my recommendation would be to match the alignment of the "X" to the hamburger icon and subsequently left align the icons below it when the drawer is open (instead of making the clickable area larger)

For the second improvement, best practice is to keep navigation levels to one line but as we are designing for flexibility I'm ok with the proposed solution (two lines plus elipses), however we should encourage projects to use shorter label text where possible

[GallyTi]

Okay, you can assignee this to me. I will try to improve this, and as soon as i will have a solution for this i will provide it by screenshots.

[latin-panda]

Thanks @GallyTi for picking this up! You can find documentation that can help you get started .

If you have any questions, let us know!

[GallyTi]

Hi @latin-panda and @n-orlowski. So i made these changes, as you requested:

As you mentioned I made a two lines plus ellipses

For the first solution, I have made as close as unopened state, so the Close button is same width and same clickable size as burger menu. Also i have made the adjustments for the menu items so they align properly with close button.

Same changes for mobile menu, where it is aligned to burger menu:

If you have anything to change tell me, i will make a pull request.

[n-orlowski]

Thanks @GallyTi ! The double lines in the side nav looks great 🎉 The menu title and text in the drawer is a little far from their corresponding icons, can we keep the original spacing? 🙏

[GallyTi]

Hi, @n-orlowski. So I've made the changes you requested. For now it look like this:

The mobile menu:

The Desktop menu:

Is it good, or? Thank you :) I have achieved that by using -15px margin left for text, so we can have the icon at the same position.

[n-orlowski]

Looks good to me! Thanks for your help @GallyTi 💪

[latin-panda]

@GallyTi I'll be reviewing your PR tomorrow 🤩