WIP: Redesign toolbar

[personalizedrefrigerator]

Summary

This pull request's goal is to improve the usability of js-draw's toolbars on both desktop and mobile.

Note:

Active development of this feature is currently being done on the dev branch. A separate pull request may soon be created with other changes for the 1.0.0 release.

Tasks

• [x] Refactoring to allow different toolbar layouts to work with the same BaseToolWidgets.
• [x] Implement drawer toolbar (see the dev branch, https://github.com/laurent22/joplin/issues/8568 and #21).
  • Can this be done with a CSS @media selector and the above sidebar implementation?
• [ ] Implement sidebar toolbar
  • [ ] Show what previously was displayed in dropdowns in the sidbar
  • [ ] (partially done) Implement close/tool switch behavior
• [ ] Switch between toolbars based on screen width
• [ ] Clean up & test implementation.

Testing

==To-do!==

Screenshots/other information

A screenshot of the current (very incomplete) implementation:

Will resolve #21.

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit 3bc715b):

https://js-draw--pr22-work-sidebar-tool-pr-dn6gkxer.web.app

_{(expires Fri, 04 Aug 2023 21:38:49 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: e560ee6f7bb6b79cb55b42fb4c05e9fd1b5c506e}

[personalizedrefrigerator]

Closing in favor of https://github.com/personalizedrefrigerator/js-draw/pull/25