[Enhancement] Tabbar with medium text badge

[henrikvoetmand]

• I have written a good issue

Describe the enhancement

DRB is working to enhance the tabbar to make is possible to see the number of unread messages. A medium badge with text is used to show this info. The placement and alignment of the badge with text is not correct.

Describe the solution you'd like

Adjust the position and the alignment (left-align) of the badge.

Have you considered any alternatives?

No

Are there any additional context?

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Refinement

• Request that the issue is UX refined; do not proceed until this is done.
• Request that the issue is tech refined; do not proceed until this is done.

Implementation

The contributor who wants to implement this issue should:

• Make sure you have read: "Before you get coding".
• Signal to others you are working on the issue by assigning yourself.
• Create a branch from the develop branch following our branch naming convention.
• Publish a WIP implementation to Github as a draft PR and ask for feedback.
• Make sure you have implemented tests following the guidelines in: "The good: Test".
• Update the cookbook with examples and showcases.

Review

Once the issue has been implemented and is ready for review:

• Do a self-review.
• Create a pull-request. If you created a draft PR during implementation you can just mark that as "ready for review".

[RasmusKjeldgaard]

I have linked a draft that illustrates how this should look for mobile view.

[henrikvoetmand]

UPDATE!
The requirements for the tablet and the desktop version has changed. The mobile implementation/design is NOT changed.
On tablet and desktop we want to place the badge to the right of menu point label. See below: