redesign main layout

[exalate-issue-sync]

Description

User Stories

• As a user I want to look at an appealing UI that makes me feel like I can do my job easier.

Value

Acceptance Criteria

• Design: https://www.figma.com/file/EqAiB1wY7cYaMaitjyzup3/Current-oC-Web-UI-Kit-(WIP)?node-id=109%3A48467
• Left Sidebar: https://www.figma.com/file/EqAiB1wY7cYaMaitjyzup3/Current-oC-Web-UI-Kit-(WIP)?node-id=109%3A48487
• App-Switcher icon on top left
  • content and visual appearance of app switcher stays the same
• logo next to app switcher icon
• Search Form stays the same, but horzontally centered
• Bell, survey and account icon to the top right;
  • account content stays the same
• left sidebar according to design
  • big screen: per default open
  • small screen: collapsed
  • userchioce of sidebar status gets saved to the local storage
  • collapsed: item-names in tooltips
• on small mobile: hide left sidebar entirely. (proper mobile view is a different story)
• on small screens: show a notice, to use the native apps on the play and apple store

We need to check and decide, if we want to deliver the increment of this story in the next release. It would need to be better than the status quo.

Definition of done

• Functional requirements
  [ ] functionality described in the user story works
  [ ] acceptance criteria are fulfilled
• Quality
  [ ] codre review happened
  [ ] CI is green
  [ ] critical code received unit tests by the developer
  [ ] automated tests passed (if automated tests are not available, this test needs to be created and passed
• Non-functional requirements
  [ ] no sonar cloud issues